motla/vue-file-toolbar-menu

:desktop_computer: UI file/toolbar menus for Vue apps

vue-file-toolbar-menu's Issues

Clicks don't not close menu

When I call the click handlers of a menu button they execute, but the button remains open.

I’m see this in multi steps menus.

What am I missing? Is there a way to programmatically close the menu?

Thanks!

Don't hardcode icons

In our project we have the package of icons from https://materialdesignicons.com/, the one used by Buefy and other big projects.

However this lib uses https://material.io/resources/icons/

This is suboptimal because we have two styles of icons.
So my request would be:

1. Be able to use other icons, like the ability to use a setting to select which package are you going to use. As example Buefy let you chose between Material Icons and Font Awesome
2. Don't hardcode icons in the package. Currently, even If I managed to use other icons using HTML I would still have installed the icons I don't need because vue-file-toolbar-menu install them. Make them optional (this could apply to emojis too)

Possibility to add ID

Currently we are able to add "class" to button, can we do the same with "ids" please?

Thanks a lot!!

Color picker turned off once clicked

The color picker is turned off every time it is clicked.
When using like chrome color picker, I might need to input the hex value of the color. However, the color picker is turned off when I click on the input box, which makes it impossible to use.
It seems to be the behavior of all bar buttons. Do you have any ideas about how to preserve the popup menu after clicking or selection?

Feature request: menu display inside the viewport

Hello, not really a support question, but rather a request.

Are there any plans to implement auto placement? or it would be nice to have an option to where you prefer the float menu to show: top, right, bottom, left.

Thanks in advance and regards.

Disable item dynamically

Love the framework, but can't figure out how to disable an item on the fly. I'm a Vue newbie, so apologize if it should be obvious.

For example, I only want the Copy item enabled if text is selected...

Disable still execute clicks?

When i disable button, it changes it style. However I still can click it.

Is this a expected behavior or a bug?

node-emoji error does not provide an export named 'default

ES6 import error

Question about your code

Dear motla,

I have one question.
Actually I don't know how i can ask you, so i decided to use this area.
I know it can break your rule, so sorry for that.

In your code, under src/bar/Bar.vue, BarButtonGeneric.vue ....
I can see < component > element.

what this element means?

It looks as if it changes to many other components like BarButtonGeneric, BarSapcer, BarSeperator.. and so on in Bar.vue.

it's very hard to find the function or meaning of < component > element.

Could you let me understand its meaning?

Thanks in advance
June Chung.

Default example is not center

Describe the bug
I follow the steps but the buttons not look align. Looks like these:

Any advice to check?

Thanks!

--bar-menu-min-width is not documented in the README

--bar-menu-min-width is not documented in the README

Uncaught SyntaxError: The requested module '/node_modules/node-emoji/index.js?v=2bd32581' does not provide an export named 'default'

I installed a new Vue 3 + Vite.js app and used the example from the README and it is giving me this error:

Uncaught SyntaxError: The requested module '/node_modules/node-emoji/index.js?v=2bd32581' does not provide an export named 'default'

Here is my App.vue

<template>
  <div> <vue-file-toolbar-menu :content="my_menu" /> </div>
</template>

<script>
import VueFileToolbarMenu from 'vue-file-toolbar-menu'

export default {
  components: { VueFileToolbarMenu },

  data () { return { happy: false } },

  computed: {
    my_menu () {
      return [
        { text: "My Menu", menu: [
          { text: "Item 1", click: () => alert("Action 1") },
          { text: "Item 2", click: () => alert("Action 2") }
        ] }, {
          text: "My Button",
          active: this.happy,
          icon: this.happy ? "sentiment_very_satisfied" : "sentiment_satisfied",
          click: () => { this.happy = !this.happy }
        }
      ]
    }
  }
}
</script>

and my package.json:

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-file-toolbar-menu": "^2.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "sass": "^1.49.7",
    "vite": "^2.7.2"
  }
}

$listeners Vue3

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Simple example in Vue3

Expected behavior
Clear console

Additional context
Problem is here

vue-file-toolbar-menu/src/Bar/BarButtonGeneric.vue

Line 2 in f1be471

<div class="bar-button" :class="button_class" :title="title" v-on="$listeners"

Solution
https://v3.vuejs.org/guide/migration/listeners-removed.html#overview

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

I installed a new Vue 3 + Vite.js app and used the example from the README and it is giving me this warning:

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead.

Here is my App.vue

<template>
  <div> <vue-file-toolbar-menu :content="my_menu" /> </div>
</template>

<script>
import VueFileToolbarMenu from 'vue-file-toolbar-menu'

export default {
  components: { VueFileToolbarMenu },

  data () { return { happy: false } },

  computed: {
    my_menu () {
      return [
        { text: "My Menu", menu: [
          { text: "Item 1", click: () => alert("Action 1") },
          { text: "Item 2", click: () => alert("Action 2") }
        ] }, {
          text: "My Button",
          active: this.happy,
          icon: this.happy ? "sentiment_very_satisfied" : "sentiment_satisfied",
          click: () => { this.happy = !this.happy }
        }
      ]
    }
  }
}
</script>

and my package.json:

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-file-toolbar-menu": "^2.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "sass": "^1.49.7",
    "vite": "^2.7.2"
  }
}