storj/web/satellite/src/main.ts
NickolaiYurchenko 3c8f68fed9 web/satellite: pinia package added
added to replace vuex in future
buckets, projects and users modules pinia analogues created
have no pretty and straight-forward ways to work with option api + ts files so it is better to use with composition api components

Change-Id: Ia8acc491c0e76e01bf6d533747d186257680e5c9
2022-11-08 11:22:58 +00:00

96 lines
2.2 KiB
TypeScript

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';
import VueSanitize from 'vue-sanitize';
import { createPinia, PiniaVuePlugin } from 'pinia';
import App from './App.vue';
import { router } from './router';
import { store } from './store';
import { Size } from '@/utils/bytesSize';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
window['VueNextTick'] = function(callback) {
return Vue.nextTick(callback);
};
Vue.config.devtools = true;
Vue.config.performance = true;
Vue.config.productionTip = false;
Vue.use(new NotificatorPlugin(store));
Vue.use(VueClipboard);
Vue.use(VueSanitize);
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
/**
* Click outside handlers.
*/
const handlers = new Map();
document.addEventListener('click', event => {
for (const handler of handlers.values()) {
handler(event);
}
});
/**
* Binds closing action to outside popups area.
*/
Vue.directive('click-outside', {
bind(el, binding) {
const handler = event => {
if (el !== event.target && !el.contains(event.target)) {
binding.value(event);
}
};
handlers.set(el, handler);
},
unbind(el) {
handlers.delete(el);
},
});
/**
* number directive allow user to type only numbers in input.
*/
Vue.directive('number', {
bind (el: HTMLElement) {
el.addEventListener('keydown', (e: KeyboardEvent) => {
const keyCode = parseInt(e.key);
if (!isNaN(keyCode) || e.key === 'Delete' || e.key === 'Backspace') {
return;
}
e.preventDefault();
});
},
});
/**
* centsToDollars is a Vue filter that converts amount of cents in dollars string.
*/
Vue.filter('centsToDollars', (cents: number): string => {
return `$${(cents / 100).toFixed(2)}`;
});
/**
* Converts bytes to base-10 types.
*/
Vue.filter('bytesToBase10String', (amountInBytes: number): string => {
return `${Size.toBase10String(amountInBytes)}`;
});
new Vue({
router,
store,
pinia,
render: (h) => h(App),
}).$mount('#app');