Cheatsheet

Komponenty a utilities pro práci s Megio panelem.

Pro opravdu rychlou a efektivní práci s Megiem, bylo vytvořeno i několik komponent a utilities, které vám výrazně usnadní práci a ušetří spoustu času.

Co lze použít

assets/panel.ts

import {
    createMegioPanel,
    useGlobals,
    useComponents,
    useVuetify,
    useUpdateForm,
    useCreateForm,
    useToast,
    useRoute,
    useRouter,
} from 'megio-panel'

Přehled balíčku

Název	Popis	Parametry	Návratová hodnota	Ukázka
createMegioPanel	Inicializace Megio panelu	baseUrl: string options?: PanelOptions		zde
useGlobals	Výchozí hodnoty pro:		routes: RouteRecordRaw[] modals: IDatagridModal[] actions.row: IDatagidAction[] actions.bulk: IDatagidAction[] columns: IDatagridColumn[] fields: IDatagridField[] navbar: INavbarSettings	zde
useComponents	Viz megio komponenty			zde
useVuetify	Viz vuetify komponenty			zde
useCreateForm	Composable pro práci s <MDatagridForm/>	params: ICreateFormParams	ICreateForm	zde
useUpdateForm	Composable pro práci s <MDatagridForm/>	recipeName: string rowId: string	IUpdateForm	zde
useToast	Toast notifikace		callback add s parametry: message: string color: 'error/success/warning' timeout?: number = 7000	zde
useRoute	Aktuální routa		RouteLocationNormalizedLoaded	zde
useRouter	Vue router		Router	zde

Megio komponenty

Pro rychlé vytváření administračního rozhraní je možné použít Megio komponenty.

Pozor

Při použití useComponents() vám vaše IDE nedokáže nenašeptávat props, emits, apod. Pro tento problém aktuálně hledáme řešení. Pokud jste Vue Rockstars a víte jak na to, koukněte prosím na toto vlákno: 🍺 HELP NEEDED.

Přehled Megio komponent

Název komponenty	Popis	Ukázka
<MLayout/>	Wrapper pro admin layout	zde
<MPageHeading/>	Komponenta pro hlavní nadpis na stránce	zde
<MSideModal/>	Wrapper pro modál vyjíždějící z boku
----------------------	-------------------------------------------------	----------
<MDatagrid/>	Komponenta pro vygenerování datagridu	zde
<MDatagridForm/>	Komponenta pro formulář v datagridu	zde
<MRemoveModal/>	Modál pro potvrzení smazání
<MCollectionDatagrid/>	Komponenta pro vygenerování datagridu v kolekcích
----------------------	-------------------------------------------------	----------
<M*ColumnRenderer/>	Column renderery viz přehled column rendererů
<M*FieldRenderer/>	Field renderery viz přehled field rendererů

Vuetify komponenty

Lze použít i Vuetify komponenty - pozor ale, useVuetify() neobsahuje všechny Vuetify komponenty, ale jen ty, které jsou reálnou součástí Megio Panelu. Pokuď chcete použít všechny Vuetify komponenty, je potřeba si Vuetify nainstalovat samostatně.

Pozor

Při použití useVuetify() vám vaše IDE nedokáže nenašeptávat props, emits, apod. Pro tento problém aktuálně hledáme řešení. Pokud jste Vue Rockstars a víte jak na to, koukněte prosím na toto vlákno: 🍺 HELP NEEDED.

Dostupné Vuetify komponenty

<VApp/> <VAutocomplete/> <VAlert/> <VBadge/> <VBreadcrumbs/> <VBtn/> <VBtnToggle/> <VCard/> <VCardActions/> <VCardText/> <VCardTitle/> <VCheckbox/> <VChip/> <VChipGroup/> <VDialog/> <VDivider/> <VIcon/> <VInput/> <VList/> <VListItem/> <VListItemTitle/> <VMain/> <VMenu/> <VNavigationDrawer/> <VPagination/> <VProgressCircular/> <VSelect/> <VSwitch/> <VTextField/> <VTextarea/> <VTable/> <VTooltip/> <VForm/> <VContainer/> <VCol/> <VRow/> <VSpacer/> <VLayout/>

Podrobná dokumentace Vuetify komponent je dostupná na adrese vuetifyjs.com.