KoPKB/My-KOPKB
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

first init

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-06-08 11:37:14 +08:00
commit 94ecbe5887
1058 changed files with 87732 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fe/src/components/ui/accordion/AccordionContent.vue
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { accordionContent } from "@mykopkb/core/styles/accordion.styles";
import { cn } from "@mykopkb/core/utils/cn";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
import type { Api, ItemProps } from "@zag-js/accordion";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("accordionApi");
const item = inject<ItemProps>("accordionItem");
</script>
<template>
<Slot :class="cn([className, accordionContent])" v-bind="{ ...props, ...$attrs, ...api?.getItemContentProps(item!) }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/accordion/AccordionItem.vue
+39
View File
@@ -0,0 +1,39 @@
<script lang="ts" setup>
import { accordionItemVariants } from "@mykopkb/core/styles/accordion.styles";
import {
boxVariants,
type BoxVariants,
} from "@mykopkb/core/styles/box.styles";
import { cn } from "@mykopkb/core/utils/cn";
import { inject, provide } from "vue";
import { Slot } from "@/components/ui/slot";
import type { Api, ItemProps } from "@zag-js/accordion";
const {
raised,
class: className,
asChild = false,
...props
} = defineProps<
BoxVariants & ItemProps & { class?: string; asChild?: boolean }
>();
const variant = inject<"default" | "boxed">("accordionVariant", "default");
const api = inject<Api>("accordionApi");
provide("accordionItem", props);
</script>
<template>
<Slot :class="cn([
className,
variant == 'boxed' ? boxVariants({ raised, className }) : '',
accordionItemVariants({ variant, className }),
])
" v-bind="{ ...props, ...$attrs, ...api?.getItemProps(props) }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/accordion/AccordionRoot.vue
+44
View File
@@ -0,0 +1,44 @@
<script lang="ts" setup>
import { accordionRootVariants } from "@mykopkb/core/styles/accordion.styles";
import { cn } from "@mykopkb/core/utils/cn";
import { provide, computed } from "vue";
import * as accordion from "@zag-js/accordion";
import type { Props } from "@zag-js/accordion";
import { useMachine, normalizeProps } from "@zag-js/vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
variant = "default",
asChild = false,
collapsible = true,
...props
} = defineProps<
Partial<Props> & {
class?: string;
variant?: "default" | "boxed";
asChild?: boolean;
}
>();
const service = useMachine(accordion.machine, {
collapsible,
...props,
id: crypto.randomUUID(),
});
const api = computed(() => accordion.connect(service, normalizeProps));
provide("accordionVariant", variant);
provide("accordionApi", api);
</script>
<template>
<Slot :class="cn([className, accordionRootVariants({ variant, className })])"
v-bind="{ ...props, ...$attrs, ...api.getRootProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/accordion/AccordionTrigger.vue
+35
View File
@@ -0,0 +1,35 @@
<script lang="ts" setup>
import { ChevronDownIcon } from "@lucide/vue";
import {
accordionTrigger,
accordionItemIndicator,
} from "@mykopkb/core/styles/accordion.styles";
import { cn } from "@mykopkb/core/utils/cn";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
import type { Api, ItemProps } from "@zag-js/accordion";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("accordionApi");
const item = inject<ItemProps>("accordionItem");
</script>
<template>
<Slot :class="cn([className, accordionTrigger])" v-bind="{ ...props, ...$attrs, ...api?.getItemTriggerProps(item!) }">
<slot v-if="asChild" />
<button v-else>
<slot />
<div v-bind="api?.getItemIndicatorProps(item!)" :class="cn(accordionItemIndicator)">
<ChevronDownIcon />
</div>
</button>
</Slot>
</template>
fe/src/components/ui/accordion/index.ts
+4
View File
@@ -0,0 +1,4 @@
export { default as AccordionRoot } from "./AccordionRoot.vue";
export { default as AccordionItem } from "./AccordionItem.vue";
export { default as AccordionTrigger } from "./AccordionTrigger.vue";
export { default as AccordionContent } from "./AccordionContent.vue";
fe/src/components/ui/alert/AlertCloseTrigger.vue
+32
View File
@@ -0,0 +1,32 @@
<script lang="ts" setup>
import { X } from "@lucide/vue";
import { cn } from "@mykopkb/core/utils/cn";
import { Slot } from "@/components/ui/slot";
import { alertCloseTrigger } from "@mykopkb/core/styles/alert.styles";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const context = inject<{
present: boolean;
setPresent: (value: boolean) => void;
} | null>("alertPresent", null);
</script>
<template>
<Slot :class="cn([className, alertCloseTrigger])" v-bind="{ ...props, ...$attrs }"
@click="context?.setPresent(false)">
<slot v-if="asChild" />
<div v-else>
<slot v-if="$slots.default" />
<X v-else />
</div>
</Slot>
</template>
fe/src/components/ui/alert/AlertDescription.vue
+23
View File
@@ -0,0 +1,23 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { Slot } from "@/components/ui/slot";
import { alertDescription } from "@mykopkb/core/styles/alert.styles";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
</script>
<template>
<Slot :class="cn([className, alertDescription])" v-bind="{ ...props, ...$attrs }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/alert/AlertRoot.vue
+36
View File
@@ -0,0 +1,36 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import {
alertRootVariants,
type AlertRootVariants,
} from "@mykopkb/core/styles/alert.styles";
import { Presence } from "@/components/ui/presence";
import { ref, provide } from "vue";
const {
class: className,
look,
variant,
...rest
} = defineProps<AlertRootVariants & { class?: string }>();
const present = ref(true);
const setPresent = (value: boolean) => {
present.value = value;
};
provide("alertPresent", { present, setPresent });
</script>
<template>
<Presence :class="cn(
alertRootVariants({
look,
variant,
}),
className
)
" v-bind="rest" :present="present">
<slot />
</Presence>
</template>
fe/src/components/ui/alert/AlertTitle.vue
+23
View File
@@ -0,0 +1,23 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { Slot } from "@/components/ui/slot";
import { alertTitle } from "@mykopkb/core/styles/alert.styles";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
</script>
<template>
<Slot :class="cn([className, alertTitle])" v-bind="{ ...props, ...$attrs }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/alert/index.ts
+4
View File
@@ -0,0 +1,4 @@
export { default as AlertRoot } from "./AlertRoot.vue";
export { default as AlertTitle } from "./AlertTitle.vue";
export { default as AlertDescription } from "./AlertDescription.vue";
export { default as AlertCloseTrigger } from "./AlertCloseTrigger.vue";
fe/src/components/ui/avatar/AvatarFallback.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import type { Api } from "@zag-js/avatar";
import { cn } from "@mykopkb/core/utils/cn";
import { avatarFallback } from "@mykopkb/core/styles/avatar.styles";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
asChild?: boolean;
class?: string;
}>();
const api = inject<Api>("avatarApi");
</script>
<template>
<Slot :class="cn(avatarFallback, className)" v-bind="{ ...props, ...$attrs, ...api?.getFallbackProps() }">
<slot v-if="asChild" />
<span v-else>
<slot />
</span>
</Slot>
</template>
fe/src/components/ui/avatar/AvatarImage.vue
+16
View File
@@ -0,0 +1,16 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { avatarImage } from "@mykopkb/core/styles/avatar.styles";
import { inject } from "vue";
import type { Api } from "@zag-js/avatar";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
const api = inject<Api>("avatarApi");
</script>
<template>
<img :class="cn(avatarImage, className)" v-bind="{ ...props, ...$attrs, ...api?.getImageProps() }" />
</template>
fe/src/components/ui/avatar/AvatarRoot.vue
+50
View File
@@ -0,0 +1,50 @@
<script lang="ts" setup>
import * as avatar from "@zag-js/avatar";
import { provide, computed } from "vue";
import { useMachine, normalizeProps } from "@zag-js/vue";
import type { Props } from "@zag-js/avatar";
import { cn } from "@mykopkb/core/utils/cn";
import {
avatarRootVariants,
type AvatarRootVariants,
} from "@mykopkb/core/styles/avatar.styles";
import { Slot } from "@/components/ui/slot";
const {
class: className,
bordered,
asChild = false,
...props
} = defineProps<
AvatarRootVariants &
Partial<Props> & {
class?: string;
asChild?: boolean;
}
>();
const service = useMachine(avatar.machine, {
...props,
id: crypto.randomUUID(),
});
const api = computed(() => avatar.connect(service, normalizeProps));
provide("avatarApi", api);
</script>
<template>
<Slot :class="cn(
avatarRootVariants({
bordered,
className,
}),
className
)
" v-bind="{ ...props, ...$attrs, ...api.getRootProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/avatar/index.ts
+3
View File
@@ -0,0 +1,3 @@
export { default as AvatarRoot } from "./AvatarRoot.vue";
export { default as AvatarFallback } from "./AvatarFallback.vue";
export { default as AvatarImage } from "./AvatarImage.vue";
fe/src/components/ui/badge/Badge.vue
+39
View File
@@ -0,0 +1,39 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import {
TooltipRoot,
TooltipTrigger,
TooltipPositioner,
TooltipContent,
} from "@/components/ui/tooltip";
import {
badgeVariants,
type BadgeVariants,
} from "@mykopkb/core/styles/badge.styles";
const {
class: className,
look,
variant,
content,
...props
} = defineProps<
BadgeVariants & {
class?: string;
content?: string;
}
>();
</script>
<template>
<TooltipRoot :disabled="!content">
<TooltipTrigger as-child>
<span :class="cn(badgeVariants({ look, variant, className }))" v-bind="{ ...props, ...$attrs }">
<slot />
</span>
</TooltipTrigger>
<TooltipPositioner>
<TooltipContent>{{ content }}</TooltipContent>
</TooltipPositioner>
</TooltipRoot>
</template>
fe/src/components/ui/badge/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Badge } from "./Badge.vue";
fe/src/components/ui/box/box.vue
+29
View File
@@ -0,0 +1,29 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import {
boxVariants,
type BoxVariants,
} from "@mykopkb/core/styles/box.styles";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
raised,
...props
} = defineProps<
BoxVariants & {
class?: string;
asChild?: boolean;
}
>();
</script>
<template>
<Slot :class="cn(boxVariants({ raised, className }), className)" v-bind="{ ...props, ...$attrs }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/box/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Box } from "./Box.vue";
fe/src/components/ui/breadcrumb/Breadcrumb.vue
+61
View File
@@ -0,0 +1,61 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { ChevronRight, Ellipsis } from "@lucide/vue";
import {
MenuRoot,
MenuTrigger,
MenuPositioner,
MenuContent,
MenuItem,
} from "@/components/ui/menu";
import { BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from ".";
const { class: className, ...props } = defineProps<{
class?: string;
items: string[];
}>();
</script>
<template>
<nav aria-label="breadcrumb" data-slot="breadcrumb" v-bind="{ ...props, ...$attrs }" :class="cn(className)">
<BreadcrumbList>
<template v-if="items.length <= 3">
<template v-for="(item, key) in items">
<BreadcrumbItem>
<BreadcrumbLink>{{ item }}</BreadcrumbLink>
</BreadcrumbItem>
<ChevronRight v-if="key < items.length - 1" />
</template>
</template>
<template v-else>
<BreadcrumbItem>
<BreadcrumbLink>{{ items[0] }}</BreadcrumbLink>
</BreadcrumbItem>
<ChevronRight />
<BreadcrumbItem>
<MenuRoot>
<MenuTrigger asChild>
<BreadcrumbLink>
<Ellipsis />
</BreadcrumbLink>
</MenuTrigger>
<MenuPositioner>
<MenuContent>
<MenuItem v-for="(item, itemKey) in items.slice(1, -2)" :value="item" :key="itemKey">
{{ item }}
</MenuItem>
</MenuContent>
</MenuPositioner>
</MenuRoot>
</BreadcrumbItem>
<ChevronRight />
<template v-for="(item, index) in items.slice(-2)">
<BreadcrumbItem>
<BreadcrumbLink>{{ item }}</BreadcrumbLink>
</BreadcrumbItem>
<ChevronRight v-if="index < 1" />
</template>
</template>
</BreadcrumbList>
</nav>
</template>
fe/src/components/ui/breadcrumb/BreadcrumbItem.vue
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { breadcrumbItem } from "@mykopkb/core/styles/breadcrumb.styles";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
</script>
<template>
<li :class="cn(className, breadcrumbItem)" v-bind="{ ...props, ...$attrs }">
<slot />
</li>
</template>
fe/src/components/ui/breadcrumb/BreadcrumbLink.vue
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { breadcrumbLink } from "@mykopkb/core/styles/breadcrumb.styles";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
</script>
<template>
<a :class="cn(className, breadcrumbLink)" v-bind="{ ...props, ...$attrs }">
<slot />
</a>
</template>
fe/src/components/ui/breadcrumb/BreadcrumbList.vue
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { breadcrumbList } from "@mykopkb/core/styles/breadcrumb.styles";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
</script>
<template>
<ol :class="cn(className, breadcrumbList)" v-bind="{ ...props, ...$attrs }">
<slot />
</ol>
</template>
fe/src/components/ui/breadcrumb/index.ts
+4
View File
@@ -0,0 +1,4 @@
export { default as Breadcrumb } from "./Breadcrumb.vue";
export { default as BreadcrumbItem } from "./BreadcrumbItem.vue";
export { default as BreadcrumbLink } from "./BreadcrumbLink.vue";
export { default as BreadcrumbList } from "./BreadcrumbList.vue";
fe/src/components/ui/button/Button.vue
+31
View File
@@ -0,0 +1,31 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import {
buttonVariants,
type ButtonVariants,
} from "@mykopkb/core/styles/button.styles";
import { Slot } from "@/components/ui/slot";
const {
class: className,
look,
variant,
size,
asChild = false,
...props
} = defineProps<
ButtonVariants & {
class?: string;
asChild?: boolean;
}
>();
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs }" :class="cn(buttonVariants({ look, variant, size, className }), className)">
<slot v-if="asChild" />
<button v-else>
<slot />
</button>
</Slot>
</template>
fe/src/components/ui/button/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Button } from "./Button.vue";
fe/src/components/ui/carousel/CarouselControl.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { carouselControl } from "@mykopkb/core/styles/carousel.styles";
import type { Api } from "@zag-js/carousel";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("carouselApi");
</script>
<template>
<Slot :class="cn(carouselControl, className)" v-bind="{ ...props, ...$attrs, ...api?.getControlProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/carousel/CarouselIndicator.vue
+25
View File
@@ -0,0 +1,25 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { carouselIndicator } from "@mykopkb/core/styles/carousel.styles";
import type { Api, IndicatorProps } from "@zag-js/carousel";
import { inject } from "vue";
const {
class: className,
asChild = false,
index,
...props
} = defineProps<
{
class?: string;
asChild?: boolean;
} & IndicatorProps
>();
const api = inject<Api>("carouselApi");
</script>
<template>
<button :class="cn(carouselIndicator, className)"
v-bind="{ ...props, ...$attrs, ...api?.getIndicatorProps({ index }) }" />
</template>
fe/src/components/ui/carousel/CarouselIndicatorGroup.vue
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { carouselIndicatorGroup } from "@mykopkb/core/styles/carousel.styles";
import type { Api } from "@zag-js/carousel";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("carouselApi");
</script>
<template>
<Slot :class="cn(carouselIndicatorGroup, className)"
v-bind="{ ...props, ...$attrs, ...api?.getIndicatorGroupProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/carousel/CarouselItem.vue
+31
View File
@@ -0,0 +1,31 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { Box } from "@/components/ui/box";
import { carouselItem } from "@mykopkb/core/styles/carousel.styles";
import type { Api, ItemProps } from "@zag-js/carousel";
import { inject } from "vue";
const {
class: className,
asChild = false,
index,
...props
} = defineProps<
{
class?: string;
asChild?: boolean;
} & ItemProps
>();
const api = inject<Api>("carouselApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getItemProps({ index }) }">
<slot v-if="asChild" />
<Box v-else :class="cn(carouselItem, className)">
<slot />
</Box>
</Slot>
</template>
fe/src/components/ui/carousel/CarouselItemGroup.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { carouselItemGroup } from "@mykopkb/core/styles/carousel.styles";
import type { Api } from "@zag-js/carousel";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("carouselApi");
</script>
<template>
<Slot :class="cn(carouselItemGroup, className)" v-bind="{ ...props, ...$attrs, ...api?.getItemGroupProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/carousel/CarouselNextTrigger.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "@lucide/vue";
import { carouselNextTrigger } from "@mykopkb/core/styles/carousel.styles";
import type { Api } from "@zag-js/carousel";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("carouselApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getNextTriggerProps() }">
<slot v-if="asChild" />
<Button variant="ghost" v-else :class="cn(carouselNextTrigger, className)">
<slot v-if="$slots.default" />
<ArrowRight v-else />
</Button>
</Slot>
</template>
fe/src/components/ui/carousel/CarouselPrevTrigger.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "@lucide/vue";
import { carouselPrevTrigger } from "@mykopkb/core/styles/carousel.styles";
import type { Api } from "@zag-js/carousel";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("carouselApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getPrevTriggerProps() }">
<slot v-if="asChild" />
<Button variant="ghost" v-else :class="cn(carouselPrevTrigger, className)">
<slot v-if="$slots.default" />
<ArrowLeft v-else />
</Button>
</Slot>
</template>
fe/src/components/ui/carousel/CarouselRoot.vue
+41
View File
@@ -0,0 +1,41 @@
<script lang="ts" setup>
import * as carousel from "@zag-js/carousel";
import { useMachine, normalizeProps } from "@zag-js/vue";
import type { Props } from "@zag-js/carousel";
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { carouselRoot } from "@mykopkb/core/styles/carousel.styles";
import { computed, provide } from "vue";
const {
class: className,
defaultPage,
slideCount,
spacing = "2rem",
allowMouseDrag = true,
asChild = false,
...props
} = defineProps<Partial<Props> & { asChild?: boolean; class?: string }>();
const service = useMachine(carousel.machine, {
defaultPage,
slideCount,
spacing,
allowMouseDrag,
...props,
id: crypto.randomUUID(),
});
const api = computed(() => carousel.connect(service, normalizeProps));
provide("carouselApi", api);
</script>
<template>
<Slot :class="cn(carouselRoot, className)" v-bind="{ ...props, ...$attrs, ...api.getRootProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/carousel/index.ts
+8
View File
@@ -0,0 +1,8 @@
export { default as CarouselRoot } from "./CarouselRoot.vue";
export { default as CarouselControl } from "./CarouselControl.vue";
export { default as CarouselPrevTrigger } from "./CarouselPrevTrigger.vue";
export { default as CarouselNextTrigger } from "./CarouselNextTrigger.vue";
export { default as CarouselIndicatorGroup } from "./CarouselIndicatorGroup.vue";
export { default as CarouselIndicator } from "./CarouselIndicator.vue";
export { default as CarouselItemGroup } from "./CarouselItemGroup.vue";
export { default as CarouselItem } from "./CarouselItem.vue";
fe/src/components/ui/chart/Chart.vue
+36
View File
@@ -0,0 +1,36 @@
<script lang="ts" setup generic="TType extends ChartType">
import ChartJs from "chart.js/auto";
import { ref, onMounted } from "vue";
import { cn } from "@mykopkb/core/utils/cn";
import { chart } from "@mykopkb/core/styles/chart.styles";
import type { ChartType, ChartConfiguration } from "chart.js";
const {
class: className,
config,
getRef,
...props
} = defineProps<{
class?: string;
config: ChartConfiguration<TType>;
getRef?: (chart: ChartJs<TType>) => void;
}>();
const chartRef = ref<
| (HTMLCanvasElement & {
instance?: ChartJs<TType>;
})
| null
>(null);
onMounted(() => {
if (chartRef.value && !chartRef.value.instance) {
chartRef.value.instance = new ChartJs(chartRef.value, config);
getRef?.(chartRef.value.instance);
}
});
</script>
<template>
<canvas :class="cn(chart, className)" ref="chartRef" v-bind="props" />
</template>
fe/src/components/ui/chart/index.ts
+2
View File
@@ -0,0 +1,2 @@
export { default as Chart } from "./Chart.vue";
export { getColor } from "./utils.ts";
fe/src/components/ui/chart/utils.ts
+11
View File
@@ -0,0 +1,11 @@
export function getColor(name: string, opacity = 1) {
const color = getComputedStyle(document.documentElement)
.getPropertyValue(name)
.trim();
if (opacity < 1) {
return `color-mix(in oklch, ${color} ${opacity * 100}%, transparent ${
100 - opacity * 100
}%)`;
}
return color;
}
fe/src/components/ui/checkbox/CheckboxControl.vue
+31
View File
@@ -0,0 +1,31 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { CheckIcon } from "@lucide/vue";
import { cn } from "@mykopkb/core/utils/cn";
import { checkboxControl } from "@mykopkb/core/styles/checkbox.styles";
import { CheckboxIndicator } from ".";
import type { Api } from "@zag-js/checkbox";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
asChild?: boolean;
class?: string;
}>();
const api = inject<Api>("checkboxApi");
</script>
<template>
<Slot :class="cn(checkboxControl, className)" v-bind="{ ...props, ...$attrs, ...api?.getControlProps() }">
<slot v-if="asChild" />
<div v-else>
<CheckboxIndicator>
<CheckIcon />
</CheckboxIndicator>
</div>
</Slot>
</template>
fe/src/components/ui/checkbox/CheckboxHiddenInput.vue
+16
View File
@@ -0,0 +1,16 @@
<script lang="ts" setup>
import type { Api } from "@zag-js/checkbox";
import { cn } from "@mykopkb/core/utils/cn";
import { checkboxHiddenInput } from "@mykopkb/core/styles/checkbox.styles";
import { inject } from "vue";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
const api = inject<Api>("checkboxApi");
</script>
<template>
<input :class="cn(checkboxHiddenInput, className)" v-bind="{ ...props, ...$attrs, ...api?.getHiddenInputProps() }" />
</template>
fe/src/components/ui/checkbox/CheckboxIndicator.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import type { Api } from "@zag-js/checkbox";
import { cn } from "@mykopkb/core/utils/cn";
import { checkboxIndicator } from "@mykopkb/core/styles/checkbox.styles";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
asChild?: boolean;
class?: string;
}>();
const api = inject<Api>("checkboxApi");
</script>
<template>
<Slot :class="cn(checkboxIndicator, className)" v-bind="{ ...props, ...$attrs, ...api?.getIndicatorProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/checkbox/CheckboxLabel.vue
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import type { Api } from "@zag-js/checkbox";
import { checkboxLabel } from "@mykopkb/core/styles/checkbox.styles";
import { label } from "@mykopkb/core/styles/label.styles";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
asChild?: boolean;
class?: string;
}>();
const api = inject<Api>("checkboxApi");
</script>
<template>
<Slot :class="cn([label, checkboxLabel, className])" v-bind="{ ...props, ...$attrs, ...api?.getLabelProps() }">
<slot v-if="asChild" />
<span v-else>
<slot />
</span>
</Slot>
</template>
fe/src/components/ui/checkbox/CheckboxRoot.vue
+35
View File
@@ -0,0 +1,35 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { checkboxRoot } from "@mykopkb/core/styles/checkbox.styles";
import * as checkbox from "@zag-js/checkbox";
import { useMachine, normalizeProps } from "@zag-js/vue";
import type { Props } from "@zag-js/checkbox";
import { CheckboxHiddenInput } from ".";
import { computed, provide } from "vue";
const {
class: className,
checked = undefined,
...props
} = defineProps<Partial<Props> & { class?: string }>();
const service = useMachine(
checkbox.machine,
computed(() => ({
...props,
checked,
id: crypto.randomUUID(),
}))
);
const api = computed(() => checkbox.connect(service, normalizeProps));
provide("checkboxApi", api);
</script>
<template>
<label :class="cn(checkboxRoot, className)" v-bind="{ ...props, ...$attrs, ...api.getRootProps() }">
<slot />
<CheckboxHiddenInput />
</label>
</template>
fe/src/components/ui/checkbox/index.ts
+5
View File
@@ -0,0 +1,5 @@
export { default as CheckboxRoot } from "./CheckboxRoot.vue";
export { default as CheckboxLabel } from "./CheckboxLabel.vue";
export { default as CheckboxControl } from "./CheckboxControl.vue";
export { default as CheckboxIndicator } from "./CheckboxIndicator.vue";
export { default as CheckboxHiddenInput } from "./CheckboxHiddenInput.vue";
fe/src/components/ui/combobox/ComboboxClearTrigger.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxClearTrigger } from "@mykopkb/core/styles/combobox.styles";
import type { Api } from "@zag-js/combobox";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getClearTriggerProps() }">
<slot v-if="asChild" />
<span :class="cn(comboboxClearTrigger, className)" v-else>
<slot />
</span>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxContent.vue
+35
View File
@@ -0,0 +1,35 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxContent } from "@mykopkb/core/styles/combobox.styles";
import { Box } from "@/components/ui/box";
import { ComboboxPositioner } from ".";
import type { Api } from "@zag-js/combobox";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
</script>
<template>
<Teleport to="body">
<ComboboxPositioner>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getContentProps() }">
<slot v-if="asChild" />
<Box v-else raised="single" :class="cn(comboboxContent, className)">
<div>
<slot />
</div>
</Box>
</Slot>
</ComboboxPositioner>
</Teleport>
</template>
fe/src/components/ui/combobox/ComboboxControl.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import type { Api } from "@zag-js/combobox";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxControl } from "@mykopkb/core/styles/combobox.styles";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
</script>
<template>
<Slot :class="cn(comboboxControl, className)" v-bind="{ ...props, ...$attrs, ...api?.getLabelProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxInput.vue
+17
View File
@@ -0,0 +1,17 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxInput } from "@mykopkb/core/styles/combobox.styles";
import { Input } from "@/components/ui/input";
import type { Api } from "@zag-js/combobox";
import { inject } from "vue";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
const api = inject<Api>("comboboxApi");
</script>
<template>
<Input :class="cn(comboboxInput, className)" v-bind="{ ...props, ...$attrs, ...api?.getInputProps() }" />
</template>
fe/src/components/ui/combobox/ComboboxItem.vue
+29
View File
@@ -0,0 +1,29 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxItem } from "@mykopkb/core/styles/combobox.styles";
import type { ItemProps } from "@zag-js/combobox";
import type { Api } from "@zag-js/combobox";
import { provide, inject } from "vue";
import { ComboboxItemIndicator } from ".";
const {
class: className,
asChild = false,
...props
} = defineProps<ItemProps & { class?: string; asChild?: boolean }>();
const api = inject<Api>("comboboxApi");
provide("comboboxItem", props);
</script>
<template>
<Slot :class="cn(comboboxItem, className)" v-bind="{ ...props, ...$attrs, ...api?.getItemProps(props) }">
<slot v-if="asChild" />
<div v-else>
<slot />
<ComboboxItemIndicator />
</div>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxItemGroup.vue
+31
View File
@@ -0,0 +1,31 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxItemGroup } from "@mykopkb/core/styles/combobox.styles";
import type { Api } from "@zag-js/combobox";
import { provide, inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
const itemGroupId = { id: crypto.randomUUID() };
provide("comboboxItemGroupId", itemGroupId);
</script>
<template>
<Slot :class="cn(comboboxItemGroup, className)"
v-bind="{ ...props, ...$attrs, ...api?.getItemGroupProps(itemGroupId) }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxItemGroupLabel.vue
+32
View File
@@ -0,0 +1,32 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxItemGroupLabel } from "@mykopkb/core/styles/combobox.styles";
import type { Api, ItemGroupProps } from "@zag-js/combobox";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
const itemGroupId = inject<ItemGroupProps>("comboboxItemGroupId");
</script>
<template>
<Slot :class="cn(comboboxItemGroupLabel, className)" v-bind="{
...props, ...$attrs, ...api?.getItemGroupLabelProps({
htmlFor: itemGroupId?.id!,
})
}">
<slot v-if="asChild" />
<label v-else>
<slot />
</label>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxItemIndicator.vue
+31
View File
@@ -0,0 +1,31 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxItemIndicator } from "@mykopkb/core/styles/combobox.styles";
import { Check } from "@lucide/vue";
import type { Api, ItemProps } from "@zag-js/combobox";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
const item = inject<ItemProps>("comboboxItem");
</script>
<template>
<Slot :class="cn(comboboxItemIndicator, className)"
v-bind="{ ...props, ...$attrs, ...api?.getItemIndicatorProps(item!) }">
<slot v-if="asChild" />
<div v-else>
<slot v-if="$slots.default" />
<Check v-else class="size-3.5" />
</div>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxItemText.vue
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxItemText } from "@mykopkb/core/styles/combobox.styles";
import type { Api, ItemProps } from "@zag-js/combobox";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
const item = inject<ItemProps>("comboboxItem");
</script>
<template>
<Slot :class="cn(comboboxItemText, className)" v-bind="{ ...props, ...$attrs, ...api?.getItemTextProps(item!) }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxLabel.vue
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxLabel } from "@mykopkb/core/styles/combobox.styles";
import { Label } from "@/components/ui/label";
import type { Api } from "@zag-js/combobox";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getLabelProps() }">
<slot v-if="asChild" />
<Label v-else :class="cn(comboboxLabel, className)">
<slot />
</Label>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxPositioner.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxPositioner } from "@mykopkb/core/styles/combobox.styles";
import type { Api } from "@zag-js/combobox";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
</script>
<template>
<Slot :class="cn(comboboxPositioner, className)" v-bind="{ ...props, ...$attrs, ...api?.getPositionerProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxRoot.vue
+47
View File
@@ -0,0 +1,47 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { comboboxRoot } from "@mykopkb/core/styles/combobox.styles";
import { provide, computed } from "vue";
import * as combobox from "@zag-js/combobox";
import { useMachine, normalizeProps } from "@zag-js/vue";
import type { Props } from "@zag-js/combobox";
import { Slot } from "@/components/ui/slot";
const {
class: className,
multiple = false,
selectionBehavior = "clear",
value,
asChild = false,
onOpenChange,
onInputValueChange,
onValueChange,
open = undefined,
...props
} = defineProps<Partial<Props> & { asChild?: boolean; class?: string }>();
const service = useMachine(combobox.machine, {
multiple,
selectionBehavior,
onOpenChange,
onInputValueChange,
onValueChange,
open,
...props,
id: crypto.randomUUID(),
});
const api = computed(() => combobox.connect(service, normalizeProps));
provide("comboboxApi", api);
</script>
<template>
<Slot :class="cn(comboboxRoot, className)" :data-multiple="multiple"
v-bind="{ ...props, ...$attrs, ...api.getRootProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/combobox/ComboboxTrigger.vue
+32
View File
@@ -0,0 +1,32 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { Button } from "@/components/ui/button";
import { ChevronsUpDownIcon } from "@lucide/vue";
import { comboboxTrigger } from "@mykopkb/core/styles/combobox.styles";
import { ComboboxClearTrigger } from ".";
import type { Api } from "@zag-js/combobox";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("comboboxApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getTriggerProps() }">
<Button variant="ghost" v-if="!asChild" :class="cn(comboboxTrigger, className)">
<div>{{ api?.valueAsString || "Select Options..." }}</div>
<ComboboxClearTrigger>Clear</ComboboxClearTrigger>
<ChevronsUpDownIcon />
</Button>
<slot v-else />
</Slot>
</template>
fe/src/components/ui/combobox/index.ts
+13
View File
@@ -0,0 +1,13 @@
export { default as ComboboxRoot } from "./ComboboxRoot.vue";
export { default as ComboboxLabel } from "./ComboboxLabel.vue";
export { default as ComboboxControl } from "./ComboboxControl.vue";
export { default as ComboboxInput } from "./ComboboxInput.vue";
export { default as ComboboxTrigger } from "./ComboboxTrigger.vue";
export { default as ComboboxClearTrigger } from "./ComboboxClearTrigger.vue";
export { default as ComboboxPositioner } from "./ComboboxPositioner.vue";
export { default as ComboboxContent } from "./ComboboxContent.vue";
export { default as ComboboxItemGroup } from "./ComboboxItemGroup.vue";
export { default as ComboboxItemGroupLabel } from "./ComboboxItemGroupLabel.vue";
export { default as ComboboxItem } from "./ComboboxItem.vue";
export { default as ComboboxItemText } from "./ComboboxItemText.vue";
export { default as ComboboxItemIndicator } from "./ComboboxItemIndicator.vue";
fe/src/components/ui/datepicker/DatePickerClearTrigger.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerClearTrigger } from "@mykopkb/core/styles/datepicker.styles";
import { Button } from "@/components/ui/button";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
import { X } from "@lucide/vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getClearTriggerProps() }">
<Button variant="ghost" v-if="!asChild" :class="cn(datePickerClearTrigger, className)">
<X v-if="!$slots.default" />
<slot v-else />
</Button>
<slot v-else />
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerContent.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerContent } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { Box } from "@/components/ui/box";
import { Slot } from "@/components/ui/slot";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getContentProps() }">
<slot v-if="asChild" />
<Box v-else raised="single" :class="cn(datePickerContent, className)">
<div>
<slot />
</div>
</Box>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerContext.vue
+10
View File
@@ -0,0 +1,10 @@
<script setup lang="ts">
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const api = inject<Api>("datepickerApi");
</script>
<template>
<slot :datePicker="api"></slot>
</template>
fe/src/components/ui/datepicker/DatePickerControl.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerControl } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot :class="cn(datePickerControl, className)" v-bind="{ ...props, ...$attrs, ...api?.getControlProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerInput.vue
+26
View File
@@ -0,0 +1,26 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerInput } from "@mykopkb/core/styles/datepicker.styles";
import { Input } from "@/components/ui/input";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getInputProps() }">
<slot v-if="asChild" />
<Input v-else :class="cn(datePickerInput, className)" />
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerLabel.vue
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerLabel } from "@mykopkb/core/styles/datepicker.styles";
import { Label } from "@/components/ui/label";
import { Slot } from "@/components/ui/slot";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getLabelProps() }">
<slot v-if="asChild" />
<Label v-else :class="cn(datePickerLabel, className)">
<slot />
</Label>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerMonthSelect.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerMonthSelect } from "@mykopkb/core/styles/datepicker.styles";
import {
NativeSelect,
NativeSelectOption,
} from "@/components/ui/native-select";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<NativeSelect :class="cn(datePickerMonthSelect, className)"
v-bind="{ ...props, ...$attrs, ...api?.getMonthSelectProps() }">
<NativeSelectOption v-for="(month, i) in api?.getMonths()" :key="i" :value="month.value">
{{ month.label }}
</NativeSelectOption>
</NativeSelect>
</template>
fe/src/components/ui/datepicker/DatePickerNextTrigger.vue
+29
View File
@@ -0,0 +1,29 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerNextTrigger } from "@mykopkb/core/styles/datepicker.styles";
import { MoveRight } from "@lucide/vue";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getNextTriggerProps() }">
<button v-if="!asChild" :class="cn(datePickerNextTrigger, className)">
<MoveRight v-if="!$slots.default" />
<slot v-else />
</button>
<slot v-else />
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerPositioner.vue
+29
View File
@@ -0,0 +1,29 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerPositioner } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Teleport to="body">
<Slot :class="cn(datePickerPositioner, className)" v-bind="{ ...props, ...$attrs, ...api?.getPositionerProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</Teleport>
</template>
fe/src/components/ui/datepicker/DatePickerPresetTrigger.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerPresetTrigger } from "@mykopkb/core/styles/datepicker.styles";
import { Button } from "@/components/ui/button";
import type { Api, PresetTriggerProps } from "@zag-js/date-picker";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<
PresetTriggerProps & {
class?: string;
asChild?: boolean;
}
>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getPresetTriggerProps(props) }">
<Button variant="ghost" v-if="!asChild" :class="cn(datePickerPresetTrigger, className)">
<slot />
</Button>
<slot v-else />
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerPrevTrigger.vue
+29
View File
@@ -0,0 +1,29 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerPrevTrigger } from "@mykopkb/core/styles/datepicker.styles";
import { MoveLeft } from "@lucide/vue";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getPrevTriggerProps() }">
<button v-if="!asChild" :class="cn(datePickerPrevTrigger, className)">
<MoveLeft v-if="!$slots.default" />
<slot v-else />
</button>
<slot v-else />
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerRangeText.vue
+18
View File
@@ -0,0 +1,18 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerRangeText } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<div :class="cn(datePickerRangeText, className)" v-bind="{ ...props, ...$attrs, ...api?.getRangeTextProps() }">
{{ api?.visibleRangeText.start }}
</div>
</template>
fe/src/components/ui/datepicker/DatePickerRoot.vue
+40
View File
@@ -0,0 +1,40 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerRoot } from "@mykopkb/core/styles/datepicker.styles";
import { provide, computed } from "vue";
import * as datepicker from "@zag-js/date-picker";
import type { Props } from "@zag-js/date-picker";
import { useMachine, normalizeProps } from "@zag-js/vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
open = undefined,
...props
} = defineProps<
Partial<Props> & {
class?: string;
asChild?: boolean;
}
>();
const service = useMachine(datepicker.machine, {
...props,
open,
id: crypto.randomUUID(),
});
const api = computed(() => datepicker.connect(service, normalizeProps));
provide("datepickerApi", api);
</script>
<template>
<Slot :class="cn(datePickerRoot, className)" v-bind="{ ...props, ...$attrs, ...api.getRootProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerTable.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerTable } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot :class="cn(datePickerTable, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableProps() }">
<slot v-if="asChild" />
<table v-else>
<slot />
</table>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerTableBody.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerTableBody } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot :class="cn(datePickerTableBody, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableHeadProps() }">
<slot v-if="asChild" />
<tbody v-else>
<slot />
</tbody>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerTableCell.vue
+45
View File
@@ -0,0 +1,45 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerTableCell } from "@mykopkb/core/styles/datepicker.styles";
import type {
Api,
ViewProps,
DayTableCellProps,
TableCellProps,
} from "@zag-js/date-picker";
import { provide, inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<
(DayTableCellProps | TableCellProps) & {
class?: string;
asChild?: boolean;
}
>();
const api = inject<Api>("datepickerApi");
const viewContext = inject<ViewProps>("datepickerView");
provide("datepickerCell", props);
</script>
<template>
<Slot :class="cn(datePickerTableCell, className)" v-bind="{
...props, ...$attrs, ...(viewContext?.view === 'day'
? api?.getDayTableCellProps(props as DayTableCellProps)
: viewContext?.view === 'month'
? api?.getMonthTableCellProps(props as TableCellProps)
: viewContext?.view === 'year'
? api?.getYearTableCellProps(props as TableCellProps)
: undefined)
}">
<slot v-if="asChild" />
<td v-else>
<slot />
</td>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerTableCellTrigger.vue
+44
View File
@@ -0,0 +1,44 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerTableCellTrigger } from "@mykopkb/core/styles/datepicker.styles";
import type {
Api,
ViewProps,
DayTableCellProps,
TableCellProps,
} from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
const viewContext = inject<ViewProps>("datepickerView");
const cellContext = inject<DayTableCellProps | TableCellProps>(
"datepickerCell"
);
</script>
<template>
<Slot :class="cn(datePickerTableCellTrigger, className)" v-bind="{
...props, ...$attrs, ...(viewContext?.view === 'day'
? api?.getDayTableCellTriggerProps(cellContext as DayTableCellProps)
: viewContext?.view === 'month'
? api?.getMonthTableCellTriggerProps(cellContext as TableCellProps)
: viewContext?.view === 'year'
? api?.getYearTableCellTriggerProps(cellContext as TableCellProps)
: undefined)
}">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerTableHead.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerTableHead } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot :class="cn(datePickerTableHead, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableHeadProps() }">
<slot v-if="asChild" />
<thead v-else>
<slot />
</thead>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerTableHeader.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerTableHeader } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot :class="cn(datePickerTableHeader, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableHeaderProps() }">
<slot v-if="asChild" />
<th v-else>
<slot />
</th>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerTableRow.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerTableRow } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot :class="cn(datePickerTableRow, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableRowProps() }">
<slot v-if="asChild" />
<tr v-else>
<slot />
</tr>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerTrigger.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerTrigger } from "@mykopkb/core/styles/datepicker.styles";
import { Button } from "@/components/ui/button";
import { Calendar } from "@lucide/vue";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getTriggerProps() }">
<Button variant="ghost" v-if="!asChild" :class="cn(datePickerTrigger, className)">
<Calendar v-if="!$slots.default" />
<slot v-else />
</Button>
<slot v-else />
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerView.vue
+31
View File
@@ -0,0 +1,31 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerView } from "@mykopkb/core/styles/datepicker.styles";
import type { Api, ViewProps } from "@zag-js/date-picker";
import { provide, inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<
ViewProps & {
class?: string;
asChild?: boolean;
}
>();
const api = inject<Api>("datepickerApi");
provide("datepickerView", props);
</script>
<template>
<Slot :class="cn(datePickerView, className)" v-bind="{ ...props, ...$attrs, ...api?.getViewProps(props) }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerViewControl.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerViewControl } from "@mykopkb/core/styles/datepicker.styles";
import type { Api, ViewProps } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<
ViewProps & {
class?: string;
asChild?: boolean;
}
>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot :class="cn(datePickerViewControl, className)"
v-bind="{ ...props, ...$attrs, ...api?.getViewControlProps(props) }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerViewTrigger.vue
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { Slot } from "@/components/ui/slot";
import { cn } from "@mykopkb/core/utils/cn";
import { datePickerViewTrigger } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<Slot :class="cn(datePickerViewTrigger, className)"
v-bind="{ ...props, ...$attrs, ...api?.getViewTriggerProps(props) }">
<button v-if="!asChild" :class="cn(datePickerViewTrigger, className)">
<slot />
</button>
<slot v-else />
</Slot>
</template>
fe/src/components/ui/datepicker/DatePickerYearSelect.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import {
NativeSelect,
NativeSelectOption,
} from "@/components/ui/native-select";
import { datePickerYearSelect } from "@mykopkb/core/styles/datepicker.styles";
import type { Api } from "@zag-js/date-picker";
import { inject } from "vue";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("datepickerApi");
</script>
<template>
<NativeSelect :class="cn(datePickerYearSelect, className)"
v-bind="{ ...props, ...$attrs, ...api?.getYearSelectProps() }">
<NativeSelectOption v-for="(year, i) in api?.getYears()" :key="i" :value="year.value">
{{ year.label }}
</NativeSelectOption>
</NativeSelect>
</template>
fe/src/components/ui/datepicker/index.ts
+25
View File
@@ -0,0 +1,25 @@
export { default as DatePickerRoot } from "./DatePickerRoot.vue";
export { default as DatePickerLabel } from "./DatePickerLabel.vue";
export { default as DatePickerControl } from "./DatePickerControl.vue";
export { default as DatePickerInput } from "./DatePickerInput.vue";
export { default as DatePickerTrigger } from "./DatePickerTrigger.vue";
export { default as DatePickerClearTrigger } from "./DatePickerClearTrigger.vue";
export { default as DatePickerPositioner } from "./DatePickerPositioner.vue";
export { default as DatePickerContent } from "./DatePickerContent.vue";
export { default as DatePickerYearSelect } from "./DatePickerYearSelect.vue";
export { default as DatePickerMonthSelect } from "./DatePickerMonthSelect.vue";
export { default as DatePickerView } from "./DatePickerView.vue";
export { default as DatePickerViewControl } from "./DatePickerViewControl.vue";
export { default as DatePickerPresetTrigger } from "./DatePickerPresetTrigger.vue";
export { default as DatePickerPrevTrigger } from "./DatePickerPrevTrigger.vue";
export { default as DatePickerViewTrigger } from "./DatePickerViewTrigger.vue";
export { default as DatePickerNextTrigger } from "./DatePickerNextTrigger.vue";
export { default as DatePickerRangeText } from "./DatePickerRangeText.vue";
export { default as DatePickerTable } from "./DatePickerTable.vue";
export { default as DatePickerTableHead } from "./DatePickerTableHead.vue";
export { default as DatePickerTableRow } from "./DatePickerTableRow.vue";
export { default as DatePickerTableHeader } from "./DatePickerTableHeader.vue";
export { default as DatePickerTableBody } from "./DatePickerTableBody.vue";
export { default as DatePickerTableCell } from "./DatePickerTableCell.vue";
export { default as DatePickerTableCellTrigger } from "./DatePickerTableCellTrigger.vue";
export { default as DatePickerContext } from "./DatePickerContext.vue";
fe/src/components/ui/dialog/DialogBackdrop.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { dialogBackdrop } from "@mykopkb/core/styles/dialog.styles";
import type { Api } from "@zag-js/dialog";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("dialogApi");
</script>
<template>
<Slot :class="cn(dialogBackdrop, className)" v-bind="{ ...props, ...$attrs, ...api?.getBackdropProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/dialog/DialogCloseTrigger.vue
+44
View File
@@ -0,0 +1,44 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { dialogCloseTrigger } from "@mykopkb/core/styles/dialog.styles";
import { Button } from "@/components/ui/button";
import type { Api } from "@zag-js/dialog";
import {
buttonVariants,
type ButtonVariants,
} from "@mykopkb/core/styles/button.styles";
import { X } from "@lucide/vue";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
look = "outline",
variant = "secondary",
size,
asChild = false,
...props
} = defineProps<
ButtonVariants & {
class?: string;
asChild?: boolean;
}
>();
const api = inject<Api>("dialogApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getCloseTriggerProps() }">
<Button variant="ghost" v-if="!$slots.default" :class="cn(dialogCloseTrigger, className)" v-bind="{ ...props }">
<X class="size-4" />
</Button>
<template v-else>
<slot v-if="asChild" />
<Button v-else :class="cn(buttonVariants({ look, variant, size, className }), className)
">
<slot />
</Button>
</template>
</Slot>
</template>
fe/src/components/ui/dialog/DialogContent.vue
+38
View File
@@ -0,0 +1,38 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { dialogContent } from "@mykopkb/core/styles/dialog.styles";
import { Box } from "@/components/ui/box";
import { DialogBackdrop, DialogPositioner } from "@/components/ui/dialog";
import type { Api } from "@zag-js/dialog";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("dialogApi");
</script>
<template>
<Teleport to="body">
<DialogBackdrop />
<DialogPositioner>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getContentProps() }">
<slot v-if="asChild" />
<div v-else>
<Box raised="double" :class="cn(dialogContent, className)" v-bind="{ ...props }">
<div>
<slot />
</div>
</Box>
</div>
</Slot>
</DialogPositioner>
</Teleport>
</template>
fe/src/components/ui/dialog/DialogDescription.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { dialogDescription } from "@mykopkb/core/styles/dialog.styles";
import type { Api } from "@zag-js/dialog";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("dialogApi");
</script>
<template>
<Slot :class="cn(dialogDescription, className)" v-bind="{ ...props, ...$attrs, ...api?.getDescriptionProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/dialog/DialogPositioner.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { dialogPositioner } from "@mykopkb/core/styles/dialog.styles";
import type { Api } from "@zag-js/dialog";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("dialogApi");
</script>
<template>
<Slot :class="cn(dialogPositioner, className)" v-bind="{ ...props, ...$attrs, ...api?.getPositionerProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/dialog/DialogRoot.vue
+36
View File
@@ -0,0 +1,36 @@
<script lang="ts" setup>
import { provide, computed } from "vue";
import * as dialog from "@zag-js/dialog";
import type { Props } from "@zag-js/dialog";
import { useMachine, normalizeProps } from "@zag-js/vue";
const {
class: className,
asChild = false,
open = undefined,
closeOnInteractOutside = undefined,
...props
} = defineProps<
Partial<Props> & {
class?: string;
asChild?: boolean;
}
>();
const service = useMachine(dialog.machine, {
...props,
get open() {
return open;
},
closeOnInteractOutside,
id: crypto.randomUUID(),
});
const api = computed(() => dialog.connect(service, normalizeProps));
provide("dialogApi", api);
</script>
<template>
<slot />
</template>
fe/src/components/ui/dialog/DialogTitle.vue
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { dialogTitle } from "@mykopkb/core/styles/dialog.styles";
import type { Api } from "@zag-js/dialog";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("dialogApi");
</script>
<template>
<Slot :class="cn(dialogTitle, className)" v-bind="{ ...props, ...$attrs, ...api?.getTitleProps() }">
<slot v-if="asChild" />
<div v-else>
<slot />
</div>
</Slot>
</template>
fe/src/components/ui/dialog/DialogTrigger.vue
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { dialogTrigger } from "@mykopkb/core/styles/dialog.styles";
import { Button } from "@/components/ui/button";
import type { Api } from "@zag-js/dialog";
import { inject } from "vue";
import { Slot } from "@/components/ui/slot";
const {
class: className,
asChild = false,
...props
} = defineProps<{
class?: string;
asChild?: boolean;
}>();
const api = inject<Api>("dialogApi");
</script>
<template>
<Slot v-bind="{ ...props, ...$attrs, ...api?.getTriggerProps() }">
<Button variant="secondary" look="outline" v-if="!asChild" :class="cn(dialogTrigger, className)">
<slot />
</Button>
<slot v-else />
</Slot>
</template>
fe/src/components/ui/dialog/index.ts
+8
View File
@@ -0,0 +1,8 @@
export { default as DialogRoot } from "./DialogRoot.vue";
export { default as DialogTrigger } from "./DialogTrigger.vue";
export { default as DialogBackdrop } from "./DialogBackdrop.vue";
export { default as DialogPositioner } from "./DialogPositioner.vue";
export { default as DialogContent } from "./DialogContent.vue";
export { default as DialogTitle } from "./DialogTitle.vue";
export { default as DialogDescription } from "./DialogDescription.vue";
export { default as DialogCloseTrigger } from "./DialogCloseTrigger.vue";
fe/src/components/ui/field/Field.vue
+24
View File
@@ -0,0 +1,24 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import {
fieldVariants,
type FieldVariants,
} from "@mykopkb/core/styles/field.styles";
const {
class: className,
orientation = "vertical",
...props
} = defineProps<
FieldVariants & {
class?: string;
}
>();
</script>
<template>
<div role="group" data-part="field" :data-orientation="orientation"
:class="cn(fieldVariants({ orientation }), className)" v-bind="{ ...props }">
<slot />
</div>
</template>
fe/src/components/ui/field/FieldContent.vue
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { fieldContent } from "@mykopkb/core/styles/field.styles";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
</script>
<template>
<div data-part="field-content" :class="cn(fieldContent, className)" v-bind="{ ...props }">
<slot />
</div>
</template>
fe/src/components/ui/field/FieldDescription.vue
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { fieldDescription } from "@mykopkb/core/styles/field.styles";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
</script>
<template>
<p data-part="field-description" :class="cn(fieldDescription, className)" v-bind="{ ...props }">
<slot />
</p>
</template>
fe/src/components/ui/field/FieldError.vue
+32
View File
@@ -0,0 +1,32 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { fieldError } from "@mykopkb/core/styles/field.styles";
import { computed } from "vue";
const {
class: className,
errors,
...props
} = defineProps<{
class?: string;
errors?: Array<{ message?: string } | undefined>;
}>();
const uniqueErrors = computed(() => {
const err = [
...new Map(errors?.map((error) => [error?.message, error])).values(),
];
if (err?.length == 1) {
return err[0]?.message;
}
});
</script>
<template>
<div role="alert" data-part="field-error" :class="cn(fieldError, className)" v-bind="{ ...props }">
<slot v-if="$slots.default" />
<ul v-else>
<li v-for="(error, index) in uniqueErrors" :key="index">{{ error }}</li>
</ul>
</div>
</template>
fe/src/components/ui/field/FieldGroup.vue
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { fieldGroup } from "@mykopkb/core/styles/field.styles";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
</script>
<template>
<div data-part="field-group" :class="cn(fieldGroup, className)" v-bind="{ ...props }">
<slot />
</div>
</template>
fe/src/components/ui/field/FieldLabel.vue
+15
View File
@@ -0,0 +1,15 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { Label } from "@/components/ui/label";
import { fieldLabel } from "@mykopkb/core/styles/field.styles";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
</script>
<template>
<Label data-part="field-label" :class="cn(fieldLabel, className)" v-bind="{ ...props }">
<slot />
</Label>
</template>
fe/src/components/ui/field/FieldLegend.vue
+19
View File
@@ -0,0 +1,19 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { fieldLegend } from "@mykopkb/core/styles/field.styles";
const {
class: className,
variant = "legend",
...props
} = defineProps<{
class?: string;
variant?: "legend" | "label";
}>();
</script>
<template>
<legend data-part="field-legend" :data-variant="variant" :class="cn(fieldLegend, className)" v-bind="{ ...props }">
<slot />
</legend>
</template>
fe/src/components/ui/field/FieldSeparator.vue
+19
View File
@@ -0,0 +1,19 @@
<script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { fieldSeparator } from "@mykopkb/core/styles/field.styles";
import { Separator } from "@/components/ui/separator";
const { class: className, ...props } = defineProps<{
class?: string;
}>();
</script>
<template>
<div data-part="field-separator" :data-content="!!$slots.default" :class="cn(fieldSeparator, className)"
v-bind="{ ...props }">
<Separator class="absolute inset-0 top-1/2" />
<span v-if="$slots.default" data-part="field-separator-content">
<slot />
</span>
</div>
</template>

Some files were not shown because too many files have changed in this diff Show More