├── .babelrc
├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── README.ru.md
├── assets
├── figure1.png
├── figure2.png
├── figure3.png
└── figure4.png
├── dist
├── global
│ ├── vue-simple-menu.js
│ └── vue-simple-menu.min.js
├── styles
│ ├── vue-simple-menu.default.css
│ └── vue-simple-menu.default.min.css
└── vue-simple-menu.js
├── docs
├── index.html
└── main.js
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
├── index.html
├── scripts
│ ├── index.js
│ ├── lib
│ │ ├── VueSimpleMenu.vue
│ │ └── VueSimpleMenuItem.vue
│ ├── plugin.js
│ ├── rawMenuData.js
│ └── rawMenuData4Test.js
└── styles
│ ├── default.sass
│ └── index.sass
├── test
└── index.js
├── webpack.config.js
├── webpack.docs.config.js
└── webpack.test.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env"],
3 | "plugins": [
4 | "@babel/plugin-syntax-dynamic-import",
5 | "@babel/plugin-proposal-object-rest-spread"
6 | ],
7 | }
8 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "standard",
3 | "plugins": ["html"]
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | dist/styles/*.js
5 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "node"
4 | addons:
5 | chrome: stable
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 RG team
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue simple menu
2 |
3 | Vue component for fast create simple menu block
4 |
5 | > I will be glad to correct the inaccuracy of the my English 😄
6 |
7 | [Описание на русском языке](README.ru.md)
8 |
9 | [](https://travis-ci.org/RGRU/vue-simple-menu)
10 | [](https://standardjs.com)
11 | [](https://badge.fury.io/js/vue-simple-menu)
12 |
13 | ## For whom?
14 |
15 | Simple and easy menu with a set of basic functionality, which is enought in 80% of cases:
16 | * Menu items with direct link (href="/url.html")
17 | * Compatibility with vue-router
18 | * Menu items can be toggle expand
19 | * Menu items with infinity nesting
20 | * Stylize as you want (you can select default or make and require own style)
21 |
22 | # Installation and usage
23 |
24 | ## ES6 via npm
25 |
26 | ```sh
27 | npm i vue-simple-menu -D
28 | ```
29 |
30 | ### Usage
31 |
32 | For example, we have app container, and menu component inside
33 |
34 | ```html
35 |
36 |
37 |
38 | ```
39 |
40 | For building menu, you need pass to `raw-menu-data` data of menu, must be of a certain format
41 |
42 | Params
43 |
44 | | Name | Type | Description |
45 | |:-- |:-- |:-- |
46 | | id | string | ID for item. It is link to itself id key (figure 1) ID format as you want |
47 | | name | string | Name or title for menu item element (figure 2) |
48 | | uri | string | Add link to item element (figure 3) |
49 | | list | array: object | Add children elements to item (figure 4) The structure of nesting objects repeats the main parent |
50 |
51 | __Pictures for data params__
52 |
53 | __figure 1__ Identificator for item. It is link to itself id key
54 | 
55 |
56 | __figure 2__ Name or title for menu item element
57 | 
58 |
59 | __figure 3__ Add link to item element
60 | 
61 |
62 | __figure 4__ Add children elements to item
63 | 
64 |
65 | For example file rawMenuData.js
66 |
67 | ```js
68 | export default {
69 | item1: {
70 | id: 'item1',
71 | name: 'Item 1',
72 |
73 | // Item can be as link
74 | uri: '//rg.ru'
75 | },
76 | item2: {
77 | id: 'item1',
78 | name: 'Item 1',
79 | uri: '//rg.ru',
80 |
81 | // Item can have as child items list
82 | list: {
83 | item1_1: {
84 | id: 'item1_1',
85 | name: 'Item 1_1',
86 |
87 | // List items may be endless
88 | list: {
89 | item1_1_1: {
90 | id: 'item1_1_1',
91 | name: 'Item 1_1_1',
92 | uri: '//rg.ru'
93 | }
94 | }
95 | }
96 | ...
97 | }
98 | }
99 | ...
100 | }
101 | ```
102 |
103 | And add imported menu component to Vue app. Menu data pass as component
104 |
105 | ```js
106 | import Vue from 'vue'
107 | import VueSimpleMenu from 'vue-simple-menu'
108 |
109 | // Data for menu, may get by APi or somehow else
110 | import rawMenuData from './rawMenuData'
111 |
112 | // Add style for menu
113 | require('../styles/default.sass')
114 |
115 | // Init vue application
116 | new Vue({
117 | el: '#app',
118 | data () {
119 | return {
120 |
121 | // Init default data for menu
122 | rawMenuData: {}
123 | }
124 | },
125 | components: {
126 | 'vue-simple-menu': VueSimpleMenu
127 | }
128 | })
129 |
130 | // Emulate async getting menu data
131 | setTimeout(function () {
132 | app.rawMenuData = rawMenuData
133 | }, 1000)
134 | ```
135 |
136 | ## Component as global in browser
137 |
138 | Pass to your html page scripts below
139 |
140 | ```html
141 |
142 |
143 |
144 |
145 |
146 | ```
147 |
148 | ### Usage
149 |
150 | Add element for our application with menu
151 |
152 | ```html
153 |
154 |
155 |
156 |
157 | ```
158 |
159 | And use in you scripts some as:
160 |
161 | ```js
162 | // Data for menu, may get by APi or somehow else
163 | import rawMenuData from './rawMenuData'
164 |
165 | // Init vue app with menu component in template
166 | new Vue({
167 | el: '#app',
168 | data () {
169 | return {
170 | rawMenuData: menuData
171 | }
172 | }
173 | })
174 | ```
175 |
176 | ## Usage with Vue Router
177 |
178 | You can use simple menu with [vue router](https://router.vuejs.org/en/essentials/getting-started.html) links
179 |
180 | Just add value `vueRouter: true` in rawMenuData, and items with this value will be work as vue-router link
181 |
182 | Is implied, the vue router is already connected in your app script
183 |
184 | Example below
185 |
186 | ```js
187 | articles: {
188 | id: 'articles',
189 | name: 'Статьи',
190 | uri: '/articles/list',
191 |
192 | // Add value for associate this item with vue-router
193 | vueRouter: true,
194 | ...
195 | }
196 | ```
197 |
198 | Done!
199 |
200 | ## Stylize
201 |
202 | You can use default styles for menu. Just require sass or css file to your project from styles folder in src. You should setup webpack config for processing styles (for example [css-loader](https://github.com/webpack-contrib/css-loader))
203 |
204 | Example
205 |
206 | ```js
207 | // Path where put styles in your own project
208 | require('../styles/default.sass')
209 | ```
210 |
211 | Or pass default style from CDN
212 |
213 | Example
214 |
215 | ```html
216 |
217 | ```
218 |
--------------------------------------------------------------------------------
/README.ru.md:
--------------------------------------------------------------------------------
1 | # Vue simple menu
2 |
3 | Компонент vue для быстрого создания блока с меню
4 |
5 | [](https://travis-ci.org/RGRU/vue-simple-menu)
6 | [](https://standardjs.com)
7 | [](https://badge.fury.io/js/vue-simple-menu)
8 |
9 | ## Для кого?
10 |
11 | Самое легкое меню, покрывающее своей функциональностью 80% случаев его использования:
12 | * По клику на элемент меню - переход на другую страницу
13 | * Совместимость с vue router (по клику на элемент, срабатывает хук роутера)
14 | * Элемент меню как раскрывающийся список подменю (без перехода по клику)
15 | * Вложенность подменю может быть бесконечной
16 | * Можно стилизовать блок как вам хочется или использовать как отправную точку стилизацию из этого пакета
17 |
18 | # Установка и использование
19 |
20 | ## ES6 через npm
21 |
22 | ```sh
23 | npm i vue-simple-menu -D
24 | ```
25 |
26 | ### Использование
27 |
28 | Например у нас есть контейнер `app` и компонент с меню внутри него
29 |
30 | ```html
31 |
32 |
33 |
34 | ```
35 |
36 | Для создания меню нам нужно передать в свойство `raw-menu-data` данные для меню. Причем они должны быть определенного формата, описанного ниже
37 |
38 | Параметры данных для меню
39 |
40 | | Название | Тип | Описание |
41 | |:-- |:-- |:-- |
42 | | id | string | ID для элемента, который нужно продублировать в свойство id (изображение 1) Формат id может быть любой, какой вы сами выберете |
43 | | name | string | Название элемента меню (изображение 2) |
44 | | uri | string | Ссылка с элемента меню (изображение 3) |
45 | | list | array: object | Дочерние подуровни у элемента меню (изображение 4) Структура дочерних объектов полностью повторяет основную родительскую |
46 |
47 | __Изображения к параметрам данных для меню__
48 |
49 | __Изображение 1__ ID для элемента меню
50 | 
51 |
52 | __Изображение 2__ Название элемента меню
53 | 
54 |
55 | __Изображение 3__ Добавление ссылки к элементу меню
56 | 
57 |
58 | __Изображение 4__ Добавление дочерних элементов
59 | 
60 |
61 | В итоге файл с данными получится примерно таким rawMenuData.js
62 |
63 | ```js
64 | export default {
65 | item1: {
66 | id: 'item1',
67 | name: 'Item 1',
68 |
69 | // Элемент меню как кликабельная ссылка,
70 | // из-за указания этого свойства
71 | uri: '//rg.ru'
72 | },
73 | item2: {
74 | id: 'item1',
75 | name: 'Item 1',
76 | uri: '//rg.ru',
77 |
78 | // Элемент имеет дочерние подуровни
79 | list: {
80 | item1_1: {
81 | id: 'item1_1',
82 | name: 'Item 1_1',
83 |
84 | // Подуровни могут быть бесконечными
85 | list: {
86 | item1_1_1: {
87 | id: 'item1_1_1',
88 | name: 'Item 1_1_1',
89 | uri: '//rg.ru'
90 | }
91 | }
92 | }
93 | ...
94 | }
95 | }
96 | ...
97 | }
98 | ```
99 |
100 | Добавляем компонент меню в приложение, как компонент и передаем в него заранее подготовленные данные
101 |
102 | ```js
103 | import Vue from 'vue'
104 | import VueSimpleMenu from 'vue-simple-menu'
105 |
106 | // Подготовленные данные для меню
107 | import rawMenuData from './rawMenuData'
108 |
109 | // Добавляем стили для меню
110 | require('../styles/default.sass')
111 |
112 | // Инициализация приложения
113 | new Vue({
114 | el: '#app',
115 | data () {
116 | return {
117 |
118 | // Инициализация данных для меню по-умолчанию
119 | rawMenuData: {}
120 | }
121 | },
122 |
123 | // Добавляем компонент
124 | components: {
125 | 'vue-simple-menu': VueSimpleMenu
126 | }
127 | })
128 |
129 | // Эмулируем асинхронное получение данных для меню
130 | setTimeout(function () {
131 | app.rawMenuData = rawMenuData
132 | }, 1000)
133 | ```
134 |
135 | ## Использование компонента напрямую в брузере
136 |
137 | Просто поместите на вашу страницу скрипты с библиотекой vue и самим компонентом меню
138 |
139 | ```html
140 |
141 |
142 |
143 |
144 |
145 | ```
146 |
147 | ### Использование
148 |
149 | Добавьте компонент в ваше приложение
150 |
151 | ```html
152 |
153 |