scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-14 09:04:56 +08:00
Code Issues Projects Releases Packages Wiki Activity

Update outside click

Browse source
This commit is contained in:
Anton 2023-11-09 12:40:06 +01:00
parent 96fec890be
commit e4deaf41a1
16 changed files with 66 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/packs/vue/assign_items_to_task_modal.js
View file

@ -34,10 +34,8 @@ function initAssignItemsToTaskModalComponent() {
app.component('AssignItemsToTaskModalContainer', AssignItemsToTaskModalContainer);
app.use(PerfectScrollbar);
app.config.globalProperties.i18n = window.I18n;
app.mount('.assign-items-to-task-modal-container');
window.AssignItemsToTaskModalComponentContainer = app.mount('.assign-items-to-task-modal-container');
handleTurbolinks(app);
window.AssignItemsToTaskModalComponentContainer = app;
}
}

34
app/javascript/packs/vue/directives/outside_click.js
View file

@ -1,34 +0,0 @@
// Use this to register outside-click directive on a Vue component
// eslint-disable-next-line max-len
// eg v-click-outside="{handler: 'handlerToTrigger', exclude: [refs to ignore on click (eg 'searchInput', 'searchInputBtn')]}"
// eslint-enable-next-line max-len
export default {
bind(el, binding, vnode) {
el._vueClickOutside_ = (e) => {
let clickedOnExcludedEl = false;
const { exclude } = binding.value;
exclude.forEach(refName => {
if (!clickedOnExcludedEl) {
const excludedEl = vnode.context.$refs[refName];
if (!excludedEl) return;
clickedOnExcludedEl = (excludedEl._isVue ? excludedEl.$el : excludedEl).contains(e.target);
}
});
if (!el.contains(e.target) && !clickedOnExcludedEl) {
const { handler } = binding.value;
vnode.context[handler]();
}
};
document.addEventListener('click', el._vueClickOutside_);
document.addEventListener('touchstart', el._vueClickOutside_);
},
unbind(el) {
document.removeEventListener('click', el._vueClickOutside_);
document.removeEventListener('touchstart', el._vueClickOutside_);
el._vueClickOutside_ = null;
}
};

3
app/javascript/packs/vue/navigation/breadcrumbs.js
View file

@ -10,6 +10,5 @@ const app = createApp({});
app.component('Breadcrumbs', Breadcrumbs);
app.use(PerfectScrollbar);
app.config.globalProperties.i18n = window.I18n;
app.mount('#breadcrumbs');
window.breadcrumbsComponent = app.mount('#breadcrumbs');
handleTurbolinks(app);
window.breadcrumbsComponent = app;

4
app/javascript/packs/vue/navigation/navigator.js
View file

@ -47,9 +47,7 @@ function addNavigationNavigatorContainer() {
app.component('NavigatorContainer', NavigatorContainer);
app.use(PerfectScrollbar);
app.config.globalProperties.i18n = window.I18n;
app.mount('#sciNavigationNavigatorContainer');
window.navigatorContainer = app;
window.navigatorContainer = app.mount('#sciNavigationNavigatorContainer');
}
if (document.readyState !== 'loading') {

2
app/javascript/packs/vue/navigation/top_menu.js
View file

@ -2,13 +2,11 @@ import PerfectScrollbar from 'vue3-perfect-scrollbar';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
import TopMenuContainer from '../../../vue/navigation/top_menu.vue';
import outsideClick from '../directives/outside_click';
function addNavigationTopMenuContainer() {
const app = createApp({});
app.component('TopMenuContainer', TopMenuContainer);
app.use(PerfectScrollbar);
app.directive('click-outside', outsideClick);
app.config.globalProperties.i18n = window.I18n;
app.mount('#sciNavigationTopMenuContainer');
}

2
app/javascript/packs/vue/protocol.js
View file

@ -3,7 +3,6 @@
import PerfectScrollbar from 'vue3-perfect-scrollbar';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import ProtocolContainer from '../../vue/protocol/container.vue';
import outsideClick from './directives/outside_click';
import { handleTurbolinks } from './helpers/turbolinks.js';
window.initProtocolComponent = () => {
@ -16,7 +15,6 @@ window.initProtocolComponent = () => {
});
app.component('ProtocolContainer', ProtocolContainer);
app.use(PerfectScrollbar);
app.directive('click-outside', outsideClick);
app.config.globalProperties.i18n = window.I18n;
app.config.globalProperties.inlineEditing = window.inlineEditing;
app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;

4
app/javascript/packs/vue/repository_filter.js
View file

@ -150,7 +150,7 @@ window.initRepositoryFilter = () => {
app.component('FilterContainer', FilterContainer);
app.config.globalProperties.i18n = window.I18n;
app.config.globalProperties.dateFormat = $('#filterContainer').data('date-format');
app.mount('#filterContainer');
window.repositoryFilterObject = app.mount('#filterContainer');
handleTurbolinks(app);
$('#filterContainer').on('click', (e) => {
@ -161,6 +161,4 @@ window.initRepositoryFilter = () => {
$('#filtersDropdownButton').on('show.bs.dropdown', () => {
$('#filtersColumnsDropdown, #savedFiltersContainer').removeClass('open');
});
window.repositoryFilterObject = app;
};

3
app/javascript/packs/vue/repository_print_modal.js
View file

@ -30,9 +30,8 @@ function initPrintModalComponent() {
});
app.component('PrintModalContainer', PrintModalContainer);
app.config.globalProperties.i18n = window.I18n;
app.mount('.print-label-modal-container');
window.PrintModalComponent = app.mount('.print-label-modal-container');
handleTurbolinks(app);
window.PrintModalComponent = app;
}
}

6
app/javascript/packs/vue/repository_search.js
View file

@ -1,15 +1,11 @@
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import RepositorySearchContainer from '../../vue/repository_search/container.vue';
import outsideClick from './directives/outside_click';
import { handleTurbolinks } from './helpers/turbolinks.js';
window.initRepositorySearch = () => {
const app = createApp({});
app.component('RepositorySearchContainer', RepositorySearchContainer);
app.directive('click-outside', outsideClick);
app.config.globalProperties.i18n = window.I18n;
app.mount('#inventorySearchComponent');
window.RepositorySearchComponent = app.mount('#inventorySearchComponent');
handleTurbolinks(app);
window.RepositorySearchComponent = app;
}

2
app/javascript/packs/vue/results.js
View file

@ -1,13 +1,11 @@
import PerfectScrollbar from 'vue3-perfect-scrollbar';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import Results from '../../vue/results/results.vue';
import outsideClick from './directives/outside_click';
import { handleTurbolinks } from './helpers/turbolinks.js';
const app = createApp({});
app.component('Results', Results);
app.use(PerfectScrollbar);
app.directive('click-outside', outsideClick);
app.config.globalProperties.i18n = window.I18n;
app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
app.mount('#results');

2
app/javascript/vue/navigation/navigator.vue
View file

@ -12,7 +12,7 @@
@resizing="onResizeMove"
@resize-end="onResizeEnd"
>
<div class="ml-4 h-full border rounded bg-sn-white flex flex-col right-0 absolute navigator-container">
<div class="ml-4 h-full w-full border rounded bg-sn-white flex flex-col right-0 absolute navigator-container">
<div class="px-3 py-2.5 flex items-center relative leading-4">
<i class="sn-icon sn-icon-navigator"></i>
<div class="font-bold text-base pl-3">

11
app/javascript/vue/repository_search/container.vue
View file

@ -1,7 +1,7 @@
<template>
<div
class="flex items-center mr-3 flex-nowrap relative"
v-click-outside="{handler: 'closeSearchInputs', exclude: ['searchInput', 'searchInputBtn', 'barcodeSearchInput', 'barcodeSearchInputBtn']}"
<div
class="flex items-center mr-3 flex-nowrap relative"
v-click-outside="closeSearchInputs"
>
<button :class="{hidden: searchOpened}" ref='searchInputBtn' class="btn btn-light btn-black icon-btn" :title="i18n.t('repositories.show.search_button_tooltip')" @click="openSearch">
<i class="sn-icon sn-icon-search"></i>
@ -35,6 +35,8 @@
</template>
<script>
import { vOnClickOutside } from '@vueuse/components'
export default {
name: 'RepositorySearchContainer',
data() {
@ -45,6 +47,9 @@ export default {
value: ''
}
},
directives: {
'click-outside': vOnClickOutside
},
watch: {
barcodeValue() {
this.updateRepositoySearch();

6
app/javascript/vue/shared/menu_dropdown.vue
View file

@ -15,7 +15,7 @@
'!mb-0': !openUp,
}"
v-if="showMenu"
v-click-outside="{handler: 'closeMenu', exclude: ['openBtn', 'flyout']}">
v-click-outside="closeMenu">
<span v-for="(item, i) in listItems" :key="i" class="contents">
<div v-if="item.dividerBefore" class="border-0 border-t border-solid border-sn-light-grey"></div>
<a :href="item.url" v-if="!item.submenu"
@ -64,6 +64,7 @@
<script>
import isInViewPort from './isInViewPort.js';
import { vOnClickOutside } from '@vueuse/components'
export default {
name: 'DropdownMenu',
@ -81,6 +82,9 @@ export default {
openUp: false
}
},
directives: {
'click-outside': vOnClickOutside
},
watch: {
showMenu() {
if (this.showMenu) {

6
app/javascript/vue/shared/select.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-click-outside="{ handler: 'close', exclude: ['optionsContainer'] }" @click="toggle" ref="container" class="sn-select" :class="{ 'sn-select--open': isOpen, 'sn-select--blank': !valueLabel, 'disabled': disabled }">
<div v-click-outside="close" @click="toggle" ref="container" class="sn-select" :class="{ 'sn-select--open': isOpen, 'sn-select--blank': !valueLabel, 'disabled': disabled }">
<slot>
<button ref="focusElement" class="sn-select__value">
<span>{{ valueLabel || (placeholder || i18n.t('general.select')) }}</span>
@ -37,7 +37,7 @@
</div>
</template>
<script>
import outsideClick from '../../packs/vue/directives/outside_click';
import { vOnClickOutside } from '@vueuse/components'
export default {
name: 'Select',
@ -50,7 +50,7 @@
disabled: { type: Boolean, default: false }
},
directives: {
'click-outside': outsideClick
'click-outside': vOnClickOutside
},
data() {
return {

2
package.json
View file

@ -33,6 +33,8 @@
"@teselagen/ove": "^0.3.23",
"@vue/compiler-sfc": "^3.3.4",
"@vuepic/vue-datepicker": "^7.2.0",
"@vueuse/components": "^10.5.0",
"@vueuse/core": "^10.5.0",
"ajv": "6.12.6",
"autoprefixer": "10.4.14",
"axios": "^1.4.0",

41
yarn.lock
View file

@ -1650,6 +1650,11 @@
resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
"@types/web-bluetooth@^0.0.18":
version "0.0.18"
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz#74bd1c8fd3a2058cb6fc76b188fcded50a83d866"
integrity sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==
"@types/yauzl@^2.9.1":
version "2.10.1"
resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.1.tgz#4e8f299f0934d60f36c74f59cb5a8483fd786691"
@ -1767,6 +1772,37 @@
date-fns "^2.30.0"
date-fns-tz "^1.3.7"
"@vueuse/components@^10.5.0":
version "10.5.0"
resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-10.5.0.tgz#fdb8c20e3d9bf52a32be8c59dd389fa37acabd09"
integrity sha512-zWQZ8zkNBvX++VHfyiUaQ4otb+4PWI8679GR8FvdrNnj+01LXnqvrkyKd8yTCMJ9nHqwRRTJikS5fu4Zspn9DQ==
dependencies:
"@vueuse/core" "10.5.0"
"@vueuse/shared" "10.5.0"
vue-demi ">=0.14.6"
"@vueuse/core@10.5.0", "@vueuse/core@^10.5.0":
version "10.5.0"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.5.0.tgz#04d1e6d26592bb997bb755a4830ea7583c3e8612"
integrity sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==
dependencies:
"@types/web-bluetooth" "^0.0.18"
"@vueuse/metadata" "10.5.0"
"@vueuse/shared" "10.5.0"
vue-demi ">=0.14.6"
"@vueuse/metadata@10.5.0":
version "10.5.0"
resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.5.0.tgz#7501a88cf5cbf7a515a03f0b8bbe3cecf30cad11"
integrity sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==
"@vueuse/shared@10.5.0":
version "10.5.0"
resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.5.0.tgz#b3ac8c190a5dae41db5e1b60fe304a9b4247393c"
integrity sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==
dependencies:
vue-demi ">=0.14.6"
"@webassemblyjs/ast@1.11.1":
version "1.11.1"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@ -7776,6 +7812,11 @@ vm-browserify@^1.1.2:
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
vue-demi@>=0.14.6:
version "0.14.6"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
vue-loader@^16.0.0:
version "16.8.3"
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"