105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
import { disableExternal } from "@/utils/constants";
|
|
import { createApp } from "vue";
|
|
import VueLazyload from "vue-lazyload";
|
|
import Toast, { useToast } from "vue-toastification";
|
|
import createPinia from "@/stores";
|
|
import router from "@/router";
|
|
import i18n, { rtlLanguages } from "@/i18n";
|
|
import App from "@/App.vue";
|
|
import CustomToast from "@/components/CustomToast.vue";
|
|
|
|
import dayjs from "dayjs";
|
|
import localizedFormat from "dayjs/plugin/localizedFormat";
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|
import duration from "dayjs/plugin/duration";
|
|
import "./css/styles.css";
|
|
|
|
// register dayjs plugins globally
|
|
dayjs.extend(localizedFormat);
|
|
dayjs.extend(relativeTime);
|
|
dayjs.extend(duration);
|
|
|
|
const pinia = createPinia(router);
|
|
|
|
const app = createApp(App);
|
|
|
|
app.use(VueLazyload);
|
|
app.use(Toast, {
|
|
transition: "Vue-Toastification__bounce",
|
|
maxToasts: 10,
|
|
newestOnTop: true,
|
|
});
|
|
|
|
app.use(i18n);
|
|
app.use(pinia);
|
|
app.use(router);
|
|
|
|
app.mixin({
|
|
mounted() {
|
|
// expose vue instance to components
|
|
this.$el.__vue__ = this;
|
|
},
|
|
});
|
|
|
|
// provide v-focus for components
|
|
app.directive("focus", {
|
|
mounted: (el) => {
|
|
// initiate focus for the element
|
|
el.focus();
|
|
},
|
|
});
|
|
|
|
const toastConfig = {
|
|
position: "bottom-center",
|
|
timeout: 4000,
|
|
closeOnClick: true,
|
|
pauseOnFocusLoss: true,
|
|
pauseOnHover: true,
|
|
draggable: true,
|
|
draggablePercent: 0.6,
|
|
showCloseButtonOnHover: false,
|
|
hideProgressBar: false,
|
|
closeButton: "button",
|
|
icon: true,
|
|
};
|
|
|
|
app.provide("$showSuccess", (message: string) => {
|
|
const $toast = useToast();
|
|
$toast.success(
|
|
{
|
|
component: CustomToast,
|
|
props: {
|
|
message: message,
|
|
},
|
|
},
|
|
// their type defs are messed up
|
|
//@ts-ignore
|
|
{ ...toastConfig, rtl: rtlLanguages.includes(i18n.global.locale) }
|
|
);
|
|
});
|
|
|
|
app.provide("$showError", (error: Error | string, displayReport = true) => {
|
|
const $toast = useToast();
|
|
$toast.error(
|
|
{
|
|
component: CustomToast,
|
|
props: {
|
|
message: (error as Error).message || error,
|
|
isReport: !disableExternal && displayReport,
|
|
// TODO: i couldnt use $t inside the component
|
|
//@ts-ignore
|
|
reportText: i18n.global.t("buttons.reportIssue"),
|
|
},
|
|
},
|
|
// their type defs are messed up
|
|
//@ts-ignore
|
|
{
|
|
...toastConfig,
|
|
timeout: 0,
|
|
rtl: rtlLanguages.includes(i18n.global.locale),
|
|
}
|
|
);
|
|
});
|
|
|
|
router.isReady().then(() => app.mount("#app"));
|