ISMAIL MASSERAN
70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
Preview,
|
|
SectionTitle,
|
|
SectionContent,
|
|
PreviewCode,
|
|
} from "@/components/docs";
|
|
</script>
|
|
|
|
<template>
|
|
<div id="preview" class="-mt-20">
|
|
<Preview>
|
|
<template #preview>
|
|
<Textarea class="w-86" placeholder="Type your message here." />
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Textarea class="w-86" placeholder="Type your message here." />
|
|
` }}
|
|
</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/textarea/Textarea.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { textarea } from "@mykopkb/core/styles/textarea.styles";
|
|
|
|
const { class: className, ...props } = defineProps<{
|
|
class?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<textarea :class="cn(textarea, className)" v-bind="{ ...props }" />
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/textarea/index.ts">
|
|
{{ `
|
|
export { default as Textarea } from "./Textarea.vue";
|
|
` }}
|
|
</PreviewCode>
|
|
<SectionContent>
|
|
Update the import paths to match your project setup.
|
|
</SectionContent>
|
|
</div>
|
|
<div id="usage">
|
|
<SectionTitle>Usage</SectionTitle>
|
|
<PreviewCode>
|
|
{{ `
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode>
|
|
{{ `
|
|
<Textarea class="w-86" placeholder="Type your message here." />
|
|
` }}
|
|
</PreviewCode>
|
|
</div>
|
|
</template>
|