From 415661e0a5f5e64e8ab41c38d2be0192048661e3 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 8 Dec 2024 20:34:52 +0100
Subject: [PATCH] chore(ui-docs): boolean variables start with 'is'

---
 front/src/components/ui/Modal.vue      |  6 +-
 front/ui-docs/components/ui/modal.md   | 76 +++++++++++++-------------
 front/ui-docs/components/ui/popover.md | 14 ++---
 3 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index 51ef88745..1a58d0b94 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -2,17 +2,17 @@
 import Button from '~/components/ui/Button.vue'
 
 const { title } = defineProps<{ title:string }>()
-const open = defineModel<boolean>({ required: true })
+const isOpen = defineModel<boolean>({ required: true })
 </script>
 
 <template>
   <Teleport to="body">
     <Transition mode="out-in">
-      <div v-if="open" @click.exact.stop="open = false" class="funkwhale overlay">
+      <div v-if="isOpen" @click.exact.stop="isOpen = false" class="funkwhale overlay">
         <div @click.stop class="funkwhale modal" :class="$slots.alert && 'has-alert'" >
           <h2>
             {{ title }}
-            <Button icon="bi-x-lg" color="secondary" variant="ghost" @click="open = false" />
+            <Button icon="bi-x-lg" color="secondary" variant="ghost" @click="isOpen = false" />
           </h2>
 
           <div class="modal-content">
diff --git a/front/ui-docs/components/ui/modal.md b/front/ui-docs/components/ui/modal.md
index ea66548f9..d4eeb56be 100644
--- a/front/ui-docs/components/ui/modal.md
+++ b/front/ui-docs/components/ui/modal.md
@@ -5,45 +5,45 @@ import Alert from '~/components/ui/Alert.vue'
 import Button from '~/components/ui/Button.vue'
 import Modal from '~/components/ui/Modal.vue'
 
-const open = ref(false)
-const open2 = ref(false)
+const isOpen = ref(false)
+const isOpen2 = ref(false)
 
-const open3 = ref(false)
+const isOpen3 = ref(false)
 const alertOpen = ref(true)
 watchEffect(() => {
-  if (open3.value === false) {
+  if (isOpen3.value === false) {
     alertOpen.value = true
     }
 })
 
-const open4 = ref(false)
-const open5 = ref(false)
+const isOpen4 = ref(false)
+const isOpen5 = ref(false)
 
 </script>
 
 # Modal
 
-| Prop      | Data type         | Required? | Default | Description                      |
-| --------- | ----------------- | --------- | ------- | -------------------------------- |
-| `title`   | `string`          | Yes       |         | The modal title                  |
-| `v-model` | `true` \| `false` | Yes       |         | Whether the modal is open or not |
+| Prop      | Data type         | Required? | Default | Description                        |
+| --------- | ----------------- | --------- | ------- | ---------------------------------- |
+| `title`   | `string`          | Yes       |         | The modal title                    |
+| `v-model` | `true` \| `false` | Yes       |         | Whether the modal is isOpen or not |
 
-## Modal open
+## Modal isOpen
 
 ```vue-html
-<Modal v-model="open" title="My modal">
+<Modal v-model="isOpen" title="My modal">
   Modal content
 </Modal>
 
-<Button @click="open = true">
+<Button @click="isOpen = true">
   Open modal
 </Button>
 ```
 
-<Modal v-model="open" title="My modal">
+<Modal v-model="isOpen" title="My modal">
   Modal content
 </Modal>
-<Button @click="open = true">
+<Button @click="isOpen = true">
   Open modal
 </Button>
 
@@ -52,69 +52,69 @@ const open5 = ref(false)
 Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](./button).
 
 ```vue-html
-<Modal v-model="open" title="My modal">
+<Modal v-model="isOpen" title="My modal">
   Modal content
 
   <template #actions>
-    <Button @click="open = false" color="secondary">
+    <Button @click="isOpen = false" color="secondary">
       Cancel
     </Button>
 
-    <Button @click="open = false">
+    <Button @click="isOpen = false">
       Ok
     </Button>
   </template>
 </Modal>
 
-<Button @click="open = true">
+<Button @click="isOpen = true">
   Open modal
 </Button>
 ```
 
-<Modal v-model="open2" title="My modal">
+<Modal v-model="isOpen2" title="My modal">
   Modal content
   <template #actions>
-    <Button @click="open2 = false" color="secondary">
+    <Button @click="isOpen2 = false" color="secondary">
       Cancel
     </Button>
-    <Button @click="open2 = false">
+    <Button @click="isOpen2 = false">
       Ok
     </Button>
   </template>
 </Modal>
-<Button @click="open2 = true">
+<Button @click="isOpen2 = true">
   Open modal
 </Button>
 
 ## Nested modals
 
-You can nest modals to allow users to open a modal from inside another modal. This can be useful when creating a multi-step workflow.
+You can nest modals to allow users to isOpen a modal from inside another modal. This can be useful when creating a multi-step workflow.
 
 ```vue-html
-<Modal v-model="open" title="My modal">
-  <Modal v-model="openNested" title="My modal">
+<Modal v-model="isOpen" title="My modal">
+  <Modal v-model="isOpenNested" title="My modal">
     Nested modal content
   </Modal>
 
-  <Button @click="openNested = true">
+  <Button @click="isOpenNested = true">
     Open nested modal
   </Button>
 </Modal>
 
-<Button @click="open = true">
+<Button @click="isOpen = true">
   Open modal
 </Button>
 ```
 
-<Modal v-model="open4" title="My modal">
-  <Modal v-model="open5" title="My modal">
+<Modal v-model="isOpen4" title="My modal">
+  <Modal v-model="isOpen5" title="My modal">
     Nested modal content
   </Modal>
-  <Button @click="open5 = true">
+  <Button @click="isOpen5 = true">
     Open nested modal
   </Button>
 </Modal>
-<Button @click="open4 = true">
+<Button @click="isOpen4 = true">
   Open modal
 </Button>
 
@@ -123,7 +123,7 @@ You can nest modals to allow users to open a modal from inside another modal. Th
 You can nest [Funkwhale alerts](./alert) to visually highlight content within the modal.
 
 ```vue-html
-<Modal v-model="open" title="My modal">
+<Modal v-model="isOpen" title="My modal">
   Modal content
 
   <template #alert v-if="alertOpen">
@@ -137,12 +137,12 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
   </template>
 </Modal>
 
-<Button @click="open = true">
+<Button @click="isOpen = true">
   Open modal
 </Button>
 ```
 
-<Modal v-model="open3" title="My modal">
+<Modal v-model="isOpen3" title="My modal">
   Modal content
   <template #alert v-if="alertOpen">
     <Alert>
@@ -153,14 +153,14 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
     </Alert>
   </template>
   <template #actions>
-    <Button @click="open3 = false" color="secondary">
+    <Button @click="isOpen3 = false" color="secondary">
       Cancel
     </Button>
-    <Button @click="open3 = false">
+    <Button @click="isOpen3 = false">
       Ok
     </Button>
   </template>
 </Modal>
-<Button @click="open3 = true">
+<Button @click="isOpen3 = true">
   Open modal
 </Button>
diff --git a/front/ui-docs/components/ui/popover.md b/front/ui-docs/components/ui/popover.md
index 1c0233f31..4dd5f8986 100644
--- a/front/ui-docs/components/ui/popover.md
+++ b/front/ui-docs/components/ui/popover.md
@@ -37,7 +37,7 @@ const seperatorMenu = ref(false)
 const subMenu = ref(false)
 const extraItemsMenu = ref(false)
 const fullMenu= ref(false)
-const open = ref(false)
+const isOpen = ref(false)
 </script>
 
 # Popover (Dropdown Menu)
@@ -85,14 +85,14 @@ const bcPrivacy = ref('pod')
 </script>
 
 <template>
-  <Popover v-model:open="open">
+  <Popover v-model:open="isOpen">
     <template #default="{ toggleOpen }">
       <Pill
       @click="(e) => {
         console.log('Pill clicked');
-        console.log('Before toggleOpen:', open);
+        console.log('Before toggleOpen:', isOpen);
         toggleOpen();
-        console.log('After toggleOpen:', open);
+        console.log('After toggleOpen:', isOpen);
       }"
         :blue="bcPrivacy === 'pod'"
         :red="bcPrivacy === 'public'"
@@ -107,14 +107,14 @@ const bcPrivacy = ref('pod')
 </template>
 ```
 
-<Popover v-model:open="open">
+<Popover v-model:open="isOpen">
   <template #default="{ toggleOpen }">
     <Pill
     @click="(e) => {
       console.log('Pill clicked');
-      console.log('Before toggleOpen:', open);
+      console.log('Before toggleOpen:', isOpen);
       toggleOpen();
-      console.log('After toggleOpen:', open);
+      console.log('After toggleOpen:', isOpen);
     }"
       :blue="bcPrivacy === 'pod'"
       :red="bcPrivacy === 'public'"