# 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:

```bash
npm i --save @actindo/core-ui
```

Peer dependencies:

- vue

```bash
npm i --save vue
```

- vue-i18n

```bash
npm i --save vue-i18n
```

- vue-router

```bash
npm i --save vue-router
```

- vuedraggable

```bash
npm i --save vuedraggable
```

- vuetify

```bash
npm i --save vuetify
```

- pinia

```bash
npm i --save pinia
```

- @vuelidate/core

```bash
npm i --save @vuelidate/core
```

- @vuelidate/validators

```bash
npm i --save @vuelidate/validators
```

## Initial configuration

Prepare plugin initialization

```ts
// 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

```vue
<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>
```

---

```vue
<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 {
  .tab-panel {
    .v-slide-group-item--active {
      color: rgb(var(--v-theme-on_dark));
    }
  }

  .a-data-table {
    background-color: rgb(var(--v-theme-background_2));
  }
}
</style>
```

---

Import functions and types

```ts
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

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

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