first init

2026-06-08 11:37:14 +08:00
commit 94ecbe5887
1058 changed files with 87732 additions and 0 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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";