v-menu-multi-level

Table of Contents

• Introduction
• Live Demo
• Installation
• Basic Usage
• Component Reference
• Browser Compatibility
• License
• Credits

v-menu-multi-level is a customlizable UI Component for VueJS that creates a multi-level menu from a JSON data on a defined structure. The assigned props allows customize this menu using CSS3 properties and change its behavior.

Features:

• Auto change sub-menu open-direction property when the document body overflows.
• Set a sorting function for nodes in same level.
• Open sub-menus in down or right directions.
• Set icons and its style before or after nodes.
• Keep a sub-menu opened when click outside from them.
• Set icons when a sub-menu is opened or closed.
• Apply CSS3 for hover, active or striped on items.
• Set a root node visibilty dynamically.
• Close all opened sub-menus when click outside from them.
• Set menu alignment for root items.
• Add prepend and/or append slots for menu.
• Set a function to be executed when an item is clicked.

Definitions:

• Node: A JavaScript Object containing a string for a label and an array of zero or more children nodes.
• Root: First level of the component node's property.
• Leaf: A node which doesn't have children nodes.
• Item: A rendered node on HTML.
• Menu: A rendered collection of all root nodes on HTML.
• Sub-menu: A rendered collection of one children's node on HTML.

Notes

The generated menu uses the CSS3 property display: flex and its related properties for desktop platforms where the dimension of the menu depends of nodes' label, specially on root items. Any CSS3 property can be passed to container menu directly from component.

The auto open-direction of an item checks if the body's dimension has changed after rendered, so the open-direction property when is set to right is changed to down when it occurs.

yarn add v-menu-multi-level --save 

or

npm install v-menu-multi-level --save

<!-- Vue component -->
<template>
    <v-menu-multi-level :nodes="nodes"></v-menu-multi-level>
</template>

<script>
import VMenuMultiLevel from 'v-menu-multi-level'
import 'v-menu-multi-level/dist/v-menu-multi-level.css'

export default {
  components: {
    VMenuMultiLevel
  },
  data() {
    return {
      nodes: [{
        label: 'North America',
        visible: true,
        children: [{
          label: 'United States',
          children: [{
            label: 'California',
            children: [{
              label: 'Los Angeles',
              children: [{
                label: 'Beverly Hills',
                children: []
              },
              {
                label: 'Hollywood',
                children: []
              },
              {
                label: 'Santa Monica',
                children: []
              }]
            }]
          }]
        }]
        // . . .
      }]
    }
  }
}
</script>

Properties

| Property | Type | Default | Description | | ------------ | ------------ | ------------ | ------------ | | align | String | center | Alignment of the root items. Possible values: left, right, center, fill | children | String | children | A property name used on children nodes. | | container‑items‑style‑down | Object | View | A CSS3 style object for the container items at same level when the open-direction property is down.| | container-items-style-right | Object | View | A A CSS3 style object for the container items at same level when the open-direction property is right. | | icon-down-after | Object | View | The opened and closed icon properties shown after label. Each one has an icon and its style. Applies to: non-root items and open-direction property is down.| | icon-down-before | Object | View | The opened and closed icon properties shown before label. Each one has an icon and its style. Applies to: non-root items and open-direction property is down. | | icon-down-before-leaf | Object | View | The icon properties shown before label. It has an icon and its style. Applies to: leaf items and open-direction property is down. | | icon-right-after | Object | View | The opened and closed icon properties shown after label. Each one has an icon and its style. Applies to: non-root items and open-direction property is right. | | icon-right-before | Object | View | The opened and closed icon properties shown before label. Each one has an icon and its style. Applies to: non-root items and open-direction property is right. | | icon-right-before-leaf | Object | View | The icon properties shown before label. It has an icon and its style. Applies to: leaf items and open-direction property is right. | | icon-root-after | Object | View | The opened and closed icon properties shown before label. Each one has an icon and its style. Applies to: root items. | | icon-root-before | Object | View | The opened and closed icon properties shown before label. Each one has an icon and its style. Applies to: root items. | | ignore-sort-root-items | Boolean | false | Ignores sorting root items on *sortItems() function. Possible values: true, false | | item-active-style1 | Object | View | A CSS3 style object | | item-hover-style1 | Object | View | A CSS3 style object | | item-style | Object | View | A CSS3 style object | | keep-opened | Boolean | false | Keeps sub-menus opened when opening a new one. Possible values: true, false| | label | String | label | A property name used on nodes' label | | nodes | Object | [ ] | An array of objects with a label and children nodes | | offset-down-direction | Number | 20 | An offset (in pixels) from a parent item when the open-direction property is down | | open-direction | String | right | . Possible values: right, down | | open-on-leaf-only | Boolean | true | Executes a click event on leaf only. Possible values: true, false | | root-item-active-style2 | Object | View | A CSS3 style object | | root-item-hover-style2 | Object | View | A CSS3 style object | | root-item-position | String | left | Align the edge of the root items with its sub-menu. Possible values: right, left | | root-item-style | Object | View | A CSS3 style object | | sort-items | Function | Ascending function sort | A sort function that compare two labels properties at same node level which results in -1, 0 or 1 | | striped-style1 | Array | View | Applies an array of one or more CSS3 objects for items on a submenu resulting on a striped effect |

Notes

1Inherits CSS3 properties from itemStyle 2Inherits CSS3 properties from rootItemStyle

Slots

| Name | Description | | ------------ |------------ | | append | Scoped slot for custom content after the menu. |
| prepend | Scoped slot for custom content before the menu. |

Events

| Event | Arguments | Description | | ------------ | ------------ | ------------ | | clickItem | event - Native event object. item - Node of the item clicked. | Emitted when an item is clicked. |

container-items-style-down

{
  border: "solid 1px #eee"
}

container-items-style-right

{
  border: "solid 1px #eee"
}

icon-down-after

{
  opened: {
    icon: "–",
    style: {
      marginLeft: "10px"
    }
  },
  closed: {
    icon: "+",
    style: {
      marginLeft: "10px"
    }
  }
}

icon-down-before

{
  opened: {
    icon: "",
    style: { }
  },
  closed: {
    icon: "",
    style: { }
  }
}

icon-down-before-leaf

{
  icon: "",
  style: { }
}

icon-right-after

{
  opened: {
    icon: "▾",
    style: {
      marginLeft: "10px",
      transform: "rotate(90deg)"
    }
  },
  closed: {
    icon: "▾",
    style: {
      marginLeft: "10px",
      transform: "rotate(-90deg)"
    }
  }
}

icon-right-before

{
  opened: {
    icon: "",
    style: { }
  },
  closed: {
    icon: "",
    style: { }
  }
}

icon-right-before-leaf

{
  icon: "",
  style: { }
}

icon-root-after

{
  opened: {
    icon: "▾",
    style: {
      marginLeft: "10px",
      transform: "rotate(180deg)"
    }
  },
  closed: {
    icon: "▾",
    style: {
      marginLeft: "10px"
    }
  }
}

icon-root-before

{
  opened: {
    icon: "",
    style: ""
  },
  closed: {
    icon: "",
    style: ""
  }
}

item-active-style

{
  color: "#fff",
  backgroundColor: "#444"
}

item-hover-style

{
  backgroundColor: "#e7e7e7"
}

item-style

{
  padding: "6px",
  backgroundColor: "#f5f5f5"
}

root-item-active-style

{
  color: "#fff",
  backgroundColor: "#444"
}

root-item-hover-style

{
  backgroundColor: "#eee"
}

root-item-style

{
  backgroundColor: "#f9f9f9",
  textAlign: "center",
  fontSize: "14px",
  padding: "10px 20px"
}

striped-style

[
  {
    backgroundColor: "#f9f9f9"
  },
  {
    backgroundColor: "#f1f1f1"
  }
]

| Browser | Version | | ------------ | ------------ | | Chrome | 61+ | | Firefox | 60+ | | Safari | 10.1+ | | Edge | 16+ | | Internet Explorer | 11+ ( Polifill needed ) |

MIT

Developed by Adson Vinicius