prabhuignoto / vue-float-menu Goto Github PK

Hi.
Look here: sonicoder86/awesome-vue-3#16

:)

Seeing this beautiful component, it is a pity that it was developed by VUE3!

When I click on a menu item, I get the following error & stack trace, & the on-select="handleSelection" function never works:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'key')
    at renderSlot (runtime-core.esm-bundler.js:2969:57)
    at vue-float-menu.es.js:1:18216
    at renderFnWithContext (runtime-core.esm-bundler.js:853:21)
    at renderSlot (runtime-core.esm-bundler.js:2968:55)
    at vue-float-menu.es.js:1:6819
    at renderFnWithContext (runtime-core.esm-bundler.js:853:21)
    at normalizeChildren (runtime-core.esm-bundler.js:6925:42)
    at createBaseVNode (runtime-core.esm-bundler.js:6678:9)
    at _createVNode (runtime-core.esm-bundler.js:6780:12)
    at createVNodeWithArgsTransform (runtime-core.esm-bundler.js:6636:12)

Here is my configuration:

<script setup>
  import { FloatMenu } from "vue-float-menu";
  import "vue-float-menu/dist/vue-float-menu.css";

  // Floating menu data.
  const menuData = [
    { name: "Dashboard" },
    {
      name: "Edit",
      subMenu: {
        name: "edit-items",
        items: [{ name: "Copy" }, { name: "Paste", disabled: true }],
      },
    },
    {divider: true},
    {
      name: "Open Recent",
      subMenu: {
        name: "recent-items",
        items: [{ name: "Document 1" }, {divider: true}, { name: "Document 2" }],
      },
    },
  ];

  const handleSelection = (selectedItem) => {
    console.log(selectedItem);
  };

</script>
<template>
  <float-menu
    :dimension=50
    :menu-dimension="{height: 400, width: 300}"
    :menu-data="menuData"
    position="bottom right"
    on-select="handleSelection"
  >
    <i class="fa-solid fa-bars"></i>
  </float-menu>
</template>

Vue 3 plus Vite.

Hi there

Congrats on this component, do you happen to have one that I could test out with Vue 2 via the CDN <script> tag?

Thanks

Thank you for this great package.
I followed the code according to the example.
Here's the package.json snippet

...
 "@intlify/vite-plugin-vue-i18n": "^3.2.1",
    "@mdi/js": "^5.9.55",
    "@vitejs/plugin-vue": "^1.10.1",
    "axios": "^0.21.1",
    "dayjs": "^1.10.7",
    "mdi-vue": "^3.0.7",
    "tailwindcss": "^2.2.8",
    "vite": "^2.6.14",
    "vue": "^3.2.4",
    "vue-float-menu": "^1.9.1",
    "vue-i18n": "^9.1.7",
    "vue-router": "4",
    "vue-tippy": "^6.0.0-alpha.32",
...

The following warning appears every time I click the floating button

Do I simply ignore it or ?

Since I'm using Vitejs, I followed the guide on the following page to fix it : vueCompilerOptions on Vite 2 #1312

plugins: [
   vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('float-') // float-menu
            || tag.startsWith('custom-') // my custom component
            || tag.startsWith('famous-') // my other component
        }
      }
    }),
    vueI18n({
      include: path.resolve(__dirname, './src/locales/**'),
    }),
  ],

And the result, the floating button can't be clicked at all.
Any help given will be greatly appreciated. Thanks

is it possible to keep the menu open when clicked outside?
I am looking for a way to close the menu only when the open button is clicked again

I don't know how to control or style anything. The menu text is extremely tiny. I have The position fixed but when I click on the header it jumps to the left over my other icons. Can anyone help?

Example in readme ( https://github.com/prabhuignoto/vue-float-menu#-getting-started )

// const handleSelection = (selectedItem: string) => {
const handleSelection = (selectedItem) => {

tested with [email protected]

This is a phenomenal component, thank you for this!

The first time I click to open the menu, all looks fine until I click on a sub menu. Nothing happens. After closing the menu and re-opening it however, everything works as intended.

Hi there
Thank you for sharing this excelent Vue component. It looks so useful and flexible!
As I'm starting to build a website using Nuxt, I wonder if would be possible to use vue-float-menu with it. Maybe with the help of nuxt-composition-api. I'm not savvy enough to find a way by myself.

best regards,
Gil

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

• Go to the Settings page of either your own account or the organization you've used
• Go to "Installed Integrations"
• Click the "Configure" button on the Depfu integration
• Remove this repo (prabhuignoto/vue-float-menu) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

the component depends on interactjs and this causes a sizable increase in the final build size.
check to include only @interactjs/interactjs module and discard the unused functionality or a find an alternative solution.