From e5ae8cbb1c0e288d7c87840819739febf30cfbb6 Mon Sep 17 00:00:00 2001
From: Paul Vilalta <vilaltapaul@gmail.com>
Date: Tue, 3 Jan 2023 16:34:54 +0100
Subject: [PATCH 1/3] first draw

---
 .../BIMDataMenu/BIMDataMenu.vue               | 34 +++++++++++++++--
 .../BIMDataMenu/_BIMDataMenu.scss             |  3 ++
 src/web/views/Components/Menu/BasicMenu.vue   | 37 ++++++++++++++++++-
 3 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
index 357d595f..24f5c593 100644
--- a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
+++ b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
@@ -8,6 +8,7 @@
       :class="[
         item.divider ? 'bimdata-menu__item--divider' : '',
         { hover: isItemHover && currentItemText === item.text },
+        hasNoChildren(item) ? 'bimdata-menu__item--no-children' : '',
       ]"
       @click.stop="onClick(item)"
       @mouseover="onMouseOver(item)"
@@ -26,14 +27,32 @@
         :style="{
           'background-color':
             isItemHover && currentItemText === item.text ? item.background : '',
+          display: 'flex',
         }"
       >
         <slot name="item" :item="item">
-          <BIMDataTextbox :text="item.text" />
+          <BIMDataTextbox
+            :text="item.text"
+            :style="{
+              order: childrenLeft ? 2 : 1,
+              marginLeft: childrenLeft
+                ? item.children
+                  ? '11px'
+                  : '24px'
+                : 'auto',
+            }"
+          />
         </slot>
         <template v-if="item.children">
           <slot name="children">
-            <BIMDataIcon name="chevron" size="xxs" />
+            <BIMDataIcon
+              name="chevron"
+              size="xxs"
+              :rotate="childrenLeft ? 180 : 0"
+              :style="{
+                order: childrenLeft ? 1 : 2,
+              }"
+            />
             <ul
               :ref="`children-${item.text}`"
               class="bimdata-menu__item__children"
@@ -45,15 +64,20 @@
                 maxHeight: subListMaxHeight,
                 width: subListWidth,
                 top: `${definePos(item)}px`,
+                left: childrenLeft ? '-200px' : '100%',
               }"
             >
+              <slot name="child-header" :children="item.children" />
               <li
                 v-for="child in item.children.list"
                 :key="child.text"
                 @click.stop="child.action && child.action()"
               >
-                <BIMDataTextbox :text="child.text" />
+                <slot name="child-item" :child="child">
+                  <BIMDataTextbox :text="child.text" />
+                </slot>
               </li>
+              <slot name="child-footer" :children="item.children" />
             </ul>
           </slot>
         </template>
@@ -97,6 +121,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    childrenLeft: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["item-click"],
   data() {
diff --git a/src/BIMDataComponents/BIMDataMenu/_BIMDataMenu.scss b/src/BIMDataComponents/BIMDataMenu/_BIMDataMenu.scss
index 2e390615..f50bf515 100644
--- a/src/BIMDataComponents/BIMDataMenu/_BIMDataMenu.scss
+++ b/src/BIMDataComponents/BIMDataMenu/_BIMDataMenu.scss
@@ -48,6 +48,9 @@
         background-color: transparent;
       }
     }
+    &--no-children {
+      color: var(--color-silver-dark);
+    }
     &__children {
       overflow: auto;
       padding: calc(var(--spacing-unit) / 2) 0;
diff --git a/src/web/views/Components/Menu/BasicMenu.vue b/src/web/views/Components/Menu/BasicMenu.vue
index 7b5075b9..6fc9ae13 100644
--- a/src/web/views/Components/Menu/BasicMenu.vue
+++ b/src/web/views/Components/Menu/BasicMenu.vue
@@ -10,15 +10,31 @@
     >
       <template #module>
         <BIMDataMenu :menuItems="options" @item-click="itemClick">
+          <!-- <template #header>
+            <BIMDataCheckbox
+              style="width: 14px; margin: 0 6px 0 0"
+              :modelValue="options.length === checkedItems.length"
+              @update:modelValue="checkAllItems"
+            />
+            <span>Tout sélectionner</span>
+          </template> -->
           <template #item="{ item }">
+            <!-- <BIMDataCheckbox
+              style="width: 14px; margin: 0 6px 0 0"
+              :modelValue="checkedItems.includes(item.text)"
+              @update:modelValue="checkItem(item)"
+            /> -->
             <BIMDataIcon
               v-if="isIcons"
               :name="item.icon"
               size="xs"
               margin="0 6px 0 0"
             />
-            <span>{{ item.text }}</span>
+            <!-- <span>{{ item.text }}</span> -->
           </template>
+          <template #child-header>HEADER</template>
+          <template #child-item="{ item }">yooo</template>
+          <template #child-footer>FOOTER</template>
         </BIMDataMenu>
       </template>
       <template #parameters>
@@ -69,6 +85,8 @@ export default {
       isGroupTitle: false,
       isIcons: false,
       isChildren: false,
+      checkedItems: [],
+      console,
     };
   },
   computed: {
@@ -141,6 +159,23 @@ export default {
 
       return result(itemValue);
     },
+    checkItem({ text }) {
+      const isChecked = this.checkedItems.includes(text);
+
+      if (isChecked) {
+        const itemIndex = this.checkedItems.indexOf(text);
+        this.checkedItems.splice(itemIndex, 1);
+      } else {
+        this.checkedItems.push(text);
+      }
+      return !isChecked;
+    },
+    checkAllItems() {
+      this.checkedItems =
+        this.checkedItems.length === this.options.length
+          ? []
+          : this.options.map(item => item.text);
+    },
   },
 };
 </script>

From d55c8a34d38add664a389fed688a01ff5b6367b1 Mon Sep 17 00:00:00 2001
From: Paul Vilalta <vilaltapaul@gmail.com>
Date: Mon, 9 Jan 2023 14:49:28 +0100
Subject: [PATCH 2/3] add documentation

---
 .../BIMDataMenu/BIMDataMenu.vue               |  3 +-
 src/web/views/Components/Menu/BasicMenu.vue   | 65 ++++---------------
 .../Components/Menu/props-menu-inline.js      |  6 ++
 .../views/Components/Menu/slots-basic-menu.js |  3 +
 4 files changed, 23 insertions(+), 54 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
index 24f5c593..abd5fe8e 100644
--- a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
+++ b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
@@ -34,7 +34,6 @@
           <BIMDataTextbox
             :text="item.text"
             :style="{
-              order: childrenLeft ? 2 : 1,
               marginLeft: childrenLeft
                 ? item.children
                   ? '11px'
@@ -50,7 +49,7 @@
               size="xxs"
               :rotate="childrenLeft ? 180 : 0"
               :style="{
-                order: childrenLeft ? 1 : 2,
+                order: childrenLeft ? -1 : 0,
               }"
             />
             <ul
diff --git a/src/web/views/Components/Menu/BasicMenu.vue b/src/web/views/Components/Menu/BasicMenu.vue
index 6fc9ae13..88c94b51 100644
--- a/src/web/views/Components/Menu/BasicMenu.vue
+++ b/src/web/views/Components/Menu/BasicMenu.vue
@@ -9,32 +9,16 @@
       class="bimdata-ds__demo__silver-light"
     >
       <template #module>
-        <BIMDataMenu :menuItems="options" @item-click="itemClick">
-          <!-- <template #header>
-            <BIMDataCheckbox
-              style="width: 14px; margin: 0 6px 0 0"
-              :modelValue="options.length === checkedItems.length"
-              @update:modelValue="checkAllItems"
-            />
-            <span>Tout sélectionner</span>
-          </template> -->
+        <BIMDataMenu
+          :menuItems="options"
+          :childrenLeft="isChildrenLeft"
+          @item-click="itemClick"
+        >
           <template #item="{ item }">
-            <!-- <BIMDataCheckbox
-              style="width: 14px; margin: 0 6px 0 0"
-              :modelValue="checkedItems.includes(item.text)"
-              @update:modelValue="checkItem(item)"
-            /> -->
-            <BIMDataIcon
-              v-if="isIcons"
-              :name="item.icon"
-              size="xs"
-              margin="0 6px 0 0"
-            />
-            <!-- <span>{{ item.text }}</span> -->
+            <template v-if="isIcons">
+              <BIMDataIcon :name="item.icon" size="xs" margin="0 6px 0 0" />
+            </template>
           </template>
-          <template #child-header>HEADER</template>
-          <template #child-item="{ item }">yooo</template>
-          <template #child-footer>FOOTER</template>
         </BIMDataMenu>
       </template>
       <template #parameters>
@@ -42,6 +26,10 @@
         <BIMDataCheckbox text="Add group title" v-model="isGroupTitle" />
         <BIMDataCheckbox text="Add icons" v-model="isIcons" />
         <BIMDataCheckbox text="Add children" v-model="isChildren" />
+        <BIMDataCheckbox
+          text="Position children on the left"
+          v-model="isChildrenLeft"
+        />
       </template>
       <template #code>
         <pre>
@@ -64,11 +52,9 @@
 
 <script>
 import { basicOptions } from "./option-sets.js";
-
 import BIMDataCheckbox from "../../../../BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue";
 import BIMDataMenu from "../../../../BIMDataComponents/BIMDataMenu/BIMDataMenu.vue";
 import BIMDataIcon from "../../../../BIMDataComponents/BIMDataIcon/BIMDataIcon.vue";
-
 import BIMDataText from "../../../../BIMDataComponents/BIMDataText/BIMDataText.vue";
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 export default {
@@ -85,31 +71,26 @@ export default {
       isGroupTitle: false,
       isIcons: false,
       isChildren: false,
-      checkedItems: [],
-      console,
+      isChildrenLeft: false,
     };
   },
   computed: {
     options() {
       let opts = basicOptions.slice();
-
       if (this.isIcons) {
         const icons = ["tag", "visa", "edit", "download", "versioning", "key"];
         opts = opts.map((opt, i) => ({ ...opt, icon: icons[i] }));
       }
-
       if (this.isDivider) {
         opts[1] = { ...opts[1], divider: true };
         opts[2] = { ...opts[2], divider: true };
         opts.splice(4, 0, { divider: true });
       }
-
       if (this.isGroupTitle) {
         opts = [{ groupTitle: "Groupe 01" }, ...opts];
         opts[3] = { ...opts[3], groupTitle: "Groupe 02" };
         opts[5] = { ...opts[5], groupTitle: "Groupe 03" };
       }
-
       if (this.isChildren) {
         opts[1] = {
           ...opts[1],
@@ -143,39 +124,19 @@ export default {
     },
     formatMenuItem(item) {
       const regex = /["']\w+["']/g;
-
       const itemValue = JSON.stringify(item, (_, value) =>
         typeof value === "function" ? `[fn]${value.toString()}[fn]` : value
       )
         .replace(/"/g, "'")
         .replace(/(\[fn\]'|'\[fn\]|\\)/g, "");
-
       const result = itemValue => {
         const removeSimpleQuote = itemValue.replace(regex, match =>
           match.replace(/'/g, "")
         );
         return removeSimpleQuote;
       };
-
       return result(itemValue);
     },
-    checkItem({ text }) {
-      const isChecked = this.checkedItems.includes(text);
-
-      if (isChecked) {
-        const itemIndex = this.checkedItems.indexOf(text);
-        this.checkedItems.splice(itemIndex, 1);
-      } else {
-        this.checkedItems.push(text);
-      }
-      return !isChecked;
-    },
-    checkAllItems() {
-      this.checkedItems =
-        this.checkedItems.length === this.options.length
-          ? []
-          : this.options.map(item => item.text);
-    },
   },
 };
 </script>
diff --git a/src/web/views/Components/Menu/props-menu-inline.js b/src/web/views/Components/Menu/props-menu-inline.js
index 5c20d1b1..24b30d98 100644
--- a/src/web/views/Components/Menu/props-menu-inline.js
+++ b/src/web/views/Components/Menu/props-menu-inline.js
@@ -21,4 +21,10 @@ export default [
     "true",
     "If false, the menu component does not close when you click outside.",
   ],
+  [
+    "childrenLeft",
+    "Boolean",
+    "true",
+    "If true, children will be displayed at the left of the menu",
+  ],
 ];
diff --git a/src/web/views/Components/Menu/slots-basic-menu.js b/src/web/views/Components/Menu/slots-basic-menu.js
index f7989934..2d58d979 100644
--- a/src/web/views/Components/Menu/slots-basic-menu.js
+++ b/src/web/views/Components/Menu/slots-basic-menu.js
@@ -3,4 +3,7 @@ export default [
   ["groupTitle", "Use this slot for custom group title"],
   ["item", "Use this slot for custom items menu"],
   ["children", "Use this slot for custom children of menu items"],
+  ["child-header", "Use this slot for custom child header"],
+  ["child-item", "Use this slot for custom child items"],
+  ["child-footer", "Use this slot for custom child footer"],
 ];

From a619fe941312eadf6d1cdf3934e4d455913aad4f Mon Sep 17 00:00:00 2001
From: Paul Vilalta <vilaltapaul@gmail.com>
Date: Mon, 9 Jan 2023 16:12:42 +0100
Subject: [PATCH 3/3] fix typo + refacto

---
 src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue  |  2 +-
 src/web/views/Components/Menu/props-basic-menu.js  |  2 +-
 src/web/views/Components/Menu/props-menu-inline.js |  4 ++--
 src/web/views/Components/Menu/slots-basic-menu.js  | 12 ++++++------
 src/web/views/Components/Menu/slots-menu-inline.js |  4 ++--
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
index abd5fe8e..f525fca5 100644
--- a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
+++ b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
@@ -63,7 +63,7 @@
                 maxHeight: subListMaxHeight,
                 width: subListWidth,
                 top: `${definePos(item)}px`,
-                left: childrenLeft ? '-200px' : '100%',
+                left: `${childrenLeft ? '-' : ''}100%`,
               }"
             >
               <slot name="child-header" :children="item.children" />
diff --git a/src/web/views/Components/Menu/props-basic-menu.js b/src/web/views/Components/Menu/props-basic-menu.js
index f1ae483c..24e487ba 100644
--- a/src/web/views/Components/Menu/props-basic-menu.js
+++ b/src/web/views/Components/Menu/props-basic-menu.js
@@ -7,7 +7,7 @@ export default [
     "menuItems",
     "Array",
     "() => []",
-    "Use this props to add content on BIMDataMenu component",
+    "Use this props to add content on BIMDataMenu component.",
   ],
   [
     "subListMaxHeight",
diff --git a/src/web/views/Components/Menu/props-menu-inline.js b/src/web/views/Components/Menu/props-menu-inline.js
index 24b30d98..36c936d6 100644
--- a/src/web/views/Components/Menu/props-menu-inline.js
+++ b/src/web/views/Components/Menu/props-menu-inline.js
@@ -7,7 +7,7 @@ export default [
     "isSubmenuRight",
     "Boolean",
     "true",
-    "Set this props to 'false' to open the submenu on the left",
+    "Set this props to 'false' to open the submenu on the left.",
   ],
   [
     "width",
@@ -25,6 +25,6 @@ export default [
     "childrenLeft",
     "Boolean",
     "true",
-    "If true, children will be displayed at the left of the menu",
+    "If true, children will be displayed at the left of the menu.",
   ],
 ];
diff --git a/src/web/views/Components/Menu/slots-basic-menu.js b/src/web/views/Components/Menu/slots-basic-menu.js
index 2d58d979..eeb15930 100644
--- a/src/web/views/Components/Menu/slots-basic-menu.js
+++ b/src/web/views/Components/Menu/slots-basic-menu.js
@@ -1,9 +1,9 @@
 export default [
   ["Slot name", "Description"],
-  ["groupTitle", "Use this slot for custom group title"],
-  ["item", "Use this slot for custom items menu"],
-  ["children", "Use this slot for custom children of menu items"],
-  ["child-header", "Use this slot for custom child header"],
-  ["child-item", "Use this slot for custom child items"],
-  ["child-footer", "Use this slot for custom child footer"],
+  ["groupTitle", "Use this slot for custom group title."],
+  ["item", "Use this slot for custom items menu."],
+  ["children", "Use this slot for custom children of menu items."],
+  ["child-header", "Use this slot for custom child header."],
+  ["child-item", "Use this slot for custom child items."],
+  ["child-footer", "Use this slot for custom child footer."],
 ];
diff --git a/src/web/views/Components/Menu/slots-menu-inline.js b/src/web/views/Components/Menu/slots-menu-inline.js
index d36d315a..cb26bdd3 100644
--- a/src/web/views/Components/Menu/slots-menu-inline.js
+++ b/src/web/views/Components/Menu/slots-menu-inline.js
@@ -1,5 +1,5 @@
 export default [
   ["Slot name", "Description"],
-  ["button", "Use this slot for custom button icon to open the menu"],
-  ["submenu", "Use this slot to add a submenu"],
+  ["button", "Use this slot for custom button icon to open the menu."],
+  ["submenu", "Use this slot to add a submenu."],
 ];