Added skeleton name display on dialog

components/calendar/form/Create.vue

@@ -1,21 +1,15 @@
 <script lang="ts" setup>
 import type { Calendar } from '~/models/CalendarConfig';
-
 import { PhAlarm, PhCalendarDots, PhWrench } from '@phosphor-icons/vue';
 
 const defaultSkeleton: Calendar = { name: '', today: { day: 1, month: 0, year: 0 }, months: [], events: []}
-
 const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
 
-async function handleSubmit() {
-  await $fetch(`/api/calendars/create`, { method: 'POST', body: {...calendarSkeleton.value, worldId: 1 } })
-}
-
 onMounted(() => {
   calendarSkeleton.value = { ...defaultSkeleton }
 })
 
-type FormTabs = 'global' | 'months' | 'today' | 'seasons'
+type FormTabs = 'global' | 'months' | 'today'
 const activeTab = ref<FormTabs>('global')
 
 /**
@@ -35,20 +29,32 @@ watch(calendarSkeleton.value.months, () => {
  * === Form Validation ===
  */
 
-/**
- * Whether the skeleton has valid month data
- */
+/** Whether the skeleton has valid month data */
 const validSkeletonMonths = computed(() => calendarSkeleton.value.months.length > 0)
 
-/**
- * Whether the skeleton has a valid name
- */
+/** Whether the skeleton has a valid name */
 const validSkeletonGeneral = computed(() => calendarSkeleton.value.name)
 
-/**
- * Whether all the data checks above are a-ok
- */
+/** Whether all the data checks above are a-ok */
 const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeletonMonths.value)
+
+/** Send the data to the store for validation */
+async function handleSubmit() {
+  await $fetch(`/api/calendars/create`, { method: 'POST', body: {...calendarSkeleton.value, worldId: 1 } })
+}
+
+/**
+ * === Watch for name changes to display above ===
+ */
+const emit = defineEmits<{
+  // eslint-disable-next-line no-unused-vars
+  (e: 'changed-name', calendarName: string): void
+}>()
+
+/** Hook to emit a debounced event for the changed skeleton name */
+const handleNameChange = useDebounceFn(() => {
+  emit('changed-name', calendarSkeleton.value.name)
+}, 400)
 </script>
 
 <template>
@@ -74,12 +80,6 @@ const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeleton
               Aujourd'hui
             </div>
           </UiTabsTrigger>
-          <!-- <UiTabsTrigger value="seasons" class="font-bold">
-            <div class="flex items-center gap-1">
-              <PhLeaf size="18" weight="fill" />
-              Saisons
-            </div>
-          </UiTabsTrigger> -->
         </UiTabsList>
         <UiTabsContent value="global">
           <input
@@ -90,6 +90,7 @@ const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeleton
             required
             placeholder="Titre"
             class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            @input="handleNameChange"
           >
         </UiTabsContent>
         <UiTabsContent value="months">
@@ -98,7 +99,6 @@ const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeleton
         <UiTabsContent value="today">
           <CalendarInputTodaySelect v-model:model-value="calendarSkeleton.today" :available-months="calendarSkeleton.months"/>
         </UiTabsContent>
-        <UiTabsContent value="seasons" />
       </UiTabs>
 
       <footer class="text-right mt-6">