first init
This commit is contained in:
ISMAIL MASSERAN
@@ -0,0 +1,351 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user