wticreatorstudio/Modules/MenuPlus/Resources/assets/js/app.js

import { createApp } from 'vue';
import { createStore } from 'vuex';
import Vuex from 'vuex';
import App from './components/App';
import PrimeVue from 'primevue/config';
import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import InputNumber from 'primevue/inputnumber';
import Button from 'primevue/button';
import Calendar from 'primevue/calendar';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ToastService from 'primevue/toastservice';
import Toast from 'primevue/toast';
import ConfirmationService from 'primevue/confirmationservice';
import ConfirmDialog from 'primevue/confirmdialog';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
import Card from 'primevue/card';
import Panel from 'primevue/panel';
import Dropdown from 'primevue/dropdown';
import Listbox from 'primevue/listbox';
import ProgressSpinner from 'primevue/progressspinner';
import Divider from 'primevue/divider';
import RadioButton from 'primevue/radiobutton';
import InputSwitch from 'primevue/inputswitch';
import Checkbox from 'primevue/checkbox';

//import 'primevue/resources/themes/saga-blue/theme.css';       //theme
import 'primevue/resources/primevue.min.css';                 //core css
//import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css'                         //icons

import MenuItem from './components/MenuItem';
import MenuItemsList from './components/MenuItemsList';
import ColumnMenuItemsList from './components/ColumnMenuItemsList';
import AddItemForm from './components/AddItemForm';

const store = createStore({
    state() {
        return {
            items: [],
            roles: []
        }
    },
    getters: {
        items(state) {
            return state.items;
        },
        roles(state) {
            return state.roles;
        }
    },
    mutations: {
        setItem(state, items) {
            state.items = items;
        },
        clearItems(state) {
            state.items = [];
        },
        updateItems(state, items) {
            state.items = items;
        },
        addItem(state, item) {
            state.items.push(item);
        },
        removeItem(state, item) {
            for (let i = state.items.length - 1; i >= 0; i--) {
                if (item.itemKey == state.items[i].itemKey) {
                    console.log('item');
                    console.log(item);
                    console.log('state item');
                    console.log(state.items[i]);
                    state.items.splice(i, 1);
                    break;
                }
            }
        },
        updateRoles(state, roles) {
            state.roles = roles;
        }
    }
});

const app = createApp(App);

app.use(Vuex);
app.config.devtools = true;

app.use(store);
app.use(PrimeVue, { ripple: true });
app.use(ToastService);
app.use(ConfirmationService);
app.component('Toast', Toast);
app.component('ConfirmDialog', ConfirmDialog);
app.component('Dialog', Dialog);
app.component('InputText', InputText);
app.component('InputNumber', InputNumber);
app.component('Button', Button);
app.component('Calendar', Calendar);
app.component('DataTable', DataTable);
app.component('Column', Column);
app.component('TabView', TabView);
app.component('TabPanel', TabPanel);
app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab);
app.component('Card', Card);
app.component('Panel', Panel);
app.component('Dropdown', Dropdown);
app.component('Listbox', Listbox);
app.component('ProgressSpinner', ProgressSpinner);
app.component('Divider', Divider);
app.component('RadioButton', RadioButton);
app.component('InputSwitch', InputSwitch);
app.component('Checkbox', Checkbox);

app.component('MenuItem', MenuItem);
app.component('MenuItemsList', MenuItemsList);
app.component('ColumnMenuItemsList', ColumnMenuItemsList);
app.component('AddItemForm', AddItemForm);

app.mount('#menuplus');