ISMAIL MASSERAN
640 lines
21 KiB
Vue
640 lines
21 KiB
Vue
<script lang="ts" setup>
|
|
import {
|
|
AlertRoot,
|
|
AlertTitle,
|
|
AlertDescription,
|
|
AlertCloseTrigger,
|
|
} from "@/components/ui/alert";
|
|
import {
|
|
Preview,
|
|
SectionTitle,
|
|
SectionContent,
|
|
InstallPackage,
|
|
PreviewCode,
|
|
} from "@/components/docs";
|
|
import { Compass } from "@lucide/vue";
|
|
import { Box } from "@/components/ui/box";
|
|
</script>
|
|
|
|
<template>
|
|
<div id="preview" class="-mt-20">
|
|
<Preview>
|
|
<template #preview>
|
|
<AlertRoot variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<AlertRoot variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
</div>
|
|
<div id="installation">
|
|
<SectionTitle>Installation</SectionTitle>
|
|
<SectionContent>Install the following dependencies:</SectionContent>
|
|
<InstallPackage>add @zag-js/vue @zag-js/alert</InstallPackage>
|
|
<SectionContent>
|
|
Copy and paste the following code into your project.
|
|
</SectionContent>
|
|
<PreviewCode title="components/ui/alert/AlertCloseTrigger.vue">
|
|
{{`
|
|
<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>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/alert/AlertDescription.vue">
|
|
{{ `
|
|
<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>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/alert/AlertRoot.vue">
|
|
{{`
|
|
<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>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/alert/AlertTitle.vue">
|
|
{{ `
|
|
<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>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/alert/index.ts">
|
|
{{ `
|
|
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";
|
|
` }}
|
|
</PreviewCode>
|
|
<SectionContent>
|
|
Update the import paths to match your project setup.
|
|
</SectionContent>
|
|
</div>
|
|
<div id="usage">
|
|
<SectionTitle>Usage</SectionTitle>
|
|
<PreviewCode>
|
|
{{ `
|
|
import {
|
|
AlertRoot,
|
|
AlertTitle,
|
|
AlertDescription,
|
|
AlertCloseTrigger,
|
|
} from "@/components/ui/alert";
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode>
|
|
{{ `
|
|
<AlertRoot>
|
|
<Compass />
|
|
<AlertTitle>
|
|
Success! Your changes have been saved
|
|
</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</div>
|
|
<div id="variants">
|
|
<SectionTitle>Variants</SectionTitle>
|
|
<SectionContent>A collection of components you can use.</SectionContent>
|
|
<Preview class="flex-col!">
|
|
<template #preview>
|
|
<AlertRoot variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="secondary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="success">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="danger">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="pending">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="warning">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<AlertRoot variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="secondary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="success">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="danger">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="pending">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="warning">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview class="flex-col!">
|
|
<template #preview>
|
|
<AlertRoot look="filled" variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="secondary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="success">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="danger">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="pending">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="warning">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<AlertRoot look="filled" variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="secondary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="success">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="danger">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="pending">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="warning">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview class="flex-col!">
|
|
<template #preview>
|
|
<AlertRoot variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="secondary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="success">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="danger">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="pending">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="warning">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<AlertRoot variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="secondary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="success">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="danger">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="pending">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
<AlertRoot variant="warning">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview class="flex-col!">
|
|
<template #preview>
|
|
<AlertRoot look="filled" variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="secondary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="success">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="danger">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="pending">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="warning">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<AlertRoot look="filled" variant="primary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="secondary">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="success">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="danger">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="pending">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
<AlertRoot look="filled" variant="warning">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
</AlertRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview class="flex-col!">
|
|
<template #preview>
|
|
<Box class="p-0">
|
|
<AlertRoot variant="ghost">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</Box>
|
|
<Box class="p-0" raised="single">
|
|
<AlertRoot variant="ghost">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</Box>
|
|
<Box class="p-0" raised="double">
|
|
<AlertRoot variant="ghost">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</Box>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Box class="p-0">
|
|
<AlertRoot variant="ghost">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</Box>
|
|
<Box class="p-0" raised="single">
|
|
<AlertRoot variant="ghost">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</Box>
|
|
<Box class="p-0" raised="double">
|
|
<AlertRoot variant="ghost">
|
|
<Compass />
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
<AlertCloseTrigger />
|
|
</AlertRoot>
|
|
</Box>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
</div>
|
|
</template>
|