diff --git a/playground/App.vue b/playground/App.vue
index 4091c72..b2c413b 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import {SingleWeekPicker} from '../src'
-import {ref} from 'vue'
-
-const value = ref({weekYear: 2022, weekNum: 1})
+import { SingleWeekPicker } from '../src'
 </script>
 
 <template>
   <div class="container">
-    <SingleWeekPicker v-model="value" />
+    <SingleWeekPicker />
   </div>
 </template>
 
diff --git a/src/components/SingleDatePicker.vue b/src/components/SingleDatePicker.vue
index 15f6a99..e561b4d 100644
--- a/src/components/SingleDatePicker.vue
+++ b/src/components/SingleDatePicker.vue
@@ -1,3 +1,15 @@
+<script lang="ts">
+/** 
+ * @name SingleDatePicker
+ * @description A panel that allows users to select a date.
+ * @component
+ * @see {@link https://datenel.js.org/guide/vue/components/SingleDatePicker.html}
+ */
+export default {
+	name: 'SingleDatePicker',
+}
+</script>
+
 <script setup lang="ts">
 	import { ref, defineProps, watch, onMounted, toRefs, getCurrentInstance, PropType } from 'vue'
 	import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates } from '../utils'
diff --git a/src/components/SingleWeekPicker.vue b/src/components/SingleWeekPicker.vue
index e1f3e67..4bae177 100644
--- a/src/components/SingleWeekPicker.vue
+++ b/src/components/SingleWeekPicker.vue
@@ -1,3 +1,15 @@
+<script lang="ts">
+/** 
+ * @name SingleWeekPicker
+ * @description A panel that allows users to select a week.
+ * @component
+ * @see {@link https://datenel.js.org/guide/vue/components/SingleWeekPicker.html}
+ */
+export default {
+	name: 'SingleDatePicker',
+}
+</script>
+
 <script setup lang="ts">
 import { ref, defineProps, toRefs, onMounted, getCurrentInstance, watch } from 'vue'
 import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates, calculateWeekNum } from '../utils'