npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-ads-menu

v0.0.10

Published

This is a vue component that provides a menu with submenu's

Downloads

12

Readme

vue-ads-menu

A simple vertical menu with submenu's on the right.

Installation

You can install the package via npm or yarn.

NPM

npm install vue-ads-menu --save

YARN

yarn add vue-ads-menu

Usage

Here you find an example on how to use this component. We use the VueAdsLayout Drawer as a container for the VueAdsMenu.

<template>
    <div id="app">
        <vue-ads-layout :full-bar="false">
            <vue-ads-bar
                slot="toolbar"
                class="bg-red"
            >
                <vue-ads-hide-button slot="first" :hidden="hiddenLeft" @toggle="hideLeft"></vue-ads-hide-button>
            </vue-ads-bar>
            <vue-ads-drawer
                slot="left-drawer"
                :minified="minifiedLeft"
                :hidden="hiddenLeft"
                @minify="minifyLeft"
                @hide="hideLeft"
                class="bg-blue"
            >
                <vue-ads-menu
                    slot-scope="props"
                    :width="props.width"
                    :minified="props.minified"
                >
                    <vue-ads-menu-item
                        v-for="(item, key) in items"
                        :key="key"
                        :item="item"
                        :link-class="'font-bold'"
                    >
                        <vue-ads-menu
                            v-if="item.subitems"
                            :submenu="true"
                            width="64px"
                            class="bg-blue"
                        >
                            <vue-ads-menu-item
                                v-for="(subitem, subitemKey) in item.subitems"
                                :key="subitemKey"
                                :item="subitem"
                            >
                                <vue-ads-menu
                                    v-if="subitem.subitems"
                                    :submenu="true"
                                    class="bg-blue"
                                >
                                    <vue-ads-menu-item
                                        v-for="(subsubitem, subsubitemKey) in subitem.subitems"
                                        :key="subsubitemKey"
                                        :item="subsubitem"
                                    >

                                    </vue-ads-menu-item>
                                </vue-ads-menu>
                            </vue-ads-menu-item>
                        </vue-ads-menu>
                    </vue-ads-menu-item>
                </vue-ads-menu>
            </vue-ads-drawer>
        </vue-ads-layout>
    </div>
</template>

<script>
import '../node_modules/vue-ads-layout/dist/vue-ads-layout.css';
import '../node_modules/vue-ads-layout/dist/vue-ads-menu.css';
import '../node_modules/@fortawesome/fontawesome-free/css/all.css';


import { VueAdsLayout, VueAdsBar, VueAdsDrawer, VueAdsHideButton } from 'vue-ads-layout';
import { VueAdsMenu, VueAdsMenuItem } from 'vue-ads-menu';

export default {
    name: 'app',

    components: {
        VueAdsLayout,
        VueAdsBar,
        VueAdsDrawer,
        VueAdsHideButton,
        VueAdsMenu,
        VueAdsMenuItem,
    },

    data () {
        return {
            items: [
                {
                    id: 'home',
                    name: 'Home',
                    icon: 'home',
                    url: '#',
                    subitems: [
                        {
                            id: 'subhome',
                            name: 'Subhome',
                            icon: 'check',
                            url: '#',
                        },
                        {
                            id: 'subhome',
                            name: 'Subhome 2',
                            icon: 'check',
                            url: '#',
                            subitems: [
                                {
                                    id: 'subsubhome',
                                    name: 'Sub sub home',
                                    icon: 'check',
                                    url: '#',
                                },
                                {
                                    id: 'subsubhome',
                                    name: 'Sub sub home 2',
                                    icon: 'check',
                                    url: '#',
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 'calendar',
                    name: 'Calendar',
                    icon: 'calendar',
                    url: '#',
                },
            ],
            minifiedLeft: false,
            hiddenLeft: false,
        };
    },

    methods: {
        minifyLeft (minified) {
            this.minifiedLeft = minified;
        },

        hideLeft (hidden) {
            this.hiddenLeft = hidden;
        },
    },
};
</script>

Components

VueAdsMenu

Properties
  • submenu: (type: boolean, default: false) Indicates if the component is a submenu.
  • width: (type: string, default: '16rem') The width of the current menu.
  • minified: (type: boolean, default: false) Indicates if the menu is minified. It will only show the icons of the menu items, when the menu is minified.
Templates
default

Place the VueAdsMenuItem components in the default template.

VueAdsMenuItem

Properties
  • item: (type: object, required) The object that contains all the menu item info.
    • id: (type: string) The menu item identifier.
    • name: (type: string) The menu item title.
    • tag: (type: string, default: a) The html tag of the link (only a, nuxt-link and router-link are allowed).
    • url: (type: string) The url where the menu item links to.
    • icon: (type: string) The font-awesome class without the prefix fa-. Be sure to import the font awesome library. It's a dependency of this library, so you don't need to install it anymore.
    • subitems: (type: array) An array of item objects to provide a submenu.
Templates

The VueAdsMenuItem has 4 templates. One default template to override the submenu. And 3 named templates to override the link:

<template name="link-icon"></template> // overrides the icon
<template name="link-name"></template> // overrides the name
<template name="link-end"></template> // overrrides the arrow on the end if their are any subitems.

Testing

Needs to be done. You can run all the test (currently zero) by executing the following command.

npm run test:unit

Changelog

Read the CHANGELOG file to check what has changed.

Issues

If you have any issues (bugs, features, ...) on the current project, add them here.

Contributing

Do you like to contribute to this project? Please, read the CONTRIBUTING file.

Social

  • Follow me on alt text

Donate

Want to make a donation? That would be highly appreciated!

Make a donation via PayPal.