30 lines
987 B
Vue
30 lines
987 B
Vue
<template>
|
|
<div>
|
|
<!-- Basic usage -->
|
|
<h1 class="font-bold text-[25px] text-accent-foreground">Basic</h1>
|
|
<DateSelector v-model="date" />
|
|
|
|
<!-- With custom width -->
|
|
<h1 class="font-bold text-[25px] text-accent-foreground">Custom Width</h1>
|
|
<DateSelector v-model="date" classValue="w-full" />
|
|
|
|
<!-- Start in BS mode -->
|
|
<h1 class="font-bold text-[25px] text-accent-foreground">Default BS</h1>
|
|
<DateSelector v-model="date" :isBS="true" />
|
|
|
|
<!-- Without toggle button -->
|
|
<h1 class="font-bold text-[25px] text-accent-foreground">Toggle Removed</h1>
|
|
<DateSelector v-model="date" :showToggle="false" />
|
|
|
|
<!-- Disabled state -->
|
|
<h1 class="font-bold text-[25px] text-accent-foreground">Disabled</h1>
|
|
<DateSelector v-model="date" :disabled="true" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
const date = ref("2025-04-06");
|
|
</script>
|