2018-12-06 18:45:40 +00:00
< template >
2022-02-23 13:44:06 +00:00
< div :ref ="containerRef" class = "layout-topbar" >
2018-12-26 09:36:00 +00:00
< a class = "menu-button" @click ="$emit('menubutton-click')" >
< i class = "pi pi-bars" > < / i >
< / a >
2022-09-06 13:53:29 +00:00
<!-- < div class = "app-theme" v -tooltip .bottom = " $ appState.theme " >
2022-02-23 19:52:21 +00:00
< img : src = "'demo/images/themes/' + logoMap[$appState.theme]" / >
2022-09-06 13:53:29 +00:00
< / div > -- >
2020-01-08 08:06:24 +00:00
< ul ref = "topbarMenu" class = "topbar-menu" >
2019-12-11 09:35:13 +00:00
< li class = "topbar-submenu" >
2021-02-03 12:14:50 +00:00
< a tabindex = "0" @ click = "toggleMenu($event, 0)" >
2022-02-24 16:27:26 +00:00
< span > Themes < / span >
2021-02-03 12:14:50 +00:00
< / a >
2020-06-27 14:31:52 +00:00
< transition name = "p-connected-overlay" @enter ="onMenuEnter" >
2020-01-08 08:06:24 +00:00
< ul v-show ="activeMenuIndex === 0" >
2019-05-21 12:54:05 +00:00
< li class = "topbar-submenu-header" > THEMING < / li >
2022-09-10 14:29:14 +00:00
< li > < nuxt -link to = "/theming" > < i class = "pi pi-fw pi-file" / > < span > Guide < / span > < / n u x t - l i n k > < / l i >
2019-12-09 11:48:49 +00:00
< li > < a href = "https://www.primefaces.org/designer/primevue" > < i class = "pi pi-fw pi-palette" / > < span > Designer < / span > < / a > < / li >
2020-07-12 20:21:17 +00:00
< li > < a href = "https://www.primefaces.org/designer-vue" > < i class = "pi pi-fw pi-desktop" / > < span > Visual Editor < / span > < / a > < / li >
2022-09-10 14:29:14 +00:00
< li > < nuxt -link to = "/icons" > < i class = "pi pi-fw pi-info-circle" / > < span > Icons < / span > < / n u x t - l i n k > < / l i >
2020-09-24 15:10:41 +00:00
< li > < a href = "https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library" > < i class = "pi pi-fw pi-pencil" / > < span > Figma UI Kit < / span > < / a > < / li >
2020-06-26 13:37:03 +00:00
< li class = "topbar-submenu-header" > BOOTSTRAP < / li >
2020-06-26 16:05:42 +00:00
< li > < a @ click = "changeTheme($event, 'bootstrap4-light-blue')" > < img src = "demo/images/themes/bootstrap4-light-blue.svg" alt = "Blue Light" / > < span > Blue Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'bootstrap4-light-purple')" > < img src = "demo/images/themes/bootstrap4-light-purple.svg" alt = "Purple Light" / > < span > Purple Light < / span > < / a > < / li >
2020-07-23 08:31:34 +00:00
< li > < a @ click = "changeTheme($event, 'bootstrap4-dark-blue', true)" > < img src = "demo/images/themes/bootstrap4-dark-blue.svg" alt = "Blue Dark" / > < span > Blue Dark < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'bootstrap4-dark-purple', true)" > < img src = "demo/images/themes/bootstrap4-dark-purple.svg" alt = "Purple Dark" / > < span > Purple Dark < / span > < / a > < / li >
2020-06-26 15:58:49 +00:00
2020-06-26 13:37:03 +00:00
< li class = "topbar-submenu-header" > MATERIAL DESIGN < / li >
2020-06-26 16:05:42 +00:00
< li > < a @ click = "changeTheme($event, 'md-light-indigo')" > < img src = "demo/images/themes/md-light-indigo.svg" alt = "Indigo Light" / > < span > Indigo Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'md-light-deeppurple')" > < img src = "demo/images/themes/md-light-deeppurple.svg" alt = "Deep Purple Light" / > < span > Deep Purple Light < / span > < / a > < / li >
2020-07-23 08:31:34 +00:00
< li > < a @ click = "changeTheme($event, 'md-dark-indigo', true)" > < img src = "demo/images/themes/md-dark-indigo.svg" alt = "Indigo Dark" / > < span > Indigo Dark < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'md-dark-deeppurple', true)" > < img src = "demo/images/themes/md-dark-deeppurple.svg" alt = "Deep Purple Dark" / > < span > Deep Purple Dark < / span > < / a > < / li >
2020-06-26 13:37:03 +00:00
< li class = "topbar-submenu-header" > MATERIAL DESIGN COMPACT < / li >
2020-06-26 16:05:42 +00:00
< li > < a @ click = "changeTheme($event, 'mdc-light-indigo')" > < img src = "demo/images/themes/md-light-indigo.svg" alt = "Indigo Light" / > < span > Indigo Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'mdc-light-deeppurple')" > < img src = "demo/images/themes/md-light-deeppurple.svg" alt = "Deep Purple Light" / > < span > Deep Purple Light < / span > < / a > < / li >
2020-07-23 08:31:34 +00:00
< li > < a @ click = "changeTheme($event, 'mdc-dark-indigo', true)" > < img src = "demo/images/themes/md-dark-indigo.svg" alt = "Indigo Dark" / > < span > Indigo Dark < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'mdc-dark-deeppurple', true)" > < img src = "demo/images/themes/md-dark-deeppurple.svg" alt = "Deep Purple Dark" / > < span > Deep Purple Dark < / span > < / a > < / li >
2020-06-26 15:58:49 +00:00
2021-09-06 08:54:28 +00:00
< li class = "topbar-submenu-header" > TAILWIND < / li >
< li > < a @ click = "changeTheme($event, 'tailwind-light')" > < img src = "demo/images/themes/tailwind-light.png" alt = "Tailwind Light" / > < span > Tailwind Light < / span > < / a > < / li >
2020-10-10 10:20:25 +00:00
< li class = "topbar-submenu-header" > FLUENT UI < / li >
< li > < a @ click = "changeTheme($event, 'fluent-light')" > < img src = "demo/images/themes/fluent-light.png" alt = "Fluent Light" / > < span > Fluent Light < / span > < / a > < / li >
2022-01-13 11:03:59 +00:00
< li class = "topbar-submenu-header flex align-items-center" > PRIMEONE 2022 < Tag class = "ml-3" value = "NEW" rounded severity = "success" > < / Tag > < / li >
2021-11-15 09:07:43 +00:00
< li > < a @ click = "changeTheme($event, 'lara-light-indigo')" > < img src = "demo/images/themes/lara-light-indigo.png" alt = "Lara Light Indigo" / > < span > Lara Light Indigo < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'lara-light-blue')" > < img src = "demo/images/themes/lara-light-blue.png" alt = "Lara Light Blue" / > < span > Lara Light Blue < / span > < / a > < / li >
2021-11-16 07:06:27 +00:00
< li > < a @ click = "changeTheme($event, 'lara-light-purple')" > < img src = "demo/images/themes/lara-light-purple.png" alt = "Lara Light Purple" / > < span > Lara Light Purple < / span > < / a > < / li >
2021-11-15 09:07:43 +00:00
< li > < a @ click = "changeTheme($event, 'lara-light-teal')" > < img src = "demo/images/themes/lara-light-teal.png" alt = "Lara Light Teal" / > < span > Lara Light Teal < / span > < / a > < / li >
2021-11-16 07:06:27 +00:00
< li > < a @ click = "changeTheme($event, 'lara-dark-blue')" > < img src = "demo/images/themes/lara-dark-blue.png" alt = "Lara Dark Blue" / > < span > Lara Dark Blue < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'lara-dark-indigo')" > < img src = "demo/images/themes/lara-dark-indigo.png" alt = "Lara Dark Indigo" / > < span > Lara Dark Indigo < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'lara-dark-purple')" > < img src = "demo/images/themes/lara-dark-purple.png" alt = "Lara Dark Purple" / > < span > Lara Dark Purple < / span > < / a > < / li >
2021-11-15 09:07:43 +00:00
< li > < a @ click = "changeTheme($event, 'lara-dark-teal')" > < img src = "demo/images/themes/lara-dark-teal.png" alt = "Lara Dark Teal" / > < span > Lara Dark Teal < / span > < / a > < / li >
2021-11-15 07:55:18 +00:00
< li class = "topbar-submenu-header" > PRIMEONE 2021 < / li >
2020-06-26 16:05:42 +00:00
< li > < a @ click = "changeTheme($event, 'saga-blue')" > < img src = "demo/images/themes/saga-blue.png" alt = "Saga Blue" / > < span > Saga Blue < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'saga-green')" > < img src = "demo/images/themes/saga-green.png" alt = "Saga Green" / > < span > Saga Green < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'saga-orange')" > < img src = "demo/images/themes/saga-orange.png" alt = "Saga Orange" / > < span > Saga Orange < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'saga-purple')" > < img src = "demo/images/themes/saga-purple.png" alt = "Saga Purple" / > < span > Saga Purple < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'vela-blue', true)" > < img src = "demo/images/themes/vela-blue.png" alt = "Vela Blue" / > < span > Vela Blue < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'vela-green', true)" > < img src = "demo/images/themes/vela-green.png" alt = "Vela Green" / > < span > Vela Green < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'vela-orange', true)" > < img src = "demo/images/themes/vela-orange.png" alt = "Vela Orange" / > < span > Vela Orange < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'vela-purple', true)" > < img src = "demo/images/themes/vela-purple.png" alt = "Vela Purple" / > < span > Vela Purple < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'arya-blue', true)" > < img src = "demo/images/themes/arya-blue.png" alt = "Arya Blue" / > < span > Arya Blue < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'arya-green', true)" > < img src = "demo/images/themes/arya-green.png" alt = "Arya Green" / > < span > Arya Green < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'arya-orange', true)" > < img src = "demo/images/themes/arya-orange.png" alt = "Arya Orange" / > < span > Arya Orange < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'arya-purple', true)" > < img src = "demo/images/themes/arya-purple.png" alt = "Arya Purple" / > < span > Arya Purple < / span > < / a > < / li >
2020-06-26 13:37:03 +00:00
2020-10-10 10:20:25 +00:00
< li class = "topbar-submenu-header" > PREMIUM < / li >
< li > < a @ click = "changeTheme($event, 'soho-light')" > < img src = "demo/images/themes/soho-light.png" alt = "Soho Light" / > < span > Soho Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'soho-dark', true)" > < img src = "demo/images/themes/soho-dark.png" alt = "Soho Dark" / > < span > Soho Dark < / span > < / a > < / li >
2021-01-13 09:24:57 +00:00
< li > < a @ click = "changeTheme($event, 'viva-light')" > < img src = "demo/images/themes/viva-light.svg" alt = "Viva Light" / > < span > Viva Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'viva-dark', true)" > < img src = "demo/images/themes/viva-dark.svg" alt = "Viva Dark" / > < span > Viva Dark < / span > < / a > < / li >
2020-11-26 08:53:02 +00:00
< li > < a @ click = "changeTheme($event, 'mira')" > < img src = "demo/images/themes/mira.jpg" alt = "Mira" / > < span > Mira < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'nano')" > < img src = "demo/images/themes/nano.jpg" alt = "Nano" / > < span > Nano < / span > < / a > < / li >
2019-05-21 12:54:05 +00:00
< / ul >
< / transition >
2018-12-06 18:45:40 +00:00
< / li >
2019-12-11 09:35:13 +00:00
< li class = "topbar-submenu" >
2020-06-18 09:17:14 +00:00
< a tabindex = "0" @ click = "toggleMenu($event, 1)" > Templates < / a >
2020-06-27 14:31:52 +00:00
< transition name = "p-connected-overlay" @enter ="onMenuEnter" >
2020-01-08 08:06:24 +00:00
< ul v-show ="activeMenuIndex === 1" >
2019-12-10 08:05:47 +00:00
< li class = "topbar-submenu-header" > FREE ADMIN TEMPLATE < / li >
2022-09-06 13:53:29 +00:00
< li > < a href = "https://www.primefaces.org/sakai-vue" > < img src = "@/assets/images/layouts/themeswitcher-sakai.svg" alt = "Sakai" / > < span > Sakai < / span > < / a > < / li >
2019-12-10 08:05:47 +00:00
< li class = "topbar-submenu-header" > PREMIUM ADMIN TEMPLATES < / li >
2022-09-06 13:53:29 +00:00
< li > < a href = "https://www.primefaces.org/layouts/atlantis-vue" > < img src = "@/assets/images/layouts/themeswitcher-atlantis.svg" alt = "Atlantis" / > < span > Atlantis < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/freya-vue" > < img src = "@/assets/images/layouts/themeswitcher-freya.png" alt = "Freya" / > < span > Freya < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/diamond-vue" > < img src = "@/assets/images/layouts/themeswitcher-diamond.png" alt = "Diamond" / > < span > Diamond < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/verona-vue" > < img src = "@/assets/images/layouts/themeswitcher-verona.png" alt = "Verona" / > < span > Verona < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/poseidon-vue" > < img src = "@/assets/images/layouts/themeswitcher-poseidon.svg" alt = "Poseidon" / > < span > Poseidon < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/sapphire-vue" > < img src = "@/assets/images/layouts/themeswitcher-sapphire.png" alt = "Sapphire" / > < span > Sapphire < / span > < span class = "theme-badge material" > material < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/serenity-vue" > < img src = "@/assets/images/layouts/themeswitcher-serenity.png" alt = "Serenity" / > < span > Serenity < / span > < span class = "theme-badge material" > material < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/ultima-vue" > < img src = "@/assets/images/layouts/themeswitcher-ultima.png" alt = "Ultima" / > < span > Ultima < / span > < span class = "theme-badge material" > material < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/avalon-vue" > < img src = "@/assets/images/layouts/themeswitcher-avalon.png" alt = "Avalon" / > < span > Avalon < / span > < span class = "theme-badge bootstrap" > bootstrap < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/babylon-vue" > < img src = "@/assets/images/layouts/themeswitcher-babylon.png" alt = "Babylon" / > < span > Babylon < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/apollo-vue" > < img src = "@/assets/images/layouts/themeswitcher-apollo.png" alt = "Apollo" / > < span > Apollo < / span > < span class = "theme-badge darkmode" > dark mode < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/roma-vue" > < img src = "@/assets/images/layouts/themeswitcher-roma.jpg" alt = "Roma" / > < span > Roma < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/prestige-vue" > < img src = "@/assets/images/layouts/themeswitcher-prestige.png" alt = "Prestige" / > < span > Prestige < / span > < / a > < / li >
2019-12-10 08:05:47 +00:00
< / ul >
< / transition >
< / li >
2019-12-11 09:35:13 +00:00
< li class = "topbar-submenu topbar-resources-submenu" >
2022-02-24 11:07:28 +00:00
< a href = "https://www.primefaces.org/primeblocks-vue/#/" target = "_blank" > < span > Blocks < / span > < / a >
2019-12-11 09:35:13 +00:00
< / li >
2022-02-24 06:56:01 +00:00
< li class = "topbar-submenu" >
2022-08-23 11:01:21 +00:00
< a tabindex = "0" @ click = "toggleMenu($event, 3)" > v3 .16 .2 < / a >
2022-02-24 06:56:01 +00:00
< transition name = "p-connected-overlay" @enter ="onMenuEnter" >
< ul v-show ="activeMenuIndex === 3" style="width: 100%" >
2022-09-10 14:29:14 +00:00
< li > < nuxt -link to = "/" > < span class = "m-0" > v3 .16 .2 < / span > < / n u x t - l i n k > < / l i >
2022-08-23 11:01:21 +00:00
< li > < a href = "https://www.primefaces.org/primevue-v2" > < span class = "m-0" > v2 .10 .0 < / span > < / a > < / li >
2022-02-24 06:56:01 +00:00
< / ul >
< / transition >
< / li >
2018-12-06 18:45:40 +00:00
< / ul >
< / div >
2019-05-21 12:54:05 +00:00
< / template >
< script >
2022-09-06 11:52:18 +00:00
import EventBus from './AppEventBus' ;
2022-02-23 19:52:21 +00:00
2019-05-21 12:54:05 +00:00
export default {
2020-01-08 08:06:24 +00:00
outsideClickListener : null ,
2019-05-21 12:54:05 +00:00
darkDemoStyle : null ,
2020-01-08 08:06:24 +00:00
watch : {
$route ( ) {
this . activeMenuIndex = null ;
}
} ,
2019-05-21 12:54:05 +00:00
data ( ) {
return {
2020-07-01 19:35:12 +00:00
activeMenuIndex : null ,
logoMap : {
'bootstrap4-light-blue' : 'bootstrap4-light-blue.svg' ,
'bootstrap4-light-purple' : 'bootstrap4-light-purple.svg' ,
'bootstrap4-dark-blue' : 'bootstrap4-dark-blue.svg' ,
'bootstrap4-dark-purple' : 'bootstrap4-dark-purple.svg' ,
'md-light-indigo' : 'md-light-indigo.svg' ,
'md-light-deeppurple' : 'md-light-deeppurple.svg' ,
'md-dark-indigo' : 'md-dark-indigo.svg' ,
'md-dark-deeppurple' : 'md-dark-deeppurple.svg' ,
'mdc-light-indigo' : 'md-light-indigo.svg' ,
'mdc-light-deeppurple' : 'md-light-deeppurple.svg' ,
'mdc-dark-indigo' : 'md-dark-indigo.svg' ,
'mdc-dark-deeppurple' : 'md-dark-deeppurple.svg' ,
'saga-blue' : 'saga-blue.png' ,
'saga-green' : 'saga-green.png' ,
'saga-orange' : 'saga-orange.png' ,
'saga-purple' : 'saga-purple.png' ,
'vela-blue' : 'vela-blue.png' ,
'vela-green' : 'vela-green.png' ,
'vela-orange' : 'vela-orange.png' ,
'vela-purple' : 'vela-purple.png' ,
'arya-blue' : 'arya-blue.png' ,
'arya-green' : 'arya-green.png' ,
'arya-orange' : 'arya-orange.png' ,
'arya-purple' : 'arya-purple.png' ,
'nova' : 'nova.png' ,
'nova-alt' : 'nova-alt.png' ,
'nova-accent' : 'nova-accent.png' ,
'nova-vue' : 'nova-vue.png' ,
'luna-blue' : 'luna-blue.png' ,
'luna-green' : 'luna-green.png' ,
'luna-pink' : 'luna-pink.png' ,
'luna-amber' : 'luna-amber.png' ,
2020-10-10 10:20:25 +00:00
'rhea' : 'rhea.png' ,
'fluent-light' : 'fluent-light.png' ,
'soho-light' : 'soho-light.png' ,
2020-11-28 19:55:09 +00:00
'soho-dark' : 'soho-dark.png' ,
2021-01-13 09:24:57 +00:00
'viva-light' : 'viva-light.svg' ,
'viva-dark' : 'viva-dark.svg' ,
2020-11-28 19:55:09 +00:00
'mira' : 'mira.jpg' ,
'nano' : 'nano.jpg' ,
2021-09-06 09:17:44 +00:00
'tailwind-light' : 'tailwind-light.png' ,
2021-11-15 09:07:43 +00:00
'lara-dark-indigo' : 'lara-dark-indigo.png' ,
'lara-dark-purple' : 'lara-dark-purple.png' ,
2022-02-23 13:44:06 +00:00
'lara-dark-teal' : 'lara-dark-teal.png' ,
'lara-dark-blue' : 'lara-dark-blue.png' ,
2021-11-15 09:07:43 +00:00
'lara-light-indigo' : 'lara-light-indigo.png' ,
'lara-light-purple' : 'lara-light-purple.png' ,
'lara-light-teal' : 'lara-light-teal.png' ,
'lara-light-blue' : 'lara-light-blue.png'
2020-07-01 19:35:12 +00:00
}
2019-05-21 12:54:05 +00:00
}
} ,
2022-02-23 13:44:06 +00:00
scrollListener : null ,
container : null ,
2022-02-23 19:01:47 +00:00
mounted ( ) {
2022-02-23 13:44:06 +00:00
this . bindScrollListener ( ) ;
} ,
beforeUnmount ( ) {
if ( this . scrollListener ) {
this . unbindScrollListener ( ) ;
}
} ,
2019-05-21 12:54:05 +00:00
methods : {
2020-05-13 12:25:03 +00:00
changeTheme ( event , theme , dark ) {
2022-02-23 19:52:21 +00:00
EventBus . emit ( 'theme-change' , { theme : theme , dark : dark } ) ;
2020-05-09 19:23:23 +00:00
this . activeMenuIndex = null ;
2019-05-21 12:54:05 +00:00
event . preventDefault ( ) ;
} ,
2020-01-08 08:06:24 +00:00
toggleMenu ( event , index ) {
this . activeMenuIndex = ( this . activeMenuIndex === index ) ? null : index ;
2019-12-10 08:05:47 +00:00
event . preventDefault ( ) ;
} ,
2020-01-08 08:06:24 +00:00
onMenuEnter ( ) {
this . bindOutsideClickListener ( ) ;
2019-12-10 08:05:47 +00:00
} ,
2022-02-23 13:44:06 +00:00
bindScrollListener ( ) {
if ( ! this . scrollListener ) {
if ( this . container ) {
this . scrollListener = ( ) => {
if ( window . scrollY > 0 )
this . container . classList . add ( 'layout-topbar-sticky' ) ;
else
this . container . classList . remove ( 'layout-topbar-sticky' ) ;
}
}
}
window . addEventListener ( 'scroll' , this . scrollListener ) ;
} ,
unbindScrollListener ( ) {
if ( this . scrollListener ) {
window . removeEventListener ( 'scroll' , this . scrollListener ) ;
this . scrollListener = null ;
}
} ,
2020-01-08 08:06:24 +00:00
bindOutsideClickListener ( ) {
if ( ! this . outsideClickListener ) {
this . outsideClickListener = ( event ) => {
if ( ( this . activeMenuIndex != null && this . isOutsideTopbarMenuClicked ( event ) ) ) {
this . activeMenuIndex = null ;
2020-06-18 09:17:14 +00:00
this . unbindOutsideClickListener ( ) ;
2019-05-21 12:54:05 +00:00
}
} ;
2020-01-08 08:06:24 +00:00
document . addEventListener ( 'click' , this . outsideClickListener ) ;
2019-05-21 12:54:05 +00:00
}
} ,
2020-01-08 08:06:24 +00:00
unbindOutsideClickListener ( ) {
if ( this . outsideClickListener ) {
document . removeEventListener ( 'click' , this . outsideClickListener ) ;
this . outsideClickListener = null ;
2019-05-21 12:54:05 +00:00
}
} ,
2020-01-08 08:07:46 +00:00
isOutsideTopbarMenuClicked ( event ) {
2020-01-08 08:06:24 +00:00
return ! ( this . $refs . topbarMenu . isSameNode ( event . target ) || this . $refs . topbarMenu . contains ( event . target ) ) ;
2022-02-23 13:44:06 +00:00
} ,
containerRef ( el ) {
this . container = el ;
2022-02-24 16:27:26 +00:00
}
2019-05-21 12:54:05 +00:00
}
}
2019-12-20 14:22:50 +00:00
< / script >
