A vue.js directive for handling dropdowns

Overview

Vue Dropdown Directive

Table of contents

  1. Installation
  2. Basic usage
  3. Modifiers
  4. Parameters
  5. Behaviour
  6. Methods

Installation

$ npm install @teamwork/vue-dropdown-directive

Basic usage

Show list ">
<button v-dropdown-directive="{ id: 'unique-dropdown-id' }">Show listbutton>
<custom-dropdown dropdown-id="unique-dropdown-id">
  
custom-dropdown>
import DropdownDirective from '@teamwork/vue-dropdown-directive';

const directives = {
  DropdownDirective,
};

const ExamplePage = {
  props,
  directives,
  computed,
  methods,
  ...,
};

export default ExamplePage;

Modifiers

.bottom and .center are applied by default. If only one modifier is specified, .center is applied by default.

The first modifier refers to the position where the dropdown is placed:

  • .bottom
  • .left
  • .right
  • .top

The second modifier refers to the alignment of the dropdown with the trigger element:

  • .bottom and .top positions can have .left | .center | .right
  • .right and .left positions can have .top | .center | .bottom
Show list ">
<button v-dropdown-directive.top.left="{ id: 'unique-dropdown-id' }">Show listbutton>
<custom-dropdown dropdown-id="unique-dropdown-id">
  
custom-dropdown>

Parameters

  • id (required) is the unique id that must be assigned to the trigger element which links it to the dropdown element.
  • modifiers contains the position and alignment, it is generally used to programmatically override the native modifiers.
{
  right: true,
  center: true,
}
  • scrollableContentClassName (suggested) is the class assigned to the wrapper element containing the main content within the dropdown, read here for more info on how it is used and why it would be better to set this.
Show list
  • User 1
  • User 2
  • User 3
">
<button v-dropdown-directive.top.left="{
  id: 'unique-dropdown-id',
  scrollableContentClassName: 'dropdown-list',
}">
  Show list
button>
<custom-dropdown dropdown-id="unique-dropdown-id">
  <ul
    class=".dropdown-list"
    slot="dropdown-content"
  >
    <li>User 1li>
    <li>User 2li>
    <li>User 3li>
  ul>
custom-dropdown>
  • otherScrollableContentClassNames is the list of class names within the dropdown that are allowed to scroll.
  • isReady is a boolean used to hold the directive hook inserted until the consumer is ready, the default is set to true.
  • arrow is a boolean used to show/hide the arrow between the trigger and the dropdown, the default is set to false.
  • arrowColor contains an hexadecimal used to set the color of the arrow next to the dropdown, the default is set to #fff.
  • zIndex is a number that specifies that stack order of the dropdown and its arrow, the default is set to 9999.
  • offsetFromTrigger is a number that specifies the distance in pixels from where the dropdown is going to be rendered, the default is set to 0.
  • onOpen is a function that runs at the opening of the dropdown.
  • onClose is a function that runs on closing of the dropdown.
  • keepOtherDropdownsOpen is a boolean that keeps the other dropdowns within the viewport opened when the trigger element action happens, the default is set false.
  • keepDropdownsOpenOnUIEvent is a boolean that keeps every dropdown within the viewport opened if a scroll or resize event has been triggered, the default is set true.
  • openOnlyProgrammatically is a boolean used to disable the trigger element action that opens the dropdown. If set to true, the dropdown can be opened only programmatically.
  • allowTopCollocation is a boolean used to enable/disable the top position, the default is set to true.
  • allowBottomCollocation is a boolean used to enable/disable the bottom position, the default is set to true.
  • allowLeftCollocation is a boolean used to enable/disable the left position, the default is set to true.
  • allowRightCollocation is a boolean used to enable/disable the right position, the default is set to true.

Behaviour

Most of the time the dropdown is opened at the position set. However, there might be some scenarios where the space available within the viewport is simply not enough. So, the directive runs automatically a simulation, either to find the area within the viewport with the most available space or if an overflow to the content of the dropdown could be applied. In order to prioritize the overflow of the content, the scrollableContentClassName parameter must be set. Instead, allowTopCollocation, allowBottomCollocation, allowLeftCollocation or allowRightCollocation parameters are used to restrict the positions to look for finding the areas with the most available space. In order to ensure the dropdown is always placed next to the trigger element, the directive hides and re-paints it every time a scroll or a resize of the viewport happens.

Methods

  • open() is used to open the dropdown.
  • close() is used to close the dropdown.
  • closeOthers() is used to close every dropdown within the viewport except the current one.
  • closeAll() is used to close every dropdown within the viewport.
  • recalculatePosition() is used to re-calculate the position of the dropdown within the viewport.
  • isOpen() is used to check if the current dropdown is showing.

This is an example of how the methods above can be executed:

updateDropdownPosition() {
  this.$refs.customDropdown.recalculatePosition();
},
Show list ">
<button v-dropdown-directive="{ id: 'unique-dropdown-id' }">Show listbutton>
<custom-dropdown
  ref="customDropdown"
  dropdown-id="unique-dropdown-id"
>
  
custom-dropdown>
Comments
  • Bump jsdom and @vue/cli-plugin-unit-jest

    Bump jsdom and @vue/cli-plugin-unit-jest

    Bumps jsdom and @vue/cli-plugin-unit-jest. These dependencies needed to be updated together. Updates jsdom from 11.12.0 to 16.7.0

    Release notes

    Sourced from jsdom's releases.

    Version 16.7.0

    • Added AbortSignal.abort(). (ninevra)
    • Added dummy x and y properties to the return value of getBoundingClientRect(). (eiko)
    • Implemented wrapping for textareaEl.value if the wrap="" attribute is specified. (ninevra)
    • Changed newline normalization in <textarea>s according to recent HTML Standard updates. (ninevra)
    • Fixed some bad cascade computation in getComputedStyle(). (romain-trotard)

    Version 16.6.0

    • Added parentNode.replaceChildren(). (@​ninevra)
    • Fixed jsdom's handling of when code running inside the jsdom throws null or undefined as an exception. (@​mbest)
    • Removed the dependency on the deprecated request package, in the process fixing several issues with the XMLHttpRequest implementation around header processing. Thanks go to @​tobyhinloopen, @​andrewaylett, and especially @​vegardbb, for completing this months-long effort!

    Version 16.5.3

    • Fixed infinite recursion when using MutationObservers to observe elements inside a MutationObserver callback.

    Version 16.5.2

    • Fixed Access-Control-Allow-Headers: * to work with XMLHttpRequest. (silviot)
    • Fixed xhr.response to strip any leading BOM when xhr.responseType is "json".
    • Fixed new Text() and new Comment() constructors to properly set the resulting node's ownerDocument.
    • Fixed customElements.whenDefined() to resolve its returned promise with the custom element constructor, per recent spec updates. (ExE-Boss)
    • Fixed parsing to ensure that <svg>\<template></template></svg> does not throw an exception, but instead correctly produces a SVG-namespace \<template> element.
    • Fixed domParser.parseFromString() to treat <noscript> elements appropriately.
    • Fixed form control validity checking when the control was outside the <form> element and instead associated using the form="" attribute.
    • Fixed legendEl.form to return the correct result based on its parent <fieldset>.
    • Fixed optionEl.text to exclude <script> descendants.
    • Fixed radio buttons and checkboxes to not fire input and change events when disconnected.
    • Fixed inputEl.indeterminate to reset to its previous value when canceling a click event on a checkbox or radio button.
    • Fixed the behavior of event handler attributes (e.g. onclick="...code...") when there were global variables named element or formOwner. (ExE-Boss)
    • On Node.js v14.6.0+ where WeakRefs are available, fixed NodeIterator to no longer stop working when more than ten NodeIterator instances are created, and to use less memory due to inactive NodeIterators sticking around. (ExE-Boss)

    Version 16.5.1

    • Fixed a regression that broke customElements.get() in v16.5.0. (fdesforges)
    • Fixed window.event to have a setter which overwrites the window.event property with the given value, per the specification. This fixes an issue where after upgrading to jsdom v16.5.0 you would no longer be able to set a global variable named event in the jsdom context.

    Version 16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)

    ... (truncated)

    Changelog

    Sourced from jsdom's changelog.

    16.7.0

    • Added AbortSignal.abort(). (ninevra)
    • Added dummy x and y properties to the return value of getBoundingClientRect(). (eiko)
    • Implemented wrapping for textareaEl.value if the wrap="" attribute is specified. (ninevra)
    • Changed newline normalization in <textarea>s according to recent HTML Standard updates. (ninevra)
    • Fixed some bad cascade computation in getComputedStyle(). (romain-trotard)

    16.6.0

    • Added parentNode.replaceChildren(). (ninevra)
    • Fixed jsdom's handling of when code running inside the jsdom throws null or undefined as an exception. (mbest)
    • Removed the dependency on the deprecated request package, in the process fixing several issues with the XMLHttpRequest implementation around header processing. Special thanks to vegardbb for completing this months-long effort!

    16.5.3

    • Fixed infinite recursion when using MutationObservers to observe elements inside a MutationObserver callback.

    16.5.2

    • Fixed Access-Control-Allow-Headers: * to work with XMLHttpRequest. (silviot)
    • Fixed xhr.response to strip any leading BOM when xhr.responseType is "json".
    • Fixed new Text() and new Comment() constructors to properly set the resulting node's ownerDocument.
    • Fixed customElements.whenDefined() to resolve its returned promise with the custom element constructor, per recent spec updates. (ExE-Boss)
    • Fixed parsing to ensure that <svg>\<template></template></svg> does not throw an exception, but instead correctly produces a SVG-namespace \<template> element.
    • Fixed domParser.parseFromString() to treat <noscript> elements appropriately.
    • Fixed form control validity checking when the control was outside the <form> element and instead associated using the form="" attribute.
    • Fixed legendEl.form to return the correct result based on its parent <fieldset>.
    • Fixed optionEl.text to exclude <script> descendants.
    • Fixed radio buttons and checkboxes to not fire input and change events when disconnected.
    • Fixed inputEl.indeterminate to reset to its previous value when canceling a click event on a checkbox or radio button.
    • Fixed the behavior of event handler attributes (e.g. onclick="...code...") when there were global variables named element or formOwner. (ExE-Boss)
    • On Node.js v14.6.0+ where WeakRefs are available, fixed NodeIterator to no longer stop working when more than ten NodeIterator instances are created, and to use less memory due to inactive NodeIterators sticking around. (ExE-Boss)

    16.5.1

    • Fixed a regression that broke customElements.get() in v16.5.0. (fdesforges)
    • Fixed window.event to have a setter which overwrites the window.event property with the given value, per the specification. This fixes an issue where after upgrading to jsdom v16.5.0 you would no longer be able to set a global variable named event in the jsdom context.

    16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.

    ... (truncated)

    Commits

    Updates @vue/cli-plugin-unit-jest from 4.5.9 to 5.0.8

    Release notes

    Sourced from @​vue/cli-plugin-unit-jest's releases.

    v5.0.8

    :bug: Bug Fix

    v5.0.7

    • @vue/cli-service
    • @vue/cli-ui
      • #7210 chore: upgrade to apollo-server-express 3.x

    Committers: 2

    v5.0.6

    Fix compatibility with the upcoming Vue 2.7 (currently in alpha) and Vue Loader 15.10 (currently in beta).

    In Vue 2.7, vue-template-compiler is no longer a required peer dependency. Rather, there's a new export under the main package as vue/compiler-sfc.

    v5.0.5

    :bug: Bug Fix

    • @vue/cli
      • #7167 fix(upgrade): prevent changing the structure of package.json file during upgrade (@​blzsaa)
    • @vue/cli-service
    • @vue/cli-plugin-e2e-cypress
      • [697bb44] fix: should correctly resolve cypress bin path for Cypress 10 (Note that the project is still created with Cypress 9 by default, but you can upgrade to Cypress 10 on your own now)

    Committers: 3

    v5.0.4

    :bug: Bug Fix

    • @vue/cli-service
    • @vue/cli-shared-utils, @vue/cli-ui
      • 75826d6 fix: replace node-ipc with @achrinza/node-ipc to further secure the dependency chain

    Committers: 1

    v5.0.3

    ... (truncated)

    Changelog

    Sourced from @​vue/cli-plugin-unit-jest's changelog.

    5.0.7 (2022-07-05)

    • @vue/cli-service
    • @vue/cli-ui
      • #7210 chore: upgrade to apollo-server-express 3.x

    Committers: 2

    5.0.6 (2022-06-16)

    Fix compatibility with the upcoming Vue 2.7 (currently in alpha) and Vue Loader 15.10 (currently in beta).

    In Vue 2.7, vue-template-compiler is no longer a required peer dependency. Rather, there's a new export under the main package as vue/compiler-sfc.

    5.0.5 (2022-06-16)

    :bug: Bug Fix

    • @vue/cli
      • #7167 feat(upgrade): prevent changing the structure of package.json file during upgrade (@​blzsaa)
    • @vue/cli-service

    Committers: 3

    5.0.4 (2022-03-22)

    :bug: Bug Fix

    • @vue/cli-service
    • @vue/cli-shared-utils, @vue/cli-ui
      • 75826d6 fix: replace node-ipc with @achrinza/node-ipc to further secure the dependency chain

    Committers: 1

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump shell-quote from 1.7.2 to 1.7.3

    Bump shell-quote from 1.7.2 to 1.7.3

    Bumps shell-quote from 1.7.2 to 1.7.3.

    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump terser from 4.8.0 to 4.8.1

    Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump eventsource from 1.0.7 to 1.1.1

    Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump minimist from 1.2.5 to 1.2.6

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump async from 2.6.3 to 2.6.4

    Bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • 18821341  dropdown hidden behind soft keyboard IOS

    18821341 dropdown hidden behind soft keyboard IOS

    Task

    DO NOT MERGE until this has been tested integrated into deskclient https://github.com/Teamwork/deskclient/pull/5307 and package version has been bumped to non beta

    Description

    This PR fixes some issues with the dropdown area being hidden behind the software keyboard and not accessible, especially in IOS safari.

    More info about the problem here:

    • https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d
    • https://developpaper.com/ios-keyboard-puzzle-and-visual-view-port-api/

    Other features:

    • Adds a close button when the dropdown is full screen so user can close easily
    • Can pass a class when initialising the dropdown on which touch scrolling gets prevented. this is to solve issues when the dropdown is opened and the user scrolls the page.

    Implementation details.

    To fix this issue an interval is created while the dropdown is opened (only while it is opened) to listen to some changes in the visualViewport, scrollPosition and page height, IOS does not have any event listeners for some of these properties so we need to use an interval.

    Before

    https://user-images.githubusercontent.com/2648215/154648804-c6237102-30b9-4faf-a522-7b16d1a39766.mp4

    After

    https://user-images.githubusercontent.com/2648215/154648793-2f3e8af7-8b11-4a7e-bcf8-0b4d8b039fa5.mp4

    Safari is the new IE !!!

    bug enhancement 
    opened by M-jerez 1
  • fix scroll events inside dropdown closing the dropdown

    fix scroll events inside dropdown closing the dropdown

    issue

    When we have a input field in a dropdown, any content that overflows the input will cause a scroll event. This is causing the dropdown to temporarily hide, which is expected as the directive hides dropdowns on scroll. The issue is we should ignore events from the dropdown itself. We usually do this by adding scrollableContentClassName so the method temporaryHideAllDropdowns knows which events to ignore. For additional scrollable content you wish to ignore we can use otherScrollableContentClassNames. However, this is missed all over desk at the moment and I can't think of any good reason not to just ignore any scroll events inside of the dropdown.

    This pr makes it so that any scroll event inside of the dropdown itself will be ignored by temporaryHideAllDropdowns. I can't think of any good reason to keep this, so if I am missing something please let me know.

    Another part of this issue is in relation to detaching event listeners. When you open a dropdown and then click a trigger to open a second dropdown, this event listeners for the first dropdown are not removed, this was causing an infinite loop.

    Fix

    The fix is to ignore scroll events from the dropdown inside of temporaryHideAllDropdowns. This is done by getting the events parent elements ids and checking if the array of ids contain the id of the dropdown. If the event is a scroll event and has a parent element with the id of the dropdown the event will be ignored.

    It also sets keepListenersAttachedParamToPass to false in closeOtherDropdowns which was keeping the dropdown listeners attached when they shouldn't be.

    Screenshot

    before

    notworking

    after

    working

    bug 
    opened by MichaelWebCork 1
  • 20160800 bugfix touch screen closing dropdown due to click event trigguered during open

    20160800 bugfix touch screen closing dropdown due to click event trigguered during open

    Task

    Notes: In touch devices there is some event triggered in the body by the same click that opens dropdown, therefore forcing the dropdown to immediately close (outside dropdown close listener). The source of this event can NOT be identified and the next solution is to delay attaching the close dropdown listener to next javascript event loop.

    Please dont merged until is tested in associated desk client PR and beta version is bumped

    bug 
    opened by M-jerez 0
  • Add support for touch screen devices

    Add support for touch screen devices

    Summary

    This PR improves how the directive behaves on touch screen devices:

    • dropdowns will be placed in a central position with an opaque mask underneath

    Included:

    • [x] Bump version
    • [x] Bump dependencies
    • [x] Update Readme
    enhancement 
    opened by matcmd 0
  • Bump loader-utils from 1.4.0 to 1.4.2

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v2.4.0)
Owner
Teamwork
World-class products that work together to streamline your business. We're hiring!
Teamwork
A NEW MAINTAINER NEEDED! Vue.js 2 tree navigation with vue-router support

vue-tree-navigation ?? ?? A new maintainer needed ?? ?? Hello friends, I haven't had enough time to maintain this project for a long time for various

Michaela Robosova 155 Oct 30, 2022
🍔 An off-canvas sidebar Vue component - https://vue-burger-menu.netlify.com/

vue-burger-menu An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations. Demo & exam

Mohit kumar Bajoria 730 Nov 9, 2022
A Vue.js sidebar menu component with vue-router compatibility

A Vue.js sidebar menu component with vue-router compatibility

null 549 Nov 24, 2022
Vue-3d-menu - Vue 的3d菜单组件

vue-3d-menu Vue 的 3d 菜单组件。 效果参照 2013 版 miaov 官网右上角菜单。 Examples To see a demo. Installation npm install vue-3d-menu Usage import Vue from 'vue'; impor

xieshuang 89 Oct 17, 2022
Vue-movie-db - Site de consulta de filmes e series, a partir de uma API. Criado para praticar meus conhecimentos em Vue.Js.

vue-movie-db Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Li

Isaac E. Louzeiro 1 Mar 27, 2022
Vue Menu Button - Accessible menu button component for Vue 2

Vue Menu Button - Accessible menu button component for Vue 2, following WAI-ARIA 1.1 authoring practices

Marcus Herrmann 2 May 8, 2021
Vue Burger - Vue.js plugin for Tasty CSS-animated hamburgers

Vue Burger Vue.js plugin for Tasty CSS-animated hamburgers About Vue Burger is a Vue component/plugin that is a wrapper around Tasty CSS-animated hamb

Zdravko Curic 9 Oct 1, 2021
Simple accordion menu component for Vue.js

vue-accordion Simple accordion menu component for Vuejs Check it out live! Note The API has changed. Check v0.0.3 documentation if you use the old ver

null 171 Nov 24, 2022
Simple vue implementation of Slideout.js touch sidebar / sidemenu library

vue-slideout This component is a simple vue implementation of Slideout.js Demo Install npm install vue-slideout Usage App.vue <template> <div id=

null 157 Jul 30, 2022
Minimalistic responsive navigation bar that renders routes of vue-router.

vue-router-nav Minimalistic responsive navigation bar that renders routes of vue-router. View the demo. Dependencies You need to have vue-router insta

Alex Pavlov 31 Nov 24, 2022
A simple DrawerLayout component for Vue.js.

vue-drawer-layout A simple DrawerLayout component for Vue.js 中文文档 Demo http://share.codehuang.com/vue-drawer-layout Mobile QQ by Alexander Huang(click

Alexander Huang 404 Nov 24, 2022
Vue component for fast create simple menu block

Vue simple menu Vue component for fast create simple menu block I will be glad to correct the inaccuracy of the my English ?? Описание на русском язык

RG.RU 33 Jul 4, 2022
A simple, easily configurable accordion or collapsible for Vue, styled with Bulma

vue-bulma-accordion A simple, easily configurable accordion or collapsible for Vue, styled with Bulma. Full docs here New in 0.5 SSR Support! Table of

Gabriel Soicher 33 Nov 24, 2022
A highly dynamic vue dropdown component

vue-dynamic-dropdown A Highly Customizable, easy-to-use, elegant, dropdown component Feedback would be much appreciated, questions, suggestions, issue

Yonatan Doron 39 Nov 24, 2022
🧭 A simple, pretty navbar for your Vue projects.

vue-navigation-bar A simple, pretty navbar for your Vue projects. Links View demo View on npm View on GitHub Install Download # npm npm i vue-navigati

John Datserakis 150 Nov 19, 2022
:eight_pointed_black_star: Vue.js simple autocomplete dropdown component

vue-simple-search-dropdown A Vue component for a simple searchable dropdown. No external library is used in this dropdown. Demo Demo here: https://rom

Romain SIMON 90 Nov 24, 2022
Dropdown menu component for Vue

Dropdown menu Universal dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropdown content. Fully customizable

Innologica Ltd 73 Nov 26, 2022
🍔 vue-burger-button is a functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower than 700b and CSS min+gzip is lower than 400b).

vue-burguer-button A Vue burger button as functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower th

Vitor Luiz Cavalcanti 41 Nov 29, 2022
:desktop_computer: UI file/toolbar menus for Vue apps

Features ?? See live demo Reactive content is stored in Vue.js computed/data fields, not in template Easy styling Add your own custom components for m

Romain Lamothe 114 Nov 19, 2022