Merge pull request #80 from AlexisNP/ui/event-visibility-checkbox

UI/event visibility checkbox

components/calendar/form/CreateEvent.vue

@@ -155,14 +155,9 @@ function handleCancel() {
           <PhEyeClosed v-else size="18" />
 
           <div class="flex items-center gap-x-2">
-            <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
+            <UiCheckbox id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
             <UiLabel for="new-event-visibility">
-              <template v-if="!eventSkeleton.hidden">
-                {{ $t('entity.calendar.event.isPublic') }}
-              </template>
-              <template v-else>
-                {{ $t('entity.calendar.event.isHidden') }}
-              </template>
+              {{ $t('entity.calendar.event.hiddenLabel') }}
             </UiLabel>
           </div>
         </div>

components/ui/checkbox/Checkbox.vue

@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <slot>
-        <PhCheck class="size-4" />
+        <PhCheck size="10" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

i18n/i18n.config.ts

@@ -208,6 +208,7 @@ export default defineI18nConfig(() => ({
             isEnd: "End",
             isHidden: "Hidden",
             isPublic: "Public",
+            hiddenLabel: "Hide this event",
             hiddenTooltip: "This event is visible only to game masters.",
             addLocation: "Add a place",
             prevPage: "Previous page with events",
@@ -532,6 +533,7 @@ export default defineI18nConfig(() => ({
             isEnd: "Fin",
             isHidden: "Privé",
             isPublic: "Public",
+            hiddenLabel: "Rendre l'évènement privé",
             hiddenTooltip: "Cet évènement est uniquement visible pour les maîtres du jeu.",
             addLocation: "Ajouter un endroit",
             prevPage: "Précédente page à évènements",

stores/CalendarStore.ts

@@ -836,13 +836,13 @@ export const useCalendar = defineStore("calendar", () => {
   /**
    * Dummy event to hold creation data
    */
-  const eventSkeleton = ref<CalendarEvent>({ title: "", startDate: defaultDate.value })
+  const eventSkeleton = ref<CalendarEvent>({ title: "", startDate: defaultDate.value, hidden: false })
 
   /**
    * Resets the dummy event data
    */
   function resetSkeleton() {
-    eventSkeleton.value = { title: "", startDate: defaultDate.value }
+    eventSkeleton.value = { title: "", startDate: defaultDate.value, hidden: false }
   }
 
   /**