@actindo/core-ui v0.0.39

CORE_UI package

Core-UI library exported as Node.js module

Installation

Have NodeJS and NPM installed on your machine and clone this repository.

Using npm:

npm i --save @actindo/core-ui

Peer dependencies:

• vue

npm i --save vue

• vue-i18n

npm i --save vue-i18n

• vue-router

npm i --save vue-router

• vuedraggable

npm i --save vuedraggable

• vuetify

npm i --save vuetify

• pinia

npm i --save pinia

• @vuelidate/core

npm i --save @vuelidate/core

• @vuelidate/validators

npm i --save @vuelidate/validators

Initial configuration

Prepare plugin initialization

// Styles
import "@mdi/font/css/materialdesignicons.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "@actindo/core-ui/styles";

// Locales
import en from "@/locales/en.json";
import de from "@/locales/de.json";

import { createApp } from "vue";
import { routerKey, routeLocationKey, viewDepthKey } from "vue-router";
import { createPinia } from "pinia";
import { createCoreUi } from "@actindo/core-ui";
import router from "./router";
import App from "./App.vue";

const pinia = createPinia();

const app = createApp(App)
  .use(createCoreUi, {
    integration: { pinia, routerKey, routeLocationKey, viewDepthKey },
    i18n: { messages: { en, de } },
  })
  .use(pinia)
  .use(router);

app.mount("#app");

Usage

Import needed components

<script setup lang="ts">
import { NotFound, ABtn } from "@actindo/core-ui";
</script>

<template>
  <NotFound code="" description="common.needAuthorization">
    <ABtn color="primary" size="large" :text="$t('common.openAccountPage')" />
  </NotFound>
</template>

<script setup lang="ts">
import { TabsNavigation, useNavigationTabs } from "@actindo/core-ui";
import { taxesRoutes } from "@/router/topBarRoutes";

const tabs = useNavigationTabs(taxesRoutes);
</script>

<template>
  <div class="d-flex flex-column h-100 overflow-hidden">
    <TabsNavigation class="taxes-view ma-2" :tabs="tabs" />
  </div>
</template>

<style lang="scss">
.taxes-view {
  .a-data-table {
    background-color: rgb(var(--v-theme-background_2));
  }
}
</style>

Import functions and types

import type { IDataTableQuery, IDataFetcherResponse } from "@actindo/core-ui";
import { httpClient } from "@actindo/core-ui";

import { BASE_API } from "../base";

const MODULE_BASE_API = `${BASE_API}Country.`;

export const mockApi = {
  async getCountries(
    query: IDataTableQuery,
  ): Promise<IDataFetcherResponse<any>> {
    return httpClient.post(`${MODULE_BASE_API}getCountries`, query);
  },
};

Externally defined components

1. To make the components available for download and external use, it is necessary:

• in the external-lib.vite.config.ts file
  • in the build.lib.entry section, add the path to the components
  • the path to the build results is determined by the LIB_FOLDER constant (dist-components by default )
• build them vite build -c external-lib.vite.config.ts
• deploy build artifacts

2. To use externally defined component

import { getExternalComponent } from "@actindo/core-ui";

const AComponent = getExternalComponent({
  name: "component-name",
  url: "https://..../component.mjs",
});