|
@@ -17,21 +17,17 @@
|
|
|
-->
|
|
-->
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
- <div
|
|
|
|
|
- v-click-outside="clickOutside"
|
|
|
|
|
- class="hue-dropdown-panel"
|
|
|
|
|
- :class="{ 'dropdown-inline': inline }"
|
|
|
|
|
- >
|
|
|
|
|
- <hue-link v-if="inline" @click="togglePanel">
|
|
|
|
|
|
|
+ <div v-click-outside="clickOutside" class="hue-dropdown-panel">
|
|
|
|
|
+ <hue-link v-if="link" @click="togglePanel">
|
|
|
{{ text }} <i class="fa fa-caret-down" />
|
|
{{ text }} <i class="fa fa-caret-down" />
|
|
|
</hue-link>
|
|
</hue-link>
|
|
|
<hue-button v-else @click="togglePanel"> {{ text }} <i class="fa fa-caret-down" /></hue-button>
|
|
<hue-button v-else @click="togglePanel"> {{ text }} <i class="fa fa-caret-down" /></hue-button>
|
|
|
- <div class="hue-dropdown-container" :class="{ open: panelOpen }" @click="togglePanel">
|
|
|
|
|
|
|
+ <div class="hue-dropdown-container" :class="{ open: panelOpen }">
|
|
|
<div
|
|
<div
|
|
|
class="hue-dropdown-inner"
|
|
class="hue-dropdown-inner"
|
|
|
:class="{ 'position-top': positionTop, 'position-left': positionLeft }"
|
|
:class="{ 'position-top': positionTop, 'position-left': positionLeft }"
|
|
|
>
|
|
>
|
|
|
- <slot />
|
|
|
|
|
|
|
+ <slot name="contents" :closePanel="closePanel" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -70,9 +66,10 @@
|
|
|
})
|
|
})
|
|
|
export default class DropdownPanel extends Vue {
|
|
export default class DropdownPanel extends Vue {
|
|
|
@Prop({ required: false, default: '' })
|
|
@Prop({ required: false, default: '' })
|
|
|
- text: string;
|
|
|
|
|
|
|
+ text!: string;
|
|
|
@Prop({ required: false, default: false })
|
|
@Prop({ required: false, default: false })
|
|
|
- inline: boolean;
|
|
|
|
|
|
|
+ link!: boolean;
|
|
|
|
|
+
|
|
|
panelOpen = false;
|
|
panelOpen = false;
|
|
|
|
|
|
|
|
positionTop = false;
|
|
positionTop = false;
|
|
@@ -90,6 +87,12 @@
|
|
|
this.panelOpen = !this.panelOpen;
|
|
this.panelOpen = !this.panelOpen;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ closePanel(): void {
|
|
|
|
|
+ if (this.panelOpen) {
|
|
|
|
|
+ this.togglePanel();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
clickOutside(): void {
|
|
clickOutside(): void {
|
|
|
if (this.panelOpen) {
|
|
if (this.panelOpen) {
|
|
|
this.panelOpen = false;
|
|
this.panelOpen = false;
|
|
@@ -103,9 +106,7 @@
|
|
|
@import '../styles/mixins';
|
|
@import '../styles/mixins';
|
|
|
|
|
|
|
|
.hue-dropdown-panel {
|
|
.hue-dropdown-panel {
|
|
|
- &.dropdown-inline {
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
|
|
|
.hue-dropdown-container {
|
|
.hue-dropdown-container {
|
|
|
position: fixed;
|
|
position: fixed;
|