ISMAIL MASSERAN
352 lines
11 KiB
Vue
352 lines
11 KiB
Vue
<script lang="ts" setup>
|
|
import { ChevronDown, CheckSquare } from "@lucide/vue";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Preview,
|
|
SectionTitle,
|
|
SectionContent,
|
|
PreviewCode,
|
|
} from "@/components/docs";
|
|
</script>
|
|
|
|
<template>
|
|
<div id="preview" class="-mt-20">
|
|
<Preview>
|
|
<template #preview>
|
|
<Badge variant="primary">12%</Badge>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge variant="primary">12%</Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
</div>
|
|
<div id="installation">
|
|
<SectionTitle>Installation</SectionTitle>
|
|
<SectionContent>
|
|
Copy and paste the following code into your project.
|
|
</SectionContent>
|
|
<PreviewCode title="components/ui/badge/Badge.vue">
|
|
{{ `
|
|
<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>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/badge/index.ts">
|
|
{{ `
|
|
export { default as Badge } from "./Badge.vue";
|
|
` }}
|
|
</PreviewCode>
|
|
<SectionContent>
|
|
Update the import paths to match your project setup.
|
|
</SectionContent>
|
|
</div>
|
|
<div id="usage">
|
|
<SectionTitle>Usage</SectionTitle>
|
|
<PreviewCode>
|
|
{{ `
|
|
import { Badge } from "@/components/ui/badge";
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge>12%</Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</div>
|
|
<div id="variants">
|
|
<SectionTitle>Variants</SectionTitle>
|
|
<SectionContent>A collection of components you can use.</SectionContent>
|
|
<Preview>
|
|
<template #preview>
|
|
<Badge variant="primary">12%</Badge>
|
|
<Badge variant="secondary">12%</Badge>
|
|
<Badge variant="success">12%</Badge>
|
|
<Badge variant="danger">12%</Badge>
|
|
<Badge variant="pending">12%</Badge>
|
|
<Badge variant="warning">12%</Badge>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge variant="primary">12%</Badge>
|
|
<Badge variant="secondary">12%</Badge>
|
|
<Badge variant="success">12%</Badge>
|
|
<Badge variant="danger">12%</Badge>
|
|
<Badge variant="pending">12%</Badge>
|
|
<Badge variant="warning">12%</Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview>
|
|
<template #preview>
|
|
<Badge variant="primary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="secondary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="success"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="danger"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="pending"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="warning"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge variant="primary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="secondary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="success"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="danger"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="pending"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge variant="warning"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview>
|
|
<template #preview>
|
|
<Badge look="outline" variant="primary"> 12% </Badge>
|
|
<Badge look="outline" variant="secondary"> 12% </Badge>
|
|
<Badge look="outline" variant="success"> 12% </Badge>
|
|
<Badge look="outline" variant="danger"> 12% </Badge>
|
|
<Badge look="outline" variant="pending"> 12% </Badge>
|
|
<Badge look="outline" variant="warning"> 12% </Badge>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge look="outline" variant="primary"> 12% </Badge>
|
|
<Badge look="outline" variant="secondary"> 12% </Badge>
|
|
<Badge look="outline" variant="success"> 12% </Badge>
|
|
<Badge look="outline" variant="danger"> 12% </Badge>
|
|
<Badge look="outline" variant="pending"> 12% </Badge>
|
|
<Badge look="outline" variant="warning"> 12% </Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview>
|
|
<template #preview>
|
|
<Badge look="outline" variant="primary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="secondary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="success"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="danger"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="pending"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="warning"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge look="outline" variant="primary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="secondary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="success"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="danger"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="pending"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="outline" variant="warning"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview>
|
|
<template #preview>
|
|
<Badge look="filled" variant="primary"> 12% </Badge>
|
|
<Badge look="filled" variant="secondary"> 12% </Badge>
|
|
<Badge look="filled" variant="success"> 12% </Badge>
|
|
<Badge look="filled" variant="danger"> 12% </Badge>
|
|
<Badge look="filled" variant="pending"> 12% </Badge>
|
|
<Badge look="filled" variant="warning"> 12% </Badge>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge look="filled" variant="primary"> 12% </Badge>
|
|
<Badge look="filled" variant="secondary"> 12% </Badge>
|
|
<Badge look="filled" variant="success"> 12% </Badge>
|
|
<Badge look="filled" variant="danger"> 12% </Badge>
|
|
<Badge look="filled" variant="pending"> 12% </Badge>
|
|
<Badge look="filled" variant="warning"> 12% </Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview>
|
|
<template #preview>
|
|
<Badge look="filled" variant="primary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="secondary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="success"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="danger"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="pending"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="warning"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge look="filled" variant="primary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="secondary"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="success"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="danger"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="pending"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
<Badge look="filled" variant="warning"> 12%
|
|
<ChevronDown />
|
|
</Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview>
|
|
<template #preview>
|
|
<Badge look="outline" variant="primary" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="secondary" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="success" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="danger" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="pending" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="warning" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Badge look="outline" variant="primary" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="secondary" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="success" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="danger" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="pending" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
<Badge look="outline" variant="warning" content="12% Higher than last month">
|
|
<CheckSquare /> 12%
|
|
</Badge>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
</div>
|
|
</template>
|