webui-vue/src/main.js

import { createApp } from 'vue';

import App from './App.vue';
import i18n from './i18n';

import router from './router';

//import { format } from 'date-fns-tz';

//Do not change store import.
//Exact match alias set to support
//dotenv customizations.
import store from './store';
import eventBus from './eventBus';

import './assets/styles/bmc/helpers/_index.scss';
import './assets/styles/bootstrap/_helpers.scss';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

import {
  BootstrapVue,
  AlertPlugin,
  BadgePlugin,
  ButtonPlugin,
  BVConfigPlugin,
  CardPlugin,
  CollapsePlugin,
  DropdownPlugin,
  FormPlugin,
  FormCheckboxPlugin,
  FormDatepickerPlugin,
  FormFilePlugin,
  FormGroupPlugin,
  FormInputPlugin,
  FormRadioPlugin,
  FormSelectPlugin,
  FormTagsPlugin,
  InputGroupPlugin,
  LayoutPlugin,
  LinkPlugin,
  ListGroupPlugin,
  ModalPlugin,
  NavbarPlugin,
  NavPlugin,
  PaginationPlugin,
  ProgressPlugin,
  TablePlugin,
  TabsPlugin,
  ToastPlugin,
  TooltipPlugin,
} from 'bootstrap-vue';

// Filters
/*
Vue.filter('shortTimeZone', function (value) {
  const longTZ = value
    .toString()
    .match(/\((.*)\)/)
    .pop();
  const regexNotUpper = /[*a-z ]/g;
  return longTZ.replace(regexNotUpper, '');
});

Vue.filter('formatDate', function (value) {
  const isUtcDisplay = store.getters['global/isUtcDisplay'];

  if (value instanceof Date) {
    if (isUtcDisplay) {
      return value.toISOString().substring(0, 10);
    }
    const pattern = `yyyy-MM-dd`;
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    return format(value, pattern, { timezone });
  }
});

Vue.filter('formatTime', function (value) {
  const isUtcDisplay = store.getters['global/isUtcDisplay'];

  if (value instanceof Date) {
    if (isUtcDisplay) {
      let timeOptions = {
        timeZone: 'UTC',
        hourCycle: 'h23',
      };
      return `${value.toLocaleTimeString('default', timeOptions)} UTC`;
    }
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    const shortTz = Vue.filter('shortTimeZone')(value);
    const pattern = `HH:mm:ss ('${shortTz}' O)`;
    return format(value, pattern, { timezone }).replace('GMT', 'UTC');
  }
});
*/

const app = createApp({
  router,
  store,
  render: (h) => h(App),
});
app.use(i18n);

app.use(router);
app.use(store);

// Plugins
app.use(BootstrapVue);
app.use(AlertPlugin);
app.use(BadgePlugin);
app.use(ButtonPlugin);
app.use(BVConfigPlugin, {
  BFormText: { textVariant: 'secondary' },
  BTable: {
    headVariant: 'light',
    footVariant: 'light',
  },
  BFormTags: {
    tagVariant: 'primary',
    addButtonVariant: 'link-primary',
  },
  BBadge: {
    variant: 'primary',
  },
});

app.use(CardPlugin);
app.use(CollapsePlugin);
app.use(DropdownPlugin);
app.use(FormPlugin);
app.use(FormCheckboxPlugin);
app.use(FormDatepickerPlugin);
app.use(FormFilePlugin);
app.use(FormGroupPlugin);
app.use(FormInputPlugin);
app.use(FormRadioPlugin);
app.use(FormSelectPlugin);
app.use(FormTagsPlugin);
app.use(InputGroupPlugin);
app.use(LayoutPlugin);
app.use(LayoutPlugin);
app.use(LinkPlugin);
app.use(ListGroupPlugin);
app.use(ModalPlugin);
app.use(NavbarPlugin);
app.use(NavPlugin);
app.use(PaginationPlugin);
app.use(ProgressPlugin);
app.use(TablePlugin);
app.use(TabsPlugin);
app.use(ToastPlugin);
app.use(TooltipPlugin);

app.mount('#app');
app.prototype.$eventBus = eventBus;