sigma-ui 1.0.14 → 1.0.15
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/__generated/registry-schemes/style-system/css/accordion.json +2 -2
- package/__generated/registry-schemes/style-system/css/alert-dialog.json +5 -5
- package/__generated/registry-schemes/style-system/css/alert.json +2 -2
- package/__generated/registry-schemes/style-system/css/avatar.json +1 -1
- package/__generated/registry-schemes/style-system/css/badge.json +1 -1
- package/__generated/registry-schemes/style-system/css/breadcrumb.json +4 -4
- package/__generated/registry-schemes/style-system/css/button.json +1 -1
- package/__generated/registry-schemes/style-system/css/calendar.json +7 -7
- package/__generated/registry-schemes/style-system/css/card-lightbox.json +1 -1
- package/__generated/registry-schemes/style-system/css/card.json +5 -5
- package/__generated/registry-schemes/style-system/css/carousel.json +4 -4
- package/__generated/registry-schemes/style-system/css/chart-area.json +1 -1
- package/__generated/registry-schemes/style-system/css/chart-bar.json +1 -1
- package/__generated/registry-schemes/style-system/css/chart-donut.json +1 -1
- package/__generated/registry-schemes/style-system/css/chart-line.json +1 -1
- package/__generated/registry-schemes/style-system/css/chart.json +1 -1
- package/__generated/registry-schemes/style-system/css/checkbox.json +1 -1
- package/__generated/registry-schemes/style-system/css/combobox.json +6 -6
- package/__generated/registry-schemes/style-system/css/command.json +9 -9
- package/__generated/registry-schemes/style-system/css/context-menu.json +9 -9
- package/__generated/registry-schemes/style-system/css/dialog.json +6 -6
- package/__generated/registry-schemes/style-system/css/drawer.json +6 -6
- package/__generated/registry-schemes/style-system/css/dropdown-menu.json +9 -9
- package/__generated/registry-schemes/style-system/css/form.json +2 -2
- package/__generated/registry-schemes/style-system/css/hover-card.json +1 -1
- package/__generated/registry-schemes/style-system/css/image.json +1 -1
- package/__generated/registry-schemes/style-system/css/input.json +1 -1
- package/__generated/registry-schemes/style-system/css/menubar.json +10 -10
- package/__generated/registry-schemes/style-system/css/navigation-menu.json +5 -5
- package/__generated/registry-schemes/style-system/css/number-field.json +3 -3
- package/__generated/registry-schemes/style-system/css/pagination.json +5 -5
- package/__generated/registry-schemes/style-system/css/pin-input.json +3 -3
- package/__generated/registry-schemes/style-system/css/popover.json +1 -1
- package/__generated/registry-schemes/style-system/css/progress.json +1 -1
- package/__generated/registry-schemes/style-system/css/radio-group.json +1 -1
- package/__generated/registry-schemes/style-system/css/range-calendar.json +8 -8
- package/__generated/registry-schemes/style-system/css/resizable.json +2 -2
- package/__generated/registry-schemes/style-system/css/scroll-area.json +2 -2
- package/__generated/registry-schemes/style-system/css/select.json +7 -7
- package/__generated/registry-schemes/style-system/css/separator.json +1 -1
- package/__generated/registry-schemes/style-system/css/sheet.json +5 -5
- package/__generated/registry-schemes/style-system/css/skeleton.json +1 -1
- package/__generated/registry-schemes/style-system/css/slider.json +1 -1
- package/__generated/registry-schemes/style-system/css/switch.json +1 -1
- package/__generated/registry-schemes/style-system/css/table.json +7 -7
- package/__generated/registry-schemes/style-system/css/tabs.json +3 -3
- package/__generated/registry-schemes/style-system/css/tags-input.json +4 -4
- package/__generated/registry-schemes/style-system/css/textarea.json +1 -1
- package/__generated/registry-schemes/style-system/css/toaster.json +3 -3
- package/__generated/registry-schemes/style-system/css/toggle.json +1 -1
- package/__generated/registry-schemes/style-system/css/tooltip.json +1 -1
- package/__generated/registry-schemes/style-system/tailwind/navigation-menu.json +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "AccordionContent.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<AccordionContentProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-accordion-content\"\n >\n <div\n class=\"sigma-ui-accordion-content-inner\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n </AccordionContent>\n</template>\n\n<style>\n.sigma-ui-accordion-content {\n overflow: hidden;\n font-size: 0.875rem;\n transition: all 0.2s;\n}\n\n.sigma-ui-accordion-content[data-state='closed'] {\n animation: accordion-up 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content[data-state='open'] {\n animation: accordion-down 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content-inner {\n padding: 0 0 1rem
|
|
12
|
+
"content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<AccordionContentProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <AccordionContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-accordion-content\"\n >\n <div\n class=\"sigma-ui-accordion-content-inner\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n </AccordionContent>\n</template>\n\n<style>\n.sigma-ui-accordion-content {\n overflow: hidden;\n font-size: 0.875rem;\n transition: all 0.2s;\n}\n\n.sigma-ui-accordion-content[data-state='closed'] {\n animation: accordion-up 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content[data-state='open'] {\n animation: accordion-down 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content-inner {\n padding: 0 0 1rem;\n}\n\n@keyframes accordion-up {\n from {\n height: var(--reka-accordion-content-height);\n }\n\n to {\n height: 0;\n }\n}\n\n@keyframes accordion-down {\n from {\n height: 0;\n }\n\n to {\n height: var(--reka-accordion-content-height);\n }\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "AccordionItem.vue",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "AccordionTrigger.vue",
|
|
20
|
-
"content": "<script setup lang=\"ts\">\nimport { AccordionHeader, AccordionTrigger, type AccordionTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\n\nconst props = defineProps<AccordionTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <AccordionHeader class=\"sigma-ui-accordion-header\">\n <AccordionTrigger\n v-bind=\"forwarded\"\n class=\"sigma-ui-accordion-trigger\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n <slot name=\"icon\">\n <ChevronDownIcon class=\"sigma-ui-accordion-trigger-icon\" />\n </slot>\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n\n<style>\n.sigma-ui-accordion-header {\n display: flex;\n}\n\n.sigma-ui-accordion-trigger {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 0;\n font-weight: 500;\n transition: all 0.2s;\n}\n\n.sigma-ui-accordion-trigger-icon {\n
|
|
20
|
+
"content": "<script setup lang=\"ts\">\nimport { AccordionHeader, AccordionTrigger, type AccordionTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\n\nconst props = defineProps<AccordionTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <AccordionHeader class=\"sigma-ui-accordion-header\">\n <AccordionTrigger\n v-bind=\"forwarded\"\n class=\"sigma-ui-accordion-trigger\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n <slot name=\"icon\">\n <ChevronDownIcon class=\"sigma-ui-accordion-trigger-icon\" />\n </slot>\n </AccordionTrigger>\n </AccordionHeader>\n</template>\n\n<style>\n.sigma-ui-accordion-header {\n display: flex;\n}\n\n.sigma-ui-accordion-trigger {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 0;\n font-weight: 500;\n transition: all 0.2s;\n}\n\n.sigma-ui-accordion-trigger-icon {\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n transition: transform 0.2s;\n}\n\n.sigma-ui-accordion-trigger[data-state=\"open\"] .sigma-ui-accordion-trigger-icon {\n transform: rotate(180deg);\n}\n</style>\n"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"name": "index.ts",
|
|
@@ -13,23 +13,23 @@
|
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "AlertDialogCancel.vue",
|
|
16
|
-
"content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui';\nimport { useAttrs } from 'vue';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<AlertDialogCancelProps>();\nconst attrs = useAttrs();\n</script>\n\n<template>\n <AlertDialogCancel\n v-bind=\"props\"\n class=\"sigma-ui-button sigma-ui-alert-dialog-cancel\"\n :class=\"[buttonVariants({ variant: 'outline' }), attrs.class]\"\n >\n <slot />\n </AlertDialogCancel>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-cancel {\n margin-top: 0.5rem;\n}\n\n@media (
|
|
16
|
+
"content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui';\nimport { useAttrs } from 'vue';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<AlertDialogCancelProps>();\nconst attrs = useAttrs();\n</script>\n\n<template>\n <AlertDialogCancel\n v-bind=\"props\"\n class=\"sigma-ui-button sigma-ui-alert-dialog-cancel\"\n :class=\"[buttonVariants({ variant: 'outline' }), attrs.class]\"\n >\n <slot />\n </AlertDialogCancel>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-cancel {\n margin-top: 0.5rem;\n}\n\n@media (width >= 640px) {\n .sigma-ui-alert-dialog-cancel {\n margin-top: 0;\n }\n}\n</style>\n"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "AlertDialogContent.vue",
|
|
20
|
-
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { useAttrs } from 'vue';\n\nconst props = defineProps<AlertDialogContentProps>();\nconst emits = defineEmits<AlertDialogContentEmits>();\nconst attrs = useAttrs();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay class=\"sigma-ui-alert-dialog-overlay\" />\n <AlertDialogContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-alert-dialog-content\"\n :class=\"attrs.class\"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-overlay {\n position: fixed;\n
|
|
20
|
+
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogContent,\n type AlertDialogContentEmits,\n type AlertDialogContentProps,\n AlertDialogOverlay,\n AlertDialogPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { useAttrs } from 'vue';\n\nconst props = defineProps<AlertDialogContentProps>();\nconst emits = defineEmits<AlertDialogContentEmits>();\nconst attrs = useAttrs();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogOverlay class=\"sigma-ui-alert-dialog-overlay\" />\n <AlertDialogContent\n v-bind=\"forwarded\"\n class=\"sigma-ui-alert-dialog-content\"\n :class=\"attrs.class\"\n >\n <slot />\n </AlertDialogContent>\n </AlertDialogPortal>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-overlay {\n position: fixed;\n z-index: 50;\n background-color: rgb(0 0 0 / 80%);\n inset: 0;\n}\n\n.sigma-ui-alert-dialog-overlay[data-state='open'] {\n animation: fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-overlay[data-state='closed'] {\n animation: fade-out 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-content {\n position: fixed;\n z-index: 50;\n top: 50%;\n left: 50%;\n display: grid;\n width: 100%;\n max-width: 32rem;\n padding: 1.5rem;\n border: 1px solid hsl(var(--border));\n background-color: hsl(var(--background));\n box-shadow: var(--shadow-lg);\n gap: 1rem;\n transform: translate(-50%, -50%);\n transition-duration: 200ms;\n}\n\n@media (width >= 640px) {\n .sigma-ui-alert-dialog-content {\n border-radius: var(--radius);\n }\n}\n\n.sigma-ui-alert-dialog-content[data-state='open'] {\n animation: content-show 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-alert-dialog-content[data-state='closed'] {\n animation: content-hide 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fade-in {\n from { opacity: 0; }\n\n to { opacity: 1; }\n}\n\n@keyframes fade-out {\n from { opacity: 1; }\n\n to { opacity: 0; }\n}\n\n@keyframes content-show {\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n@keyframes content-hide {\n from {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n\n to {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.95);\n }\n}\n</style>\n"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"name": "AlertDialogDescription.vue",
|
|
24
|
-
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogDescription,\n type AlertDialogDescriptionProps,\n} from 'reka-ui';\nimport { useAttrs } from 'vue';\n\nconst props = defineProps<AlertDialogDescriptionProps>();\nconst attrs = useAttrs();\n</script>\n\n<template>\n <AlertDialogDescription\n v-bind=\"props\"\n class=\"sigma-ui-alert-dialog-description\"\n :class=\"attrs.class\"\n >\n <slot />\n </AlertDialogDescription>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-description {\n
|
|
24
|
+
"content": "<script setup lang=\"ts\">\nimport {\n AlertDialogDescription,\n type AlertDialogDescriptionProps,\n} from 'reka-ui';\nimport { useAttrs } from 'vue';\n\nconst props = defineProps<AlertDialogDescriptionProps>();\nconst attrs = useAttrs();\n</script>\n\n<template>\n <AlertDialogDescription\n v-bind=\"props\"\n class=\"sigma-ui-alert-dialog-description\"\n :class=\"attrs.class\"\n >\n <slot />\n </AlertDialogDescription>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-description {\n color: hsl(var(--muted-foreground));\n font-size: 0.875rem;\n}\n</style>\n"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
"name": "AlertDialogFooter.vue",
|
|
28
|
-
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\n\nconst attrs = useAttrs();\n</script>\n\n<template>\n <div\n class=\"sigma-ui-alert-dialog-footer\"\n :class=\"attrs.class\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-footer {\n display: flex;\n flex-direction: column-reverse;\n}\n\n@media (
|
|
28
|
+
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\n\nconst attrs = useAttrs();\n</script>\n\n<template>\n <div\n class=\"sigma-ui-alert-dialog-footer\"\n :class=\"attrs.class\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-footer {\n display: flex;\n flex-direction: column-reverse;\n}\n\n@media (width >= 640px) {\n .sigma-ui-alert-dialog-footer {\n flex-direction: row;\n justify-content: flex-end;\n gap: 0.5rem;\n }\n}\n</style>\n"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
"name": "AlertDialogHeader.vue",
|
|
32
|
-
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\n\nconst attrs = useAttrs();\n</script>\n\n<template>\n <div\n class=\"sigma-ui-alert-dialog-header\"\n :class=\"attrs.class\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-header {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n text-align: center;\n}\n\n@media (
|
|
32
|
+
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\n\nconst attrs = useAttrs();\n</script>\n\n<template>\n <div\n class=\"sigma-ui-alert-dialog-header\"\n :class=\"attrs.class\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-alert-dialog-header {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n text-align: center;\n}\n\n@media (width >= 640px) {\n .sigma-ui-alert-dialog-header {\n text-align: left;\n }\n}\n</style>\n"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"name": "AlertDialogTitle.vue",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"files": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Alert.vue",
|
|
8
|
-
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\nimport { type AlertVariants, alertVariants } from '.';\n\nconst { variant } = defineProps<{\n variant?: AlertVariants['variant'];\n}>();\nconst attrs = useAttrs();\n</script>\n\n<template>\n <div\n class=\"sigma-ui-alert\"\n :class=\"[alertVariants({ variant }), attrs.class]\"\n role=\"alert\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-alert {\n position: relative;\n width: 100%;\n
|
|
8
|
+
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\nimport { type AlertVariants, alertVariants } from '.';\n\nconst { variant } = defineProps<{\n variant?: AlertVariants['variant'];\n}>();\nconst attrs = useAttrs();\n</script>\n\n<template>\n <div\n class=\"sigma-ui-alert\"\n :class=\"[alertVariants({ variant }), attrs.class]\"\n role=\"alert\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-alert {\n position: relative;\n width: 100%;\n padding: 1rem;\n border-width: 1px;\n border-radius: var(--radius);\n}\n\n.sigma-ui-alert > svg ~ * {\n padding-left: 1.75rem;\n}\n\n.sigma-ui-alert > svg + div {\n transform: translateY(-3px);\n}\n\n.sigma-ui-alert > svg {\n position: absolute;\n top: 1rem;\n left: 1rem;\n color: hsl(var(--foreground));\n}\n\n.sigma-ui-alert-default {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n}\n\n.sigma-ui-alert-destructive {\n border-color: hsl(var(--destructive) / 50%);\n color: hsl(var(--destructive));\n}\n\n.dark .sigma-ui-alert-destructive {\n border-color: hsl(var(--destructive));\n background-color: hsl(var(--destructive) / 20%);\n color: hsl(var(--red-500));\n}\n\n.sigma-ui-alert-destructive > svg {\n color: hsl(var(--red-500));\n}\n</style>\n"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "AlertDescription.vue",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "AlertTitle.vue",
|
|
16
|
-
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\n\nconst attrs = useAttrs();\n</script>\n\n<template>\n <h5\n class=\"sigma-ui-alert-title\"\n :class=\"attrs.class\"\n >\n <slot />\n </h5>\n</template>\n\n<style>\n.sigma-ui-alert-title {\n margin-bottom: 0.25rem;\n font-weight: 500;\n
|
|
16
|
+
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\n\nconst attrs = useAttrs();\n</script>\n\n<template>\n <h5\n class=\"sigma-ui-alert-title\"\n :class=\"attrs.class\"\n >\n <slot />\n </h5>\n</template>\n\n<style>\n.sigma-ui-alert-title {\n margin-bottom: 0.25rem;\n font-weight: 500;\n letter-spacing: -0.025em;\n line-height: 1;\n}\n</style>\n"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "index.ts",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"files": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Avatar.vue",
|
|
8
|
-
"content": "<script setup lang=\"ts\">\nimport { UserIcon } from 'lucide-vue-next';\nimport { avatarVariants } from '.';\nimport { Image, type ImageVariants } from '@ui/registry/css/ui/image';\n\nconst props = withDefaults(defineProps<{\n src?: string;\n alt?: string;\n glow?: boolean;\n size?: 'xs' | 'sm' | 'base' | 'lg';\n shape?: ImageVariants['shape'];\n}>(), {\n size: 'base',\n shape: 'circle',\n});\n</script>\n\n<template>\n <div :class=\"[avatarVariants({ size }), $attrs.class]\">\n <Image\n v-bind=\"props\"\n >\n <template #fallback>\n <slot name=\"fallback\">\n <UserIcon class=\"sigma-ui-avatar__fallback-icon\" />\n </slot>\n </template>\n </Image>\n </div>\n</template>\n\n<style>\n.sigma-ui-avatar {\n display: inline-flex;\n
|
|
8
|
+
"content": "<script setup lang=\"ts\">\nimport { UserIcon } from 'lucide-vue-next';\nimport { avatarVariants } from '.';\nimport { Image, type ImageVariants } from '@ui/registry/css/ui/image';\n\nconst props = withDefaults(defineProps<{\n src?: string;\n alt?: string;\n glow?: boolean;\n size?: 'xs' | 'sm' | 'base' | 'lg';\n shape?: ImageVariants['shape'];\n}>(), {\n size: 'base',\n shape: 'circle',\n});\n</script>\n\n<template>\n <div :class=\"[avatarVariants({ size }), $attrs.class]\">\n <Image\n v-bind=\"props\"\n >\n <template #fallback>\n <slot name=\"fallback\">\n <UserIcon class=\"sigma-ui-avatar__fallback-icon\" />\n </slot>\n </template>\n </Image>\n </div>\n</template>\n\n<style>\n.sigma-ui-avatar {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: hsl(var(--foreground));\n font-weight: normal;\n user-select: none;\n}\n\n.sigma-ui-avatar__fallback-icon {\n width: 40%;\n height: 40%;\n color: hsl(var(--primary) / 50%);\n}\n\n.sigma-ui-avatar--xs {\n width: 1.5rem;\n height: 1.5rem;\n font-size: 0.75rem;\n}\n\n.sigma-ui-avatar--sm {\n width: 2.5rem;\n height: 2.5rem;\n font-size: 0.75rem;\n}\n\n.sigma-ui-avatar--base {\n width: 4rem;\n height: 4rem;\n font-size: 1.5rem;\n}\n\n.sigma-ui-avatar--lg {\n width: 8rem;\n height: 8rem;\n font-size: 3rem;\n}\n</style>\n"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "index.ts",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"files": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Badge.vue",
|
|
8
|
-
"content": "<script setup lang=\"ts\">\nimport { type BadgeVariants, badgeVariants } from '.';\n\nconst props = defineProps<{\n variant?: BadgeVariants['variant'];\n\n}>();\n</script>\n\n<template>\n <div :class=\"[badgeVariants({ variant }), $attrs.class]\">\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-badge {\n display: inline-flex;\n align-items: center;\n
|
|
8
|
+
"content": "<script setup lang=\"ts\">\nimport { type BadgeVariants, badgeVariants } from '.';\n\nconst props = defineProps<{\n variant?: BadgeVariants['variant'];\n\n}>();\n</script>\n\n<template>\n <div :class=\"[badgeVariants({ variant }), $attrs.class]\">\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-badge {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.625rem;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-full);\n font-size: 0.75rem;\n font-weight: 600;\n transition-duration: 150ms;\n transition-property: color, background-color, border-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-badge:focus {\n box-shadow:\n 0 0 0 var(--ring-offset) hsl(var(--background)),\n 0 0 0 calc(var(--ring-offset) + var(--ring-width)) hsl(var(--ring));\n outline: none;\n\n --ring-offset: 2px;\n --ring-width: 2px;\n}\n\n.sigma-ui-badge--default {\n border-color: transparent;\n background-color: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-badge--default:hover {\n background-color: hsl(var(--primary) / 80%);\n}\n\n.sigma-ui-badge--secondary {\n border-color: transparent;\n background-color: hsl(var(--secondary));\n color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-badge--secondary:hover {\n background-color: hsl(var(--secondary) / 80%);\n}\n\n.sigma-ui-badge--destructive {\n border-color: transparent;\n background-color: hsl(var(--destructive));\n color: hsl(var(--destructive-foreground));\n}\n\n.sigma-ui-badge--destructive:hover {\n background-color: hsl(var(--destructive) / 80%);\n}\n\n.sigma-ui-badge--outline {\n color: hsl(var(--foreground));\n}\n</style>\n"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "index.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "BreadcrumbGenerator.vue",
|
|
16
|
-
"content": "<script lang=\"ts\" setup>\nimport type { Component } from 'vue';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport {\n Breadcrumb,\n BreadcrumbItem as BreadcrumbItemComponent,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '.';\n\nexport interface BreadcrumbItem {\n label?: string;\n icon?: string | Component;\n url?: string;\n route?: any;\n target?: string;\n active?: boolean;\n}\n\ninterface ActionProps {\n\n 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;\n}\n\nconst props = defineProps<{\n home?: BreadcrumbItem;\n model?: BreadcrumbItem[];\n}>();\n\nfunction getActionProps(item: BreadcrumbItem, isLast: boolean): ActionProps {\n const isActive = item.active || isLast;\n return {\n 'class': `sigma-ui-breadcrumb__action ${isActive ? 'sigma-ui-breadcrumb__action--active' : ''}`,\n 'aria-current': isActive ? 'page' : undefined,\n };\n}\n</script>\n\n<template>\n <Breadcrumb :class=\"$attrs.class\">\n <BreadcrumbList>\n <BreadcrumbItemComponent v-if=\"home\">\n <slot\n name=\"home\"\n :item=\"home\"\n :props=\"{ action: getActionProps(home, false) }\"\n >\n <BreadcrumbLink\n v-if=\"home.route\"\n :to=\"home.route\"\n class=\"sigma-ui-breadcrumb__link\"\n v-bind=\"getActionProps(home, false)\"\n >\n <component\n :is=\"home.icon\"\n v-if=\"home.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span>{{ home.label }}</span>\n </BreadcrumbLink>\n <BreadcrumbLink\n v-else-if=\"home.url\"\n :href=\"home.url\"\n :target=\"home.target\"\n class=\"sigma-ui-breadcrumb__link\"\n v-bind=\"getActionProps(home, false)\"\n >\n <component\n :is=\"home.icon\"\n v-if=\"home.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span v-if=\"home.label\">{{ home.label }}</span>\n </BreadcrumbLink>\n </slot>\n </BreadcrumbItemComponent>\n\n <BreadcrumbSeparator v-if=\"home && model?.length\">\n <slot name=\"separator\">\n <ChevronRightIcon />\n </slot>\n </BreadcrumbSeparator>\n\n <template\n v-for=\"(item, index) in (model || [])\"\n :key=\"index\"\n >\n <BreadcrumbItemComponent>\n <slot\n name=\"item\"\n :item=\"item\"\n :props=\"{ action: getActionProps(item, index === (model?.length || 0) - 1) }\"\n >\n <BreadcrumbLink\n v-if=\"item.route\"\n :to=\"item.route\"\n class=\"sigma-ui-breadcrumb__link\"\n v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n >\n <component\n :is=\"item.icon\"\n v-if=\"item.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span>{{ item.label }}</span>\n </BreadcrumbLink>\n <BreadcrumbLink\n v-else-if=\"item.url\"\n :href=\"item.url\"\n :target=\"item.target\"\n class=\"sigma-ui-breadcrumb__link\"\n v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n >\n <component\n :is=\"item.icon\"\n v-if=\"item.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span>{{ item.label }}</span>\n </BreadcrumbLink>\n <BreadcrumbPage\n v-else\n v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n >\n <div class=\"sigma-ui-breadcrumb__content\">\n <component\n :is=\"item.icon\"\n v-if=\"item.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span>{{ item.label }}</span>\n </div>\n </BreadcrumbPage>\n </slot>\n </BreadcrumbItemComponent>\n\n <BreadcrumbSeparator v-if=\"index < (model?.length || 0) - 1\">\n <slot name=\"separator\">\n <ChevronRightIcon />\n </slot>\n </BreadcrumbSeparator>\n </template>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__action {\n
|
|
16
|
+
"content": "<script lang=\"ts\" setup>\nimport type { Component } from 'vue';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport {\n Breadcrumb,\n BreadcrumbItem as BreadcrumbItemComponent,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '.';\n\nexport interface BreadcrumbItem {\n label?: string;\n icon?: string | Component;\n url?: string;\n route?: any;\n target?: string;\n active?: boolean;\n}\n\ninterface ActionProps {\n\n 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;\n}\n\nconst props = defineProps<{\n home?: BreadcrumbItem;\n model?: BreadcrumbItem[];\n}>();\n\nfunction getActionProps(item: BreadcrumbItem, isLast: boolean): ActionProps {\n const isActive = item.active || isLast;\n return {\n 'class': `sigma-ui-breadcrumb__action ${isActive ? 'sigma-ui-breadcrumb__action--active' : ''}`,\n 'aria-current': isActive ? 'page' : undefined,\n };\n}\n</script>\n\n<template>\n <Breadcrumb :class=\"$attrs.class\">\n <BreadcrumbList>\n <BreadcrumbItemComponent v-if=\"home\">\n <slot\n name=\"home\"\n :item=\"home\"\n :props=\"{ action: getActionProps(home, false) }\"\n >\n <BreadcrumbLink\n v-if=\"home.route\"\n :to=\"home.route\"\n class=\"sigma-ui-breadcrumb__link\"\n v-bind=\"getActionProps(home, false)\"\n >\n <component\n :is=\"home.icon\"\n v-if=\"home.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span>{{ home.label }}</span>\n </BreadcrumbLink>\n <BreadcrumbLink\n v-else-if=\"home.url\"\n :href=\"home.url\"\n :target=\"home.target\"\n class=\"sigma-ui-breadcrumb__link\"\n v-bind=\"getActionProps(home, false)\"\n >\n <component\n :is=\"home.icon\"\n v-if=\"home.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span v-if=\"home.label\">{{ home.label }}</span>\n </BreadcrumbLink>\n </slot>\n </BreadcrumbItemComponent>\n\n <BreadcrumbSeparator v-if=\"home && model?.length\">\n <slot name=\"separator\">\n <ChevronRightIcon />\n </slot>\n </BreadcrumbSeparator>\n\n <template\n v-for=\"(item, index) in (model || [])\"\n :key=\"index\"\n >\n <BreadcrumbItemComponent>\n <slot\n name=\"item\"\n :item=\"item\"\n :props=\"{ action: getActionProps(item, index === (model?.length || 0) - 1) }\"\n >\n <BreadcrumbLink\n v-if=\"item.route\"\n :to=\"item.route\"\n class=\"sigma-ui-breadcrumb__link\"\n v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n >\n <component\n :is=\"item.icon\"\n v-if=\"item.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span>{{ item.label }}</span>\n </BreadcrumbLink>\n <BreadcrumbLink\n v-else-if=\"item.url\"\n :href=\"item.url\"\n :target=\"item.target\"\n class=\"sigma-ui-breadcrumb__link\"\n v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n >\n <component\n :is=\"item.icon\"\n v-if=\"item.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span>{{ item.label }}</span>\n </BreadcrumbLink>\n <BreadcrumbPage\n v-else\n v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n >\n <div class=\"sigma-ui-breadcrumb__content\">\n <component\n :is=\"item.icon\"\n v-if=\"item.icon\"\n class=\"sigma-ui-breadcrumb__icon\"\n />\n <span>{{ item.label }}</span>\n </div>\n </BreadcrumbPage>\n </slot>\n </BreadcrumbItemComponent>\n\n <BreadcrumbSeparator v-if=\"index < (model?.length || 0) - 1\">\n <slot name=\"separator\">\n <ChevronRightIcon />\n </slot>\n </BreadcrumbSeparator>\n </template>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__action {\n display: flex;\n align-items: center;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n}\n\n.sigma-ui-breadcrumb__action--active {\n color: hsl(var(--foreground));\n font-weight: 500;\n}\n\n.sigma-ui-breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.sigma-ui-breadcrumb__content {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.sigma-ui-breadcrumb__icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "BreadcrumbItem.vue",
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"name": "BreadcrumbLink.vue",
|
|
24
|
-
"content": "<script lang=\"ts\" setup>\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\n\nconst props = withDefaults(defineProps<PrimitiveProps>(), {\n as: 'a',\n});\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n class=\"sigma-ui-breadcrumb__link\"\n :class=\"$attrs.class\"\n >\n <slot />\n </Primitive>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__link {\n transition-property: color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n
|
|
24
|
+
"content": "<script lang=\"ts\" setup>\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\n\nconst props = withDefaults(defineProps<PrimitiveProps>(), {\n as: 'a',\n});\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n class=\"sigma-ui-breadcrumb__link\"\n :class=\"$attrs.class\"\n >\n <slot />\n </Primitive>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__link {\n transition-duration: 150ms;\n transition-property: color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-breadcrumb__link:hover {\n color: hsl(var(--foreground));\n}\n</style>\n"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
"name": "BreadcrumbList.vue",
|
|
28
|
-
"content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n <ol\n class=\"sigma-ui-breadcrumb__list\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </ol>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n
|
|
28
|
+
"content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n <ol\n class=\"sigma-ui-breadcrumb__list\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </ol>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n color: hsl(var(--muted-foreground));\n font-size: 0.875rem;\n gap: 0.375rem;\n overflow-wrap: break-word;\n}\n\n@media (width >= 640px) {\n .sigma-ui-breadcrumb__list {\n gap: 0.625rem;\n }\n}\n</style>\n"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
"name": "BreadcrumbPage.vue",
|
|
32
|
-
"content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n <span\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n class=\"sigma-ui-breadcrumb__page\"\n :class=\"$attrs.class\"\n >\n <slot />\n </span>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__page {\n
|
|
32
|
+
"content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n <span\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n class=\"sigma-ui-breadcrumb__page\"\n :class=\"$attrs.class\"\n >\n <slot />\n </span>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__page {\n color: hsl(var(--foreground));\n font-weight: normal;\n}\n</style>\n"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"name": "BreadcrumbSeparator.vue",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"files": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Button.vue",
|
|
8
|
-
"content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { Loader2Icon } from 'lucide-vue-next';\nimport { type ButtonVariants, buttonVariants } from '.';\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariants['variant'];\n size?: ButtonVariants['size'];\n isLoading?: boolean;\n loadingText?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n as: 'button',\n isLoading: false,\n});\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"[buttonVariants({ variant, size }), $attrs.class]\"\n :disabled=\"isLoading || $attrs.disabled\"\n >\n <Loader2Icon\n v-if=\"isLoading\"\n class=\"sigma-ui-button__loader\"\n />\n <template v-if=\"!isLoading || (isLoading && !loadingText)\">\n <slot />\n </template>\n <template v-else>\n {{ loadingText }}\n </template>\n </Primitive>\n</template>\n\n<style>\n.sigma-ui-button {\n display: inline-flex;\n
|
|
8
|
+
"content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { Loader2Icon } from 'lucide-vue-next';\nimport { type ButtonVariants, buttonVariants } from '.';\n\ninterface Props extends PrimitiveProps {\n variant?: ButtonVariants['variant'];\n size?: ButtonVariants['size'];\n isLoading?: boolean;\n loadingText?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n as: 'button',\n isLoading: false,\n});\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"[buttonVariants({ variant, size }), $attrs.class]\"\n :disabled=\"isLoading || $attrs.disabled\"\n >\n <Loader2Icon\n v-if=\"isLoading\"\n class=\"sigma-ui-button__loader\"\n />\n <template v-if=\"!isLoading || (isLoading && !loadingText)\">\n <slot />\n </template>\n <template v-else>\n {{ loadingText }}\n </template>\n </Primitive>\n</template>\n\n<style>\n.sigma-ui-button {\n display: inline-flex;\n width: fit-content;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius);\n font-size: 0.875rem;\n font-weight: 500;\n outline: none;\n transition: background-color 0.1s ease, colors 0.2s;\n user-select: none;\n white-space: nowrap;\n}\n\n.sigma-ui-button:focus-visible {\n box-shadow:\n 0 0 0 2px hsl(var(--background)),\n 0 0 0 4px hsl(var(--ring));\n outline: none;\n}\n\n.sigma-ui-button:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.sigma-ui-button--default {\n background-color: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-button--default:hover {\n background-color: hsl(var(--primary) / 90%);\n}\n\n.sigma-ui-button--destructive {\n background-color: hsl(var(--destructive));\n color: hsl(var(--destructive-foreground));\n}\n\n.sigma-ui-button--destructive:hover {\n background-color: hsl(var(--destructive) / 90%);\n}\n\n.sigma-ui-button--outline {\n border: 1px solid hsl(var(--input));\n background-color: hsl(var(--background));\n}\n\n.sigma-ui-button--outline:hover {\n background-color: hsl(var(--accent));\n color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-button--secondary {\n background-color: hsl(var(--secondary));\n color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--secondary:hover {\n background-color: hsl(var(--secondary) / 80%);\n}\n\n.sigma-ui-button--ghost:hover {\n background-color: hsl(var(--accent));\n color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-button--link {\n color: hsl(var(--primary));\n text-underline-offset: 4px;\n}\n\n.sigma-ui-button--link:hover {\n text-decoration: underline;\n}\n\n.sigma-ui-button--size-default {\n height: 2.5rem;\n padding: 0.5rem 1rem;\n}\n\n.sigma-ui-button--size-xs {\n height: 1.75rem;\n padding: 0 0.5rem;\n border-radius: 0.25rem;\n}\n\n.sigma-ui-button--size-sm {\n height: 2.25rem;\n padding: 0 0.75rem;\n border-radius: var(--radius);\n}\n\n.sigma-ui-button--size-lg {\n height: 2.75rem;\n padding: 0 2rem;\n border-radius: var(--radius);\n}\n\n.sigma-ui-button--size-icon {\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.sigma-ui-button__loader {\n width: 1rem;\n height: 1rem;\n margin-right: 0.5rem;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n</style>\n"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "index.ts",
|
|
@@ -5,19 +5,19 @@
|
|
|
5
5
|
"files": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Calendar.vue",
|
|
8
|
-
"content": "<script lang=\"ts\" setup>\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui';\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.';\n\nconst props = defineProps<CalendarRootProps>();\nconst emits = defineEmits<CalendarRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <CalendarRoot\n v-slot=\"{ grid, weekDays }\"\n class=\"sigma-ui-calendar\"\n v-bind=\"forwarded\"\n >\n <CalendarHeader>\n <CalendarPrevButton />\n <CalendarHeading />\n <CalendarNextButton />\n </CalendarHeader>\n\n <div class=\"sigma-ui-calendar__grid-container\">\n <CalendarGrid\n v-for=\"month in grid\"\n :key=\"month.value.toString()\"\n >\n <CalendarGridHead>\n <CalendarGridRow>\n <CalendarHeadCell\n v-for=\"day in weekDays\"\n :key=\"day\"\n >\n {{ day }}\n </CalendarHeadCell>\n </CalendarGridRow>\n </CalendarGridHead>\n <CalendarGridBody>\n <CalendarGridRow\n v-for=\"(weekDates, index) in month.rows\"\n :key=\"`weekDate-${index}`\"\n class=\"sigma-ui-calendar__week-row\"\n >\n <CalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <CalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </CalendarCell>\n </CalendarGridRow>\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </CalendarRoot>\n</template>\n\n<style>\n.sigma-ui-calendar {\n padding: 0.75rem;\n}\n\n.sigma-ui-calendar__grid-container {\n display: flex;\n flex-direction: column;\n
|
|
8
|
+
"content": "<script lang=\"ts\" setup>\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui';\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.';\n\nconst props = defineProps<CalendarRootProps>();\nconst emits = defineEmits<CalendarRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <CalendarRoot\n v-slot=\"{ grid, weekDays }\"\n class=\"sigma-ui-calendar\"\n v-bind=\"forwarded\"\n >\n <CalendarHeader>\n <CalendarPrevButton />\n <CalendarHeading />\n <CalendarNextButton />\n </CalendarHeader>\n\n <div class=\"sigma-ui-calendar__grid-container\">\n <CalendarGrid\n v-for=\"month in grid\"\n :key=\"month.value.toString()\"\n >\n <CalendarGridHead>\n <CalendarGridRow>\n <CalendarHeadCell\n v-for=\"day in weekDays\"\n :key=\"day\"\n >\n {{ day }}\n </CalendarHeadCell>\n </CalendarGridRow>\n </CalendarGridHead>\n <CalendarGridBody>\n <CalendarGridRow\n v-for=\"(weekDates, index) in month.rows\"\n :key=\"`weekDate-${index}`\"\n class=\"sigma-ui-calendar__week-row\"\n >\n <CalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <CalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </CalendarCell>\n </CalendarGridRow>\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </CalendarRoot>\n</template>\n\n<style>\n.sigma-ui-calendar {\n padding: 0.75rem;\n}\n\n.sigma-ui-calendar__grid-container {\n display: flex;\n flex-direction: column;\n margin-top: 1rem;\n gap: 1rem;\n}\n\n.sigma-ui-calendar__week-row {\n width: 100%;\n margin-top: 0.5rem;\n}\n\n@media (width >= 640px) {\n .sigma-ui-calendar__grid-container {\n flex-direction: row;\n gap: 1rem;\n }\n}\n</style>\n"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "CalendarCell.vue",
|
|
12
|
-
"content": "<script lang=\"ts\" setup>\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<CalendarCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarCell\n class=\"sigma-ui-calendar-cell\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarCell>\n</template>\n\n<style>\n.sigma-ui-calendar-cell {\n position: relative;\n
|
|
12
|
+
"content": "<script lang=\"ts\" setup>\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<CalendarCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarCell\n class=\"sigma-ui-calendar-cell\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarCell>\n</template>\n\n<style>\n.sigma-ui-calendar-cell {\n position: relative;\n width: 2.25rem;\n height: 2.25rem;\n padding: 0;\n font-size: 0.875rem;\n text-align: center;\n}\n\n.sigma-ui-calendar-cell:focus-within {\n position: relative;\n z-index: 20;\n}\n\n.sigma-ui-calendar-cell:has([data-selected]) {\n border-radius: var(--radius-md);\n background-color: hsl(var(--accent));\n}\n\n.sigma-ui-calendar-cell:has([data-selected][data-outside-month]) {\n background-color: hsl(var(--accent) / 50%);\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "CalendarCellTrigger.vue",
|
|
16
|
-
"content": "<script lang=\"ts\" setup>\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<CalendarCellTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarCellTrigger\n class=\"sigma-ui-calendar-cell-trigger\"\n :class=\"[buttonVariants({ variant: 'ghost' })]\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarCellTrigger>\n</template>\n\n<style>\n.sigma-ui-calendar-cell-trigger {\n
|
|
16
|
+
"content": "<script lang=\"ts\" setup>\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<CalendarCellTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarCellTrigger\n class=\"sigma-ui-calendar-cell-trigger\"\n :class=\"[buttonVariants({ variant: 'ghost' })]\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarCellTrigger>\n</template>\n\n<style>\n.sigma-ui-calendar-cell-trigger {\n width: 2.25rem;\n height: 2.25rem;\n padding: 0;\n border-radius: var(--radius-sm);\n background-color: transparent;\n font-weight: normal;\n transition-duration: 150ms;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-calendar-cell-trigger:hover {\n background-color: hsl(var(--muted));\n color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-calendar-cell-trigger[data-today]:not([data-selected]) {\n background-color: hsl(var(--accent));\n color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-calendar-cell-trigger[data-selected] {\n background-color: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n opacity: 1;\n}\n\n.sigma-ui-calendar-cell-trigger[data-selected]:hover,\n.sigma-ui-calendar-cell-trigger[data-selected]:focus {\n background-color: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-calendar-cell-trigger[data-disabled] {\n color: hsl(var(--muted-foreground));\n opacity: 0.5;\n}\n\n.sigma-ui-calendar-cell-trigger[data-unavailable] {\n color: hsl(var(--destructive-foreground));\n text-decoration: line-through;\n}\n\n.sigma-ui-calendar-cell-trigger[data-outside-month] {\n color: hsl(var(--muted-foreground));\n opacity: 0.5;\n pointer-events: none;\n}\n\n.sigma-ui-calendar-cell-trigger[data-outside-month][data-selected] {\n background-color: hsl(var(--accent) / 50%);\n color: hsl(var(--muted-foreground));\n opacity: 0.3;\n}\n</style>\n"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "CalendarGrid.vue",
|
|
20
|
-
"content": "<script lang=\"ts\" setup>\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<CalendarGridProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarGrid\n class=\"sigma-ui-calendar-grid\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarGrid>\n</template>\n\n<style>\n.sigma-ui-calendar-grid {\n width: 100%;\n
|
|
20
|
+
"content": "<script lang=\"ts\" setup>\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<CalendarGridProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarGrid\n class=\"sigma-ui-calendar-grid\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarGrid>\n</template>\n\n<style>\n.sigma-ui-calendar-grid {\n display: flex;\n width: 100%;\n flex-direction: column;\n border-collapse: collapse;\n gap: 0.25rem;\n}\n</style>\n"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"name": "CalendarGridBody.vue",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"name": "CalendarHeadCell.vue",
|
|
36
|
-
"content": "<script lang=\"ts\" setup>\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<CalendarHeadCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarHeadCell\n class=\"sigma-ui-calendar-head-cell\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarHeadCell>\n</template>\n\n<style>\n.sigma-ui-calendar-head-cell {\n width: 2.25rem;\n border-radius: var(--radius-md);\n font-size: 0.8rem;\n font-weight: normal;\n
|
|
36
|
+
"content": "<script lang=\"ts\" setup>\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<CalendarHeadCellProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarHeadCell\n class=\"sigma-ui-calendar-head-cell\"\n v-bind=\"forwardedProps\"\n >\n <slot />\n </CalendarHeadCell>\n</template>\n\n<style>\n.sigma-ui-calendar-head-cell {\n width: 2.25rem;\n border-radius: var(--radius-md);\n color: hsl(var(--muted-foreground));\n font-size: 0.8rem;\n font-weight: normal;\n}\n</style>\n"
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"name": "CalendarHeader.vue",
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"name": "CalendarNextButton.vue",
|
|
48
|
-
"content": "<script lang=\"ts\" setup>\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<CalendarNextProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarNext\n class=\"sigma-ui-calendar-next\"\n :class=\"[buttonVariants({ variant: 'outline' })]\"\n v-bind=\"forwardedProps\"\n >\n <slot>\n <ChevronRightIcon class=\"sigma-ui-calendar-next__icon\" />\n </slot>\n </CalendarNext>\n</template>\n\n<style>\n.sigma-ui-calendar-next {\n
|
|
48
|
+
"content": "<script lang=\"ts\" setup>\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<CalendarNextProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarNext\n class=\"sigma-ui-calendar-next\"\n :class=\"[buttonVariants({ variant: 'outline' })]\"\n v-bind=\"forwardedProps\"\n >\n <slot>\n <ChevronRightIcon class=\"sigma-ui-calendar-next__icon\" />\n </slot>\n </CalendarNext>\n</template>\n\n<style>\n.sigma-ui-calendar-next {\n width: 1.75rem;\n height: 1.75rem;\n padding: 0;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-sm);\n background-color: transparent;\n opacity: 0.5;\n transition-duration: 150ms;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-calendar-next:hover {\n background-color: hsl(var(--accent));\n color: hsl(var(--accent-foreground));\n opacity: 1;\n}\n\n.sigma-ui-calendar-next__icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n"
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"name": "CalendarPrevButton.vue",
|
|
52
|
-
"content": "<script lang=\"ts\" setup>\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui';\nimport { ChevronLeftIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<CalendarPrevProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarPrev\n class=\"sigma-ui-calendar-prev\"\n :class=\"[buttonVariants({ variant: 'outline' })]\"\n v-bind=\"forwardedProps\"\n >\n <slot>\n <ChevronLeftIcon class=\"sigma-ui-calendar-prev__icon\" />\n </slot>\n </CalendarPrev>\n</template>\n\n<style>\n.sigma-ui-calendar-prev {\n
|
|
52
|
+
"content": "<script lang=\"ts\" setup>\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui';\nimport { ChevronLeftIcon } from 'lucide-vue-next';\nimport { buttonVariants } from '@ui/registry/css/ui/button';\n\nconst props = defineProps<CalendarPrevProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n <CalendarPrev\n class=\"sigma-ui-calendar-prev\"\n :class=\"[buttonVariants({ variant: 'outline' })]\"\n v-bind=\"forwardedProps\"\n >\n <slot>\n <ChevronLeftIcon class=\"sigma-ui-calendar-prev__icon\" />\n </slot>\n </CalendarPrev>\n</template>\n\n<style>\n.sigma-ui-calendar-prev {\n width: 1.75rem;\n height: 1.75rem;\n padding: 0;\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-sm);\n background-color: transparent;\n opacity: 0.5;\n transition-duration: 150ms;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-calendar-prev:hover {\n background-color: hsl(var(--accent));\n color: hsl(var(--accent-foreground));\n opacity: 1;\n}\n\n.sigma-ui-calendar-prev__icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n"
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
"name": "index.ts",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"files": [
|
|
8
8
|
{
|
|
9
9
|
"name": "CardLightbox.vue",
|
|
10
|
-
"content": "<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue';\nimport { AnimatePresence, motion } from 'motion-v';\nimport type { Item } from './types';\nimport { XIcon } from 'lucide-vue-next';\n\ntype Props = {\n items: Item[];\n};\n\nconst props = defineProps<Props>();\n\nconst openId = ref<string | null>(null);\n\nonMounted(() => {\n document.addEventListener('keydown', handleEscKeydown);\n});\n\nonUnmounted(() => {\n document.removeEventListener('keydown', handleEscKeydown);\n});\n\nfunction getTheme(id: string) {\n return props.items.find(item => item.id === id)?.theme;\n}\n\nfunction open(id: string) {\n openId.value = id;\n}\n\nfunction close() {\n openId.value = null;\n}\n\nfunction handleEscKeydown(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n close();\n }\n}\n</script>\n\n<template>\n <div class=\"card-lightbox\">\n <ul class=\"card-lightbox__grid\">\n <motion.button\n v-for=\"card in props.items\"\n :key=\"card.id\"\n :data-open=\"openId === card.id\"\n :class=\"[\n 'card-lightbox__card',\n {\n 'theme-dark': getTheme(card.id) === 'dark',\n 'theme-light': getTheme(card.id) === 'light'\n }\n ]\"\n @click=\"() => open(card.id)\"\n >\n <motion.div\n class=\"card-lightbox__card-content animate-fade-in\"\n :layout-id=\"`card-container-${card.id}`\"\n >\n <motion.div\n class=\"card-lightbox__card-image-container\"\n :layout-id=\"`card-image-container-${card.id}`\"\n >\n <motion.img\n class=\"card-lightbox__card-image\"\n :src=\"card.image\"\n alt=\"\"\n />\n <div class=\"card-lightbox__image-overlay\" />\n </motion.div>\n <motion.div\n class=\"card-lightbox__card-title-container\"\n :layout-id=\"`title-container-${card.id}`\"\n layout=\"position\"\n >\n <span class=\"card-lightbox__card-category\">{{ card.category }}</span>\n <h2 class=\"card-lightbox__card-title\">\n {{ card.title }}\n </h2>\n </motion.div>\n </motion.div>\n </motion.button>\n </ul>\n <AnimatePresence>\n <motion.div\n v-if=\"openId\"\n :initial=\"{ opacity: 0 }\"\n :animate=\"{ opacity: 1 }\"\n :exit=\"{ opacity: 0 }\"\n :transition=\"{ duration: 0.2 }\"\n style=\"pointer-events: auto\"\n class=\"card-lightbox__expanded-overlay\"\n @click=\"close\"\n />\n </AnimatePresence>\n <AnimatePresence>\n <div\n v-if=\"openId\"\n :class=\"[\n 'card-lightbox__expanded-container',\n {\n 'theme-dark': getTheme(openId) === 'dark',\n 'theme-light': getTheme(openId) === 'light'\n }\n ]\"\n >\n <motion.div\n class=\"card-lightbox__expanded-content\"\n :layout-id=\"`card-container-${openId}`\"\n >\n <motion.div\n class=\"card-lightbox__expanded-image-container\"\n :layout-id=\"`card-image-container-${openId}`\"\n >\n <motion.img\n class=\"card-lightbox__expanded-image\"\n :src=\"props.items.find(item => item.id === openId)?.image\"\n alt=\"\"\n :layout-id=\"`card-image-${openId}`\"\n :initial=\"{ opacity: 0, filter: 'blur(12px)' }\"\n :animate=\"{ opacity: 1, filter: 'blur(0px)' }\"\n :exit=\"{ opacity: 0, filter: 'blur(12px)' }\"\n :transition=\"{ duration: 0.5 }\"\n />\n <div class=\"card-lightbox__image-overlay\" />\n <motion.div\n class=\"card-lightbox__expanded-title-container\"\n :layout-id=\"`title-container-${openId}`\"\n layout=\"position\"\n >\n <span class=\"card-lightbox__expanded-category\">{{ props.items.find(item => item.id === openId)?.category }}</span>\n <h2 class=\"card-lightbox__expanded-title\">\n {{ props.items.find(item => item.id === openId)?.title }}\n </h2>\n </motion.div>\n <motion.div\n class=\"card-lightbox__expanded-close-button\"\n @click=\"close\"\n >\n <XIcon />\n </motion.div>\n </motion.div>\n <motion.div class=\"card-lightbox__expanded-body\">\n <div v-html=\"props.items.find(item => item.id === openId)?.content\" />\n </motion.div>\n </motion.div>\n </div>\n </AnimatePresence>\n </div>\n</template>\n\n<style scoped>\n.card-lightbox {\n margin: 0 auto;\n width: 100%;\n max-width: 990px;\n display: flex;\n flex-direction: column;\n container-type: inline-size;\n}\n\n.card-lightbox,\n.card-lightbox * {\n box-sizing: border-box;\n}\n\n.card-lightbox__grid {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n gap: 20px;\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n.card-lightbox__card {\n position: relative;\n padding: 0px;\n height: 420px;\n grid-column: span 4;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.card-lightbox__card:focus-visible {\n border-radius: 20px;\n box-shadow:\n 0 0 0 2px hsl(var(--background)),\n 0 0 0 4px hsl(var(--ring));\n outline: none;\n}\n\n.card-lightbox__card:nth-child(4n + 1),\n.card-lightbox__card:nth-child(4n + 4) {\n grid-column: span 6;\n}\n\n.theme-light .card-lightbox__image-overlay {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(160deg, rgba(0, 0, 0, 0.95) -8%, rgba(0, 0, 0, 0) 30%);\n z-index: 1;\n pointer-events: none;\n}\n\n.theme-dark .card-lightbox__image-overlay {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) -8%, rgba(255, 255, 255, 0) 30%);\n z-index: 1;\n pointer-events: none;\n}\n\n.card-lightbox__expanded-container {\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: flex;\n flex-direction: column;\n top: 0;\n left: 0;\n right: 0;\n position: fixed;\n z-index: 51;\n overflow: hidden;\n padding: 40px 0;\n justify-content: center;\n align-items: center;\n}\n\n.card-lightbox__card-content,\n.card-lightbox__expanded-content {\n pointer-events: auto;\n user-select: none;\n position: relative;\n border-radius: 20px;\n background: hsl(var(--card));\n overflow: hidden;\n width: 100%;\n height: 100%;\n margin: 0 auto;\n}\n\n.card-lightbox__expanded-content {\n width: unset;\n max-width: 700px;\n overflow: hidden;\n pointer-events: auto;\n overflow-y: auto;\n height: 70dvh;\n}\n\n.card-lightbox__card-image-container,\n.card-lightbox__expanded-image-container {\n overflow: hidden;\n height: 420px;\n position: relative;\n width: 100%;\n}\n\n.card-lightbox__card-image,\n.card-lightbox__expanded-image {\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n transform: none;\n}\n\n.card-lightbox__card-title-container {\n z-index: 2;\n position: absolute;\n top: 0px;\n left: 0px;\n max-width: 300px;\n padding: 20px;\n text-align: left;\n}\n\n.card-lightbox__expanded-title-container {\n z-index: 2;\n position: absolute;\n top: 0;\n left: 0;\n padding: 20px;\n}\n\n.card-lightbox__expanded-close-button {\n z-index: 2;\n position: absolute;\n top: 0;\n right: 0;\n padding: 20px;\n cursor: pointer;\n}\n\n.card-lightbox__card-title,\n.card-lightbox__expanded-title {\n color: hsl(0 0% 100%);\n margin: 8px 0;\n font-size: 20px;\n font-weight: 600;\n}\n\n.card-lightbox__card-category,\n.card-lightbox__expanded-category {\n color: hsl(0 0% 100%);\n background: hsl(0 0% 100% / 0.12);\n backdrop-filter: blur(8px);\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 12px;\n text-transform: uppercase;\n}\n\n.theme-dark .card-lightbox__card-category,\n.theme-dark .card-lightbox__expanded-category {\n background: hsl(240 10% 3.9% / 0.2);\n}\n\n.card-lightbox__expanded-overlay {\n inset: 0;\n z-index: 50;\n position: fixed;\n backdrop-filter: blur(12px);\n background: rgba(0, 0, 0, 0.2);\n will-change: opacity;\n}\n\n.card-lightbox__expanded-body {\n padding: 35px;\n max-width: 700px;\n width: 100vw;\n}\n\n.theme-dark .card-lightbox__card-category,\n.theme-dark .card-lightbox__card-title,\n.theme-dark .card-lightbox__expanded-title-container,\n.theme-dark .card-lightbox__expanded-title,\n.theme-dark .card-lightbox__expanded-category {\n color: hsl(240 10% 3.9% / 0.9);\n}\n\n.theme-dark svg {\n stroke: hsl(240 10% 3.9% / 0.9);\n}\n\n.theme-light svg {\n stroke: hsl(0 0% 100%);\n}\n\n.card-lightbox__expanded-body {\n color: hsl(var(--primary));\n}\n\n@media only screen and (max-width: 990px) {\n .card-lightbox__expanded-container {\n padding: 0;\n }\n\n .card-lightbox__expanded-content {\n overflow: hidden;\n pointer-events: auto;\n overflow-y: auto;\n width: 100vw;\n max-width: 100vw;\n height: 100dvh;\n border-radius: 0;\n }\n\n .card-lightbox__card-image-container,\n .card-lightbox__expanded-image-container {\n height: 280px;\n }\n}\n\n@container (max-width: 600px) {\n #sandbox {\n align-items: stretch;\n }\n\n .card-lightbox {\n padding: 60px 20px;\n padding-left: 10px;\n padding-right: 10px;\n }\n\n .card-lightbox__grid {\n gap: 10px;\n grid-template-columns: 1fr;\n }\n\n .card-lightbox__card {\n grid-column: auto / auto;\n height: 280px;\n width: 100%;\n }\n\n .card-lightbox__card:nth-child(4n + 1),\n .card-lightbox__card:nth-child(4n + 4) {\n grid-column: auto / auto;\n }\n\n .card-lightbox__card-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n position: absolute;\n inset: 0;\n }\n}\n</style>\n"
|
|
10
|
+
"content": "<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue';\nimport { AnimatePresence, motion } from 'motion-v';\nimport type { Item } from './types';\nimport { XIcon } from 'lucide-vue-next';\n\ntype Props = {\n items: Item[];\n};\n\nconst props = defineProps<Props>();\n\nconst openId = ref<string | null>(null);\n\nonMounted(() => {\n document.addEventListener('keydown', handleEscKeydown);\n});\n\nonUnmounted(() => {\n document.removeEventListener('keydown', handleEscKeydown);\n});\n\nfunction getTheme(id: string) {\n return props.items.find(item => item.id === id)?.theme;\n}\n\nfunction open(id: string) {\n openId.value = id;\n}\n\nfunction close() {\n openId.value = null;\n}\n\nfunction handleEscKeydown(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n close();\n }\n}\n</script>\n\n<template>\n <div class=\"card-lightbox\">\n <ul class=\"card-lightbox__grid\">\n <motion.button\n v-for=\"card in props.items\"\n :key=\"card.id\"\n :data-open=\"openId === card.id\"\n :class=\"[\n 'card-lightbox__card',\n {\n 'theme-dark': getTheme(card.id) === 'dark',\n 'theme-light': getTheme(card.id) === 'light'\n }\n ]\"\n @click=\"() => open(card.id)\"\n >\n <motion.div\n class=\"card-lightbox__card-content animate-fade-in\"\n :layout-id=\"`card-container-${card.id}`\"\n >\n <motion.div\n class=\"card-lightbox__card-image-container\"\n :layout-id=\"`card-image-container-${card.id}`\"\n >\n <motion.img\n class=\"card-lightbox__card-image\"\n :src=\"card.image\"\n alt=\"\"\n />\n <div class=\"card-lightbox__image-overlay\" />\n </motion.div>\n <motion.div\n class=\"card-lightbox__card-title-container\"\n :layout-id=\"`title-container-${card.id}`\"\n layout=\"position\"\n >\n <span class=\"card-lightbox__card-category\">{{ card.category }}</span>\n <h2 class=\"card-lightbox__card-title\">\n {{ card.title }}\n </h2>\n </motion.div>\n </motion.div>\n </motion.button>\n </ul>\n <AnimatePresence>\n <motion.div\n v-if=\"openId\"\n :initial=\"{ opacity: 0 }\"\n :animate=\"{ opacity: 1 }\"\n :exit=\"{ opacity: 0 }\"\n :transition=\"{ duration: 0.2 }\"\n style=\"pointer-events: auto\"\n class=\"card-lightbox__expanded-overlay\"\n @click=\"close\"\n />\n </AnimatePresence>\n <AnimatePresence>\n <div\n v-if=\"openId\"\n :class=\"[\n 'card-lightbox__expanded-container',\n {\n 'theme-dark': getTheme(openId) === 'dark',\n 'theme-light': getTheme(openId) === 'light'\n }\n ]\"\n >\n <motion.div\n class=\"card-lightbox__expanded-content\"\n :layout-id=\"`card-container-${openId}`\"\n >\n <motion.div\n class=\"card-lightbox__expanded-image-container\"\n :layout-id=\"`card-image-container-${openId}`\"\n >\n <motion.img\n class=\"card-lightbox__expanded-image\"\n :src=\"props.items.find(item => item.id === openId)?.image\"\n alt=\"\"\n :layout-id=\"`card-image-${openId}`\"\n :initial=\"{ opacity: 0, filter: 'blur(12px)' }\"\n :animate=\"{ opacity: 1, filter: 'blur(0px)' }\"\n :exit=\"{ opacity: 0, filter: 'blur(12px)' }\"\n :transition=\"{ duration: 0.5 }\"\n />\n <div class=\"card-lightbox__image-overlay\" />\n <motion.div\n class=\"card-lightbox__expanded-title-container\"\n :layout-id=\"`title-container-${openId}`\"\n layout=\"position\"\n >\n <span class=\"card-lightbox__expanded-category\">{{ props.items.find(item => item.id === openId)?.category }}</span>\n <h2 class=\"card-lightbox__expanded-title\">\n {{ props.items.find(item => item.id === openId)?.title }}\n </h2>\n </motion.div>\n <motion.div\n class=\"card-lightbox__expanded-close-button\"\n @click=\"close\"\n >\n <XIcon />\n </motion.div>\n </motion.div>\n <motion.div class=\"card-lightbox__expanded-body\">\n <div v-html=\"props.items.find(item => item.id === openId)?.content\" />\n </motion.div>\n </motion.div>\n </div>\n </AnimatePresence>\n </div>\n</template>\n\n<style scoped>\n.card-lightbox {\n display: flex;\n width: 100%;\n max-width: 990px;\n flex-direction: column;\n margin: 0 auto;\n container-type: inline-size;\n}\n\n.card-lightbox,\n.card-lightbox * {\n box-sizing: border-box;\n}\n\n.card-lightbox__grid {\n display: grid;\n padding: 0;\n margin: 0;\n gap: 20px;\n grid-template-columns: repeat(10, 1fr);\n list-style: none;\n}\n\n.card-lightbox__card {\n position: relative;\n overflow: hidden;\n height: 420px;\n box-sizing: border-box;\n padding: 0;\n grid-column: span 4;\n}\n\n.card-lightbox__card:focus-visible {\n border-radius: 20px;\n box-shadow:\n 0 0 0 2px hsl(var(--background)),\n 0 0 0 4px hsl(var(--ring));\n outline: none;\n}\n\n.card-lightbox__card:nth-child(4n + 1),\n.card-lightbox__card:nth-child(4n + 4) {\n grid-column: span 6;\n}\n\n.theme-light .card-lightbox__image-overlay {\n position: absolute;\n z-index: 1;\n background: linear-gradient(160deg, rgb(0 0 0 / 95%) -8%, rgb(0 0 0 / 0%) 30%);\n content: '';\n inset: 0;\n pointer-events: none;\n}\n\n.theme-dark .card-lightbox__image-overlay {\n position: absolute;\n z-index: 1;\n background: linear-gradient(160deg, rgb(255 255 255 / 95%) -8%, rgb(255 255 255 / 0%) 30%);\n content: '';\n inset: 0;\n pointer-events: none;\n}\n\n.card-lightbox__expanded-container {\n position: fixed;\n z-index: 51;\n top: 0;\n right: 0;\n left: 0;\n display: flex;\n overflow: hidden;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n pointer-events: none;\n}\n\n.card-lightbox__card-content,\n.card-lightbox__expanded-content {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n border-radius: 20px;\n margin: 0 auto;\n background: hsl(var(--card));\n pointer-events: auto;\n user-select: none;\n}\n\n.card-lightbox__expanded-content {\n overflow: hidden;\n width: unset;\n max-width: 700px;\n height: 70dvh;\n overflow-y: auto;\n pointer-events: auto;\n}\n\n.card-lightbox__card-image-container,\n.card-lightbox__expanded-image-container {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 420px;\n}\n\n.card-lightbox__card-image,\n.card-lightbox__expanded-image {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n transform: none;\n}\n\n.card-lightbox__card-title-container {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n max-width: 300px;\n padding: 20px;\n text-align: left;\n}\n\n.card-lightbox__expanded-title-container {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n padding: 20px;\n}\n\n.card-lightbox__expanded-close-button {\n position: absolute;\n z-index: 2;\n top: 0;\n right: 0;\n padding: 20px;\n cursor: pointer;\n}\n\n.card-lightbox__card-title,\n.card-lightbox__expanded-title {\n margin: 8px 0;\n color: hsl(0deg 0% 100%);\n font-size: 20px;\n font-weight: 600;\n}\n\n.card-lightbox__card-category,\n.card-lightbox__expanded-category {\n padding: 4px 8px;\n border-radius: 12px;\n backdrop-filter: blur(8px);\n background: hsl(0deg 0% 100% / 12%);\n color: hsl(0deg 0% 100%);\n font-size: 12px;\n text-transform: uppercase;\n}\n\n.theme-dark .card-lightbox__card-category,\n.theme-dark .card-lightbox__expanded-category {\n background: hsl(240deg 10% 3.9% / 20%);\n}\n\n.card-lightbox__expanded-overlay {\n position: fixed;\n z-index: 50;\n backdrop-filter: blur(12px);\n background: rgb(0 0 0 / 20%);\n inset: 0;\n will-change: opacity;\n}\n\n.card-lightbox__expanded-body {\n width: 100vw;\n max-width: 700px;\n padding: 35px;\n color: hsl(var(--primary));\n}\n\n.theme-dark .card-lightbox__card-category,\n.theme-dark .card-lightbox__card-title,\n.theme-dark .card-lightbox__expanded-title-container,\n.theme-dark .card-lightbox__expanded-title,\n.theme-dark .card-lightbox__expanded-category {\n color: hsl(240deg 10% 3.9% / 90%);\n}\n\n.theme-dark svg {\n stroke: hsl(240deg 10% 3.9% / 90%);\n}\n\n.theme-light svg {\n stroke: hsl(0deg 0% 100%);\n}\n\n@media only screen and (width <= 990px) {\n .card-lightbox__expanded-container {\n padding: 0;\n }\n\n .card-lightbox__expanded-content {\n overflow: hidden;\n width: 100vw;\n max-width: 100vw;\n height: 100dvh;\n border-radius: 0;\n overflow-y: auto;\n pointer-events: auto;\n }\n\n .card-lightbox__card-image-container,\n .card-lightbox__expanded-image-container {\n height: 280px;\n }\n}\n\n@container (max-width: 600px) {\n #sandbox {\n align-items: stretch;\n }\n\n .card-lightbox {\n padding: 60px 20px;\n padding-right: 10px;\n padding-left: 10px;\n }\n\n .card-lightbox__grid {\n gap: 10px;\n grid-template-columns: 1fr;\n }\n\n .card-lightbox__card {\n width: 100%;\n height: 280px;\n grid-column: auto / auto;\n }\n\n .card-lightbox__card:nth-child(4n + 1),\n .card-lightbox__card:nth-child(4n + 4) {\n grid-column: auto / auto;\n }\n\n .card-lightbox__card-image {\n position: absolute;\n width: 100%;\n height: 100%;\n inset: 0;\n object-fit: cover;\n }\n}\n</style>\n"
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
13
|
"name": "index.ts",
|
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
"files": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Card.vue",
|
|
8
|
-
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <div\n class=\"sigma-ui-card\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-card {\n border
|
|
8
|
+
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <div\n class=\"sigma-ui-card\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-card {\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius);\n background-color: hsl(var(--card));\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);\n color: hsl(var(--card-foreground));\n}\n</style>\n"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "CardContent.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <div\n class=\"sigma-ui-card__content\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-card__content {\n padding: 0 1.5rem 1.5rem
|
|
12
|
+
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <div\n class=\"sigma-ui-card__content\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-card__content {\n padding: 0 1.5rem 1.5rem;\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "CardDescription.vue",
|
|
@@ -17,15 +17,15 @@
|
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "CardFooter.vue",
|
|
20
|
-
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <div\n class=\"sigma-ui-card__footer\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-card__footer {\n display: flex;\n
|
|
20
|
+
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <div\n class=\"sigma-ui-card__footer\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-card__footer {\n display: flex;\n padding: 0 1.5rem 1.5rem;\n gap: 0.5rem;\n}\n</style>\n"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"name": "CardHeader.vue",
|
|
24
|
-
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <div\n class=\"sigma-ui-card__header\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-card__header {\n display: flex;\n flex-direction: column;\n
|
|
24
|
+
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <div\n class=\"sigma-ui-card__header\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-card__header {\n display: flex;\n flex-direction: column;\n padding: 1.5rem;\n gap: 0.375rem;\n}\n</style>\n"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
"name": "CardTitle.vue",
|
|
28
|
-
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <h3\n class=\"sigma-ui-card__title\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </h3>\n</template>\n\n<style>\n.sigma-ui-card__title {\n font-size: 1.5rem;\n
|
|
28
|
+
"content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n <h3\n class=\"sigma-ui-card__title\"\n :class=\"[$attrs.class]\"\n >\n <slot />\n </h3>\n</template>\n\n<style>\n.sigma-ui-card__title {\n font-size: 1.5rem;\n font-weight: 600;\n letter-spacing: -0.025em;\n line-height: 1;\n}\n</style>\n"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
"name": "index.ts",
|
|
@@ -12,19 +12,19 @@
|
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
"name": "CarouselContent.vue",
|
|
15
|
-
"content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst { carouselRef, orientation } = useCarousel();\n</script>\n\n<template>\n <div\n ref=\"carouselRef\"\n class=\"sigma-ui-carousel-content\"\n >\n <div\n class=\"sigma-ui-carousel-content__wrapper\"\n :class=\"[\n orientation === 'horizontal' ? 'sigma-ui-carousel-content__wrapper--horizontal' : 'sigma-ui-carousel-content__wrapper--vertical',\n $attrs.class ?? '',\n ]\"\n v-bind=\"$attrs\"\n >\n <slot />\n </div>\n </div>\n</template>\n\n<style>\n.sigma-ui-carousel-content {\n overflow: hidden;\n}\n\n.sigma-ui-carousel-content__wrapper {\n display: flex;\n}\n\n.sigma-ui-carousel-content__wrapper--horizontal {\n margin-left: -1rem;\n}\n\n.sigma-ui-carousel-content__wrapper--vertical {\n
|
|
15
|
+
"content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst { carouselRef, orientation } = useCarousel();\n</script>\n\n<template>\n <div\n ref=\"carouselRef\"\n class=\"sigma-ui-carousel-content\"\n >\n <div\n class=\"sigma-ui-carousel-content__wrapper\"\n :class=\"[\n orientation === 'horizontal' ? 'sigma-ui-carousel-content__wrapper--horizontal' : 'sigma-ui-carousel-content__wrapper--vertical',\n $attrs.class ?? '',\n ]\"\n v-bind=\"$attrs\"\n >\n <slot />\n </div>\n </div>\n</template>\n\n<style>\n.sigma-ui-carousel-content {\n overflow: hidden;\n}\n\n.sigma-ui-carousel-content__wrapper {\n display: flex;\n}\n\n.sigma-ui-carousel-content__wrapper--horizontal {\n margin-left: -1rem;\n}\n\n.sigma-ui-carousel-content__wrapper--vertical {\n flex-direction: column;\n margin-top: -1rem;\n}\n</style>\n"
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
18
|
"name": "CarouselItem.vue",
|
|
19
|
-
"content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel';\n\nconst { orientation } = useCarousel();\n</script>\n\n<template>\n <div\n class=\"sigma-ui-carousel-item\"\n :class=\"[\n orientation === 'horizontal' ? 'sigma-ui-carousel-item--horizontal' : 'sigma-ui-carousel-item--vertical',\n $attrs.class ?? '',\n ]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-carousel-item {\n min-width: 0;\n flex-
|
|
19
|
+
"content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel';\n\nconst { orientation } = useCarousel();\n</script>\n\n<template>\n <div\n class=\"sigma-ui-carousel-item\"\n :class=\"[\n orientation === 'horizontal' ? 'sigma-ui-carousel-item--horizontal' : 'sigma-ui-carousel-item--vertical',\n $attrs.class ?? '',\n ]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n >\n <slot />\n </div>\n</template>\n\n<style>\n.sigma-ui-carousel-item {\n min-width: 0;\n flex-basis: 100%;\n flex-shrink: 0;\n}\n\n.sigma-ui-carousel-item--horizontal {\n padding-left: 1rem;\n}\n\n.sigma-ui-carousel-item--vertical {\n padding-top: 1rem;\n}\n</style>\n"
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
22
|
"name": "CarouselNext.vue",
|
|
23
|
-
"content": "<script setup lang=\"ts\">\nimport { ArrowRightIcon } from 'lucide-vue-next';\nimport { useCarousel } from './useCarousel';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel();\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollNext\"\n class=\"sigma-ui-carousel-next\"\n :class=\"[\n orientation === 'horizontal' ? 'sigma-ui-carousel-next--horizontal' : 'sigma-ui-carousel-next--vertical',\n $attrs.class ?? '',\n ]\"\n variant=\"outline\"\n @click=\"scrollNext\"\n >\n <slot>\n <ArrowRightIcon class=\"sigma-ui-carousel-next__icon\" />\n <span class=\"sr-only\">Next Slide</span>\n </slot>\n </Button>\n</template>\n\n<style>\n.sigma-ui-carousel-next {\n
|
|
23
|
+
"content": "<script setup lang=\"ts\">\nimport { ArrowRightIcon } from 'lucide-vue-next';\nimport { useCarousel } from './useCarousel';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel();\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollNext\"\n class=\"sigma-ui-carousel-next\"\n :class=\"[\n orientation === 'horizontal' ? 'sigma-ui-carousel-next--horizontal' : 'sigma-ui-carousel-next--vertical',\n $attrs.class ?? '',\n ]\"\n variant=\"outline\"\n @click=\"scrollNext\"\n >\n <slot>\n <ArrowRightIcon class=\"sigma-ui-carousel-next__icon\" />\n <span class=\"sr-only\">Next Slide</span>\n </slot>\n </Button>\n</template>\n\n<style>\n.sigma-ui-carousel-next {\n position: absolute;\n width: 2rem;\n height: 2rem;\n padding: 0;\n border-radius: var(--radius);\n touch-action: manipulation;\n}\n\n.sigma-ui-carousel-next--horizontal {\n top: 50%;\n right: -3rem;\n transform: translateY(-50%);\n}\n\n.sigma-ui-carousel-next--vertical {\n bottom: -3rem;\n left: 50%;\n transform: translateX(-50%) rotate(90deg);\n}\n\n.sigma-ui-carousel-next__icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n"
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
"name": "CarouselPrevious.vue",
|
|
27
|
-
"content": "<script setup lang=\"ts\">\nimport { ArrowLeftIcon } from 'lucide-vue-next';\nimport { useCarousel } from './useCarousel';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel();\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollPrev\"\n class=\"sigma-ui-carousel-previous\"\n :class=\"[\n orientation === 'horizontal' ? 'sigma-ui-carousel-previous--horizontal' : 'sigma-ui-carousel-previous--vertical',\n $attrs.class ?? '',\n ]\"\n variant=\"outline\"\n @click=\"scrollPrev\"\n >\n <slot>\n <ArrowLeftIcon class=\"sigma-ui-carousel-previous__icon\" />\n <span class=\"sr-only\">Previous Slide</span>\n </slot>\n </Button>\n</template>\n\n<style>\n.sigma-ui-carousel-previous {\n
|
|
27
|
+
"content": "<script setup lang=\"ts\">\nimport { ArrowLeftIcon } from 'lucide-vue-next';\nimport { useCarousel } from './useCarousel';\nimport { Button } from '@ui/registry/css/ui/button';\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel();\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollPrev\"\n class=\"sigma-ui-carousel-previous\"\n :class=\"[\n orientation === 'horizontal' ? 'sigma-ui-carousel-previous--horizontal' : 'sigma-ui-carousel-previous--vertical',\n $attrs.class ?? '',\n ]\"\n variant=\"outline\"\n @click=\"scrollPrev\"\n >\n <slot>\n <ArrowLeftIcon class=\"sigma-ui-carousel-previous__icon\" />\n <span class=\"sr-only\">Previous Slide</span>\n </slot>\n </Button>\n</template>\n\n<style>\n.sigma-ui-carousel-previous {\n position: absolute;\n width: 2rem;\n height: 2rem;\n padding: 0;\n border-radius: var(--radius);\n touch-action: manipulation;\n}\n\n.sigma-ui-carousel-previous--horizontal {\n top: 50%;\n left: -3rem;\n transform: translateY(-50%);\n}\n\n.sigma-ui-carousel-previous--vertical {\n top: -3rem;\n left: 50%;\n transform: translateX(-50%) rotate(90deg);\n}\n\n.sigma-ui-carousel-previous__icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n"
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
"name": "index.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"name": "AreaChart.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Area, Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport { useId } from 'reka-ui';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Type of curve\n */\n curveType?: CurveType;\n /**\n * Controls the visibility of gradient.\n * @default true\n */\n showGradiant?: boolean;\n}>(), {\n curveType: CurveType.MonotoneX,\n filterOpacity: 0.2,\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n showGradiant: true,\n});\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst chartRef = useId();\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i);\n}\n</script>\n\n<template>\n <div\n class=\"sigma-ui-area-chart\"\n :class=\"$attrs.class\"\n >\n <ChartLegend\n v-if=\"showLegend\"\n v-model:items=\"legendItems\"\n @legend-item-click=\"handleLegendItemClick\"\n />\n\n <VisXYContainer\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"{ left: 20, right: 20 }\"\n :data=\"data\"\n >\n <svg\n width=\"0\"\n height=\"0\"\n >\n <defs>\n <linearGradient\n v-for=\"(color, i) in colors\"\n :id=\"`${chartRef}-color-${i}`\"\n :key=\"i\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <template v-if=\"showGradiant\">\n <stop\n offset=\"5%\"\n :stop-color=\"color\"\n stop-opacity=\"0.4\"\n />\n <stop\n offset=\"95%\"\n :stop-color=\"color\"\n stop-opacity=\"0\"\n />\n </template>\n <template v-else>\n <stop\n offset=\"0%\"\n :stop-color=\"color\"\n />\n </template>\n </linearGradient>\n </defs>\n </svg>\n\n <ChartCrosshair\n v-if=\"showTooltip\"\n :colors=\"colors\"\n :items=\"legendItems\"\n :index=\"index\"\n :custom-tooltip=\"customTooltip\"\n />\n\n <template\n v-for=\"(category, i) in categories\"\n :key=\"category\"\n >\n <VisArea\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n color=\"auto\"\n :curve-type=\"curveType\"\n :attributes=\"{\n [Area.selectors.area]: {\n fill: `url(#${chartRef}-color-${i})`,\n },\n }\"\n :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n />\n </template>\n\n <template\n v-for=\"(category, i) in categories\"\n :key=\"category\"\n >\n <VisLine\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n :color=\"colors[i]\"\n :curve-type=\"curveType\"\n :attributes=\"{\n [Line.selectors.line]: {\n opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n },\n }\"\n />\n </template>\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<style>\n.sigma-ui-area-chart {\n width: 100%;\n height: 400px;\n
|
|
12
|
+
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Area, Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport { useId } from 'reka-ui';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Type of curve\n */\n curveType?: CurveType;\n /**\n * Controls the visibility of gradient.\n * @default true\n */\n showGradiant?: boolean;\n}>(), {\n curveType: CurveType.MonotoneX,\n filterOpacity: 0.2,\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n showGradiant: true,\n});\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst chartRef = useId();\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i);\n}\n</script>\n\n<template>\n <div\n class=\"sigma-ui-area-chart\"\n :class=\"$attrs.class\"\n >\n <ChartLegend\n v-if=\"showLegend\"\n v-model:items=\"legendItems\"\n @legend-item-click=\"handleLegendItemClick\"\n />\n\n <VisXYContainer\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"{ left: 20, right: 20 }\"\n :data=\"data\"\n >\n <svg\n width=\"0\"\n height=\"0\"\n >\n <defs>\n <linearGradient\n v-for=\"(color, i) in colors\"\n :id=\"`${chartRef}-color-${i}`\"\n :key=\"i\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <template v-if=\"showGradiant\">\n <stop\n offset=\"5%\"\n :stop-color=\"color\"\n stop-opacity=\"0.4\"\n />\n <stop\n offset=\"95%\"\n :stop-color=\"color\"\n stop-opacity=\"0\"\n />\n </template>\n <template v-else>\n <stop\n offset=\"0%\"\n :stop-color=\"color\"\n />\n </template>\n </linearGradient>\n </defs>\n </svg>\n\n <ChartCrosshair\n v-if=\"showTooltip\"\n :colors=\"colors\"\n :items=\"legendItems\"\n :index=\"index\"\n :custom-tooltip=\"customTooltip\"\n />\n\n <template\n v-for=\"(category, i) in categories\"\n :key=\"category\"\n >\n <VisArea\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n color=\"auto\"\n :curve-type=\"curveType\"\n :attributes=\"{\n [Area.selectors.area]: {\n fill: `url(#${chartRef}-color-${i})`,\n },\n }\"\n :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n />\n </template>\n\n <template\n v-for=\"(category, i) in categories\"\n :key=\"category\"\n >\n <VisLine\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n :color=\"colors[i]\"\n :curve-type=\"curveType\"\n :attributes=\"{\n [Line.selectors.line]: {\n opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n },\n }\"\n />\n </template>\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<style>\n.sigma-ui-area-chart {\n display: flex;\n width: 100%;\n height: 400px;\n flex-direction: column;\n align-items: flex-end;\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "index.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"name": "BarChart.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts';\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue';\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Change the type of the chart\n * @default \"grouped\"\n */\n type?: 'stacked' | 'grouped';\n /**\n * Rounded bar corners\n * @default 0\n */\n roundedCorners?: number;\n}>(), {\n type: 'grouped',\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n filterOpacity: 0.2,\n roundedCorners: 0,\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n});\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i);\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar);\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar);\n</script>\n\n<template>\n <div\n class=\"sigma-ui-bar-chart\"\n :class=\"$attrs.class\"\n >\n <ChartLegend\n v-if=\"showLegend\"\n v-model:items=\"legendItems\"\n @legend-item-click=\"handleLegendItemClick\"\n />\n\n <VisXYContainer\n :data=\"data\"\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"margin\"\n >\n <ChartCrosshair\n v-if=\"showTooltip\"\n :colors=\"colors\"\n :items=\"legendItems\"\n :custom-tooltip=\"customTooltip\"\n :index=\"index\"\n />\n\n <VisBarComponent\n :x=\"(d: Data, i: number) => i\"\n :y=\"categories.map(category => (d: Data) => d[category]) \"\n :color=\"colors\"\n :rounded-corners=\"roundedCorners\"\n :bar-padding=\"0.05\"\n :attributes=\"{\n [selectorsBar]: {\n opacity: (d: Data, i:number) => {\n const pos = i % categories.length\n return legendItems[pos]?.inactive ? filterOpacity : 1\n },\n },\n }\"\n />\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<style>\n.sigma-ui-bar-chart {\n width: 100%;\n height: 400px;\n
|
|
12
|
+
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts';\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue';\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Change the type of the chart\n * @default \"grouped\"\n */\n type?: 'stacked' | 'grouped';\n /**\n * Rounded bar corners\n * @default 0\n */\n roundedCorners?: number;\n}>(), {\n type: 'grouped',\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n filterOpacity: 0.2,\n roundedCorners: 0,\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n});\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i);\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar);\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar);\n</script>\n\n<template>\n <div\n class=\"sigma-ui-bar-chart\"\n :class=\"$attrs.class\"\n >\n <ChartLegend\n v-if=\"showLegend\"\n v-model:items=\"legendItems\"\n @legend-item-click=\"handleLegendItemClick\"\n />\n\n <VisXYContainer\n :data=\"data\"\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"margin\"\n >\n <ChartCrosshair\n v-if=\"showTooltip\"\n :colors=\"colors\"\n :items=\"legendItems\"\n :custom-tooltip=\"customTooltip\"\n :index=\"index\"\n />\n\n <VisBarComponent\n :x=\"(d: Data, i: number) => i\"\n :y=\"categories.map(category => (d: Data) => d[category]) \"\n :color=\"colors\"\n :rounded-corners=\"roundedCorners\"\n :bar-padding=\"0.05\"\n :attributes=\"{\n [selectorsBar]: {\n opacity: (d: Data, i:number) => {\n const pos = i % categories.length\n return legendItems[pos]?.inactive ? filterOpacity : 1\n },\n },\n }\"\n />\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<style>\n.sigma-ui-bar-chart {\n display: flex;\n width: 100%;\n height: 400px;\n flex-direction: column;\n align-items: flex-end;\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "index.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"name": "DonutChart.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue';\nimport { Donut } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartSingleTooltip, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n /**\n * Sets the name of the key containing the quantitative chart values.\n */\n category: KeyOfT;\n /**\n * Change the type of the chart\n * @default \"donut\"\n */\n type?: 'donut' | 'pie';\n /**\n * Function to sort the segment\n */\n sortFunction?: (a: any, b: any) => number | undefined;\n /**\n * Controls the formatting for the label.\n */\n valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n}>(), {\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n sortFunction: () => undefined,\n valueFormatter: (tick: number) => `${tick}`,\n type: 'donut',\n filterOpacity: 0.2,\n showTooltip: true,\n showLegend: true,\n});\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst category = computed(() => props.category as KeyOfT);\nconst index = computed(() => props.index as KeyOfT);\n\nconst isMounted = useMounted();\nconst activeSegmentKey = ref<string>();\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length));\nconst legendItems = computed(() => props.data.map((item, i) => ({\n name: item[props.index],\n color: colors.value[i],\n inactive: false,\n})));\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n return prev + curr[props.category];\n}, 0));\n</script>\n\n<template>\n <div\n class=\"sigma-ui-donut-chart\"\n :class=\"$attrs.class\"\n >\n <VisSingleContainer\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"{ left: 20, right: 20 }\"\n :data=\"data\"\n >\n <ChartSingleTooltip\n :selector=\"Donut.selectors.segment\"\n :index=\"category\"\n :items=\"legendItems\"\n :value-formatter=\"valueFormatter\"\n :custom-tooltip=\"customTooltip\"\n />\n\n <VisDonut\n :value=\"(d: Data) => d[category]\"\n :sort-function=\"sortFunction\"\n :color=\"colors\"\n :arc-width=\"type === 'donut' ? 20 : 0\"\n :show-background=\"false\"\n :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n :events=\"{\n [Donut.selectors.segment]: {\n click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n if (d?.data?.[index] === activeSegmentKey) {\n activeSegmentKey = undefined\n elements.forEach(el => el.style.opacity = '1')\n }\n else {\n activeSegmentKey = d?.data?.[index]\n elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n elements[i].style.opacity = '1'\n }\n },\n },\n }\"\n />\n\n <slot />\n </VisSingleContainer>\n </div>\n</template>\n\n<style>\n.sigma-ui-donut-chart {\n width: 100%;\n height: 12rem;\n
|
|
12
|
+
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue';\nimport { Donut } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartSingleTooltip, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n /**\n * Sets the name of the key containing the quantitative chart values.\n */\n category: KeyOfT;\n /**\n * Change the type of the chart\n * @default \"donut\"\n */\n type?: 'donut' | 'pie';\n /**\n * Function to sort the segment\n */\n sortFunction?: (a: any, b: any) => number | undefined;\n /**\n * Controls the formatting for the label.\n */\n valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n}>(), {\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n sortFunction: () => undefined,\n valueFormatter: (tick: number) => `${tick}`,\n type: 'donut',\n filterOpacity: 0.2,\n showTooltip: true,\n showLegend: true,\n});\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst category = computed(() => props.category as KeyOfT);\nconst index = computed(() => props.index as KeyOfT);\n\nconst isMounted = useMounted();\nconst activeSegmentKey = ref<string>();\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length));\nconst legendItems = computed(() => props.data.map((item, i) => ({\n name: item[props.index],\n color: colors.value[i],\n inactive: false,\n})));\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n return prev + curr[props.category];\n}, 0));\n</script>\n\n<template>\n <div\n class=\"sigma-ui-donut-chart\"\n :class=\"$attrs.class\"\n >\n <VisSingleContainer\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"{ left: 20, right: 20 }\"\n :data=\"data\"\n >\n <ChartSingleTooltip\n :selector=\"Donut.selectors.segment\"\n :index=\"category\"\n :items=\"legendItems\"\n :value-formatter=\"valueFormatter\"\n :custom-tooltip=\"customTooltip\"\n />\n\n <VisDonut\n :value=\"(d: Data) => d[category]\"\n :sort-function=\"sortFunction\"\n :color=\"colors\"\n :arc-width=\"type === 'donut' ? 20 : 0\"\n :show-background=\"false\"\n :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n :events=\"{\n [Donut.selectors.segment]: {\n click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n if (d?.data?.[index] === activeSegmentKey) {\n activeSegmentKey = undefined\n elements.forEach(el => el.style.opacity = '1')\n }\n else {\n activeSegmentKey = d?.data?.[index]\n elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n elements[i].style.opacity = '1'\n }\n },\n },\n }\"\n />\n\n <slot />\n </VisSingleContainer>\n </div>\n</template>\n\n<style>\n.sigma-ui-donut-chart {\n display: flex;\n width: 100%;\n height: 12rem;\n flex-direction: column;\n align-items: flex-end;\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "index.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"name": "LineChart.vue",
|
|
12
|
-
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Type of curve\n */\n curveType?: CurveType;\n}>(), {\n curveType: CurveType.MonotoneX,\n filterOpacity: 0.2,\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n});\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i);\n}\n</script>\n\n<template>\n <div\n class=\"sigma-ui-line-chart\"\n :class=\"$attrs.class\"\n >\n <ChartLegend\n v-if=\"showLegend\"\n v-model:items=\"legendItems\"\n @legend-item-click=\"handleLegendItemClick\"\n />\n\n <VisXYContainer\n :margin=\"{ left: 20, right: 20 }\"\n :data=\"data\"\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n >\n <ChartCrosshair\n v-if=\"showTooltip\"\n :colors=\"colors\"\n :items=\"legendItems\"\n :index=\"index\"\n :custom-tooltip=\"customTooltip\"\n />\n\n <template\n v-for=\"(category, i) in categories\"\n :key=\"category\"\n >\n <VisLine\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n :curve-type=\"curveType\"\n :color=\"colors[i]\"\n :attributes=\"{\n [Line.selectors.line]: {\n opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n },\n }\"\n />\n </template>\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<style>\n.sigma-ui-line-chart {\n width: 100%;\n height: 400px;\n
|
|
12
|
+
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Type of curve\n */\n curveType?: CurveType;\n}>(), {\n curveType: CurveType.MonotoneX,\n filterOpacity: 0.2,\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n});\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n}>();\n\ntype KeyOfT = Extract<keyof T, string>;\ntype Data = typeof props.data[number];\n\nconst index = computed(() => props.index as KeyOfT);\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length));\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})));\n\nconst isMounted = useMounted();\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i);\n}\n</script>\n\n<template>\n <div\n class=\"sigma-ui-line-chart\"\n :class=\"$attrs.class\"\n >\n <ChartLegend\n v-if=\"showLegend\"\n v-model:items=\"legendItems\"\n @legend-item-click=\"handleLegendItemClick\"\n />\n\n <VisXYContainer\n :margin=\"{ left: 20, right: 20 }\"\n :data=\"data\"\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n >\n <ChartCrosshair\n v-if=\"showTooltip\"\n :colors=\"colors\"\n :items=\"legendItems\"\n :index=\"index\"\n :custom-tooltip=\"customTooltip\"\n />\n\n <template\n v-for=\"(category, i) in categories\"\n :key=\"category\"\n >\n <VisLine\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n :curve-type=\"curveType\"\n :color=\"colors[i]\"\n :attributes=\"{\n [Line.selectors.line]: {\n opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n },\n }\"\n />\n </template>\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--vis-text-color))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<style>\n.sigma-ui-line-chart {\n display: flex;\n width: 100%;\n height: 400px;\n flex-direction: column;\n align-items: flex-end;\n}\n</style>\n"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "index.ts",
|