|
@@ -18,13 +18,7 @@
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<div class="hue-dropdown-drawer" :class="{ open: open }" @click="closeOnClick && closeDrawer()">
|
|
<div class="hue-dropdown-drawer" :class="{ open: open }" @click="closeOnClick && closeDrawer()">
|
|
|
- <div
|
|
|
|
|
- v-if="open"
|
|
|
|
|
- ref="innerPanelElement"
|
|
|
|
|
- v-click-outside="closeDrawer"
|
|
|
|
|
- class="hue-dropdown-drawer-inner"
|
|
|
|
|
- :style="position"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <div v-if="open" ref="innerPanelElement" class="hue-dropdown-drawer-inner" :style="position">
|
|
|
<slot />
|
|
<slot />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -33,7 +27,11 @@
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
import { defineComponent, nextTick, PropType } from 'vue';
|
|
import { defineComponent, nextTick, PropType } from 'vue';
|
|
|
|
|
|
|
|
- import { clickOutsideDirective } from '../directives/clickOutsideDirective';
|
|
|
|
|
|
|
+ import {
|
|
|
|
|
+ addClickOutsideHandler,
|
|
|
|
|
+ removeClickOutsideHandler
|
|
|
|
|
+ } from 'components/directives/clickOutsideDirective';
|
|
|
|
|
+ import { defer } from 'utils/hueUtils';
|
|
|
|
|
|
|
|
const isOutsideViewport = (element: Element): { bottom: boolean; right: boolean } => {
|
|
const isOutsideViewport = (element: Element): { bottom: boolean; right: boolean } => {
|
|
|
const clientRect = element.getBoundingClientRect();
|
|
const clientRect = element.getBoundingClientRect();
|
|
@@ -54,9 +52,6 @@
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
name: 'DropdownDrawer',
|
|
name: 'DropdownDrawer',
|
|
|
- directives: {
|
|
|
|
|
- 'click-outside': clickOutsideDirective
|
|
|
|
|
- },
|
|
|
|
|
props: {
|
|
props: {
|
|
|
open: {
|
|
open: {
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
@@ -67,7 +62,7 @@
|
|
|
default: true
|
|
default: true
|
|
|
},
|
|
},
|
|
|
triggerElement: {
|
|
triggerElement: {
|
|
|
- type: Object as PropType<HTMLElement> | null,
|
|
|
|
|
|
|
+ type: Object as PropType<HTMLElement | null>,
|
|
|
default: null
|
|
default: null
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -82,6 +77,7 @@
|
|
|
watch: {
|
|
watch: {
|
|
|
async open(newValue) {
|
|
async open(newValue) {
|
|
|
if (!newValue) {
|
|
if (!newValue) {
|
|
|
|
|
+ removeClickOutsideHandler(this.$el);
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -102,6 +98,13 @@
|
|
|
this.position.left = '';
|
|
this.position.left = '';
|
|
|
this.position.right = `${rightOffset}px`;
|
|
this.position.right = `${rightOffset}px`;
|
|
|
}
|
|
}
|
|
|
|
|
+ defer(() => {
|
|
|
|
|
+ addClickOutsideHandler(this.$el, event => {
|
|
|
|
|
+ if (this.triggerElement !== event.target) {
|
|
|
|
|
+ this.$emit('close');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
@@ -139,6 +142,44 @@
|
|
|
border-radius: $hue-panel-border-radius;
|
|
border-radius: $hue-panel-border-radius;
|
|
|
|
|
|
|
|
@include box-shadow(0, 5px, 10px, rgba(0, 0, 0, 0.2));
|
|
@include box-shadow(0, 5px, 10px, rgba(0, 0, 0, 0.2));
|
|
|
|
|
+
|
|
|
|
|
+ > ::v-deep(ul) {
|
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
|
+ margin: 0 !important;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ list-style: none;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+
|
|
|
|
|
+ li {
|
|
|
|
|
+ color: $fluid-gray-800;
|
|
|
|
|
+
|
|
|
|
|
+ button,
|
|
|
|
|
+ a {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 6px 16px;
|
|
|
|
|
+ clear: both;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ text-align: inherit;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ background-color: transparent;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ outline: 0;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &.active,
|
|
|
|
|
+ &.focus {
|
|
|
|
|
+ background-color: $hue-primary-color-light;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.selected button,
|
|
|
|
|
+ &.selected a {
|
|
|
|
|
+ background-color: $hue-primary-color-light;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|