Menu / children enhancement

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,31 @@
         :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="{
+              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 : 0,
+              }"
+            />
             <ul
               :ref="`children-${item.text}`"
               class="bimdata-menu__item__children"
@@ -45,15 +63,20 @@
                 maxHeight: subListMaxHeight,
                 width: subListWidth,
                 top: `${definePos(item)}px`,
+                left: `${childrenLeft ? '-' : ''}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 +120,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    childrenLeft: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["item-click"],
   data() {

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;

src/web/views/Components/Menu/BasicMenu.vue

@@ -9,15 +9,15 @@
       class="bimdata-ds__demo__silver-light"
     >
       <template #module>
-        <BIMDataMenu :menuItems="options" @item-click="itemClick">
+        <BIMDataMenu
+          :menuItems="options"
+          :childrenLeft="isChildrenLeft"
+          @item-click="itemClick"
+        >
           <template #item="{ 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>
         </BIMDataMenu>
       </template>
@@ -26,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>
@@ -48,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 {
@@ -69,29 +71,26 @@ export default {
       isGroupTitle: false,
       isIcons: false,
       isChildren: false,
+      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],
@@ -125,20 +124,17 @@ 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);
     },
   },

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",

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",
@@ -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.",
+  ],
 ];

src/web/views/Components/Menu/slots-basic-menu.js

@@ -1,6 +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"],
+  ["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."],
 ];

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."],
 ];