# 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 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
// @/plugins/core-ui.ts
import type { App } from "vue";
// Styles
import "@mdi/font/css/materialdesignicons.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";
import { mdi } from "vuetify/iconsets/mdi";
import { md, aliases } from "vuetify/iconsets/md";

import "vuetify/styles";
import "core1-ui/styles";
import { createCoreUi, dataTablePlugin } from "core1-ui";
import VueDraggable from "vuedraggable";

export default {
  install(app: App, options) {
    app
      .use(
        createCoreUi(
          {
            icons: {
              defaultSet: "md",
              aliases,
              sets: {
                mdi,
                md,
              },
            },
          },
          options,
        ),
      )
      // need these lines for ActindoDataTable
      .use(dataTablePlugin, {})
      .component("VueDraggable", VueDraggable);
  },
};
```

Install plugin and pass external dependencies (Pinia and VueRouter)

```ts
// main.ts
import { routerKey, routeLocationKey, viewDepthKey } from "vue-router";
import { createPinia } from "pinia";
import coreUiPlugin from "@/plugins/core-ui";

const pinia = createPinia();
const app = createApp(App)
  .use(coreUiPlugin, { pinia, routerKey, routeLocationKey, viewDepthKey })
  .use(pinia);
```

## Usage

Import needed components

```vue
<script setup lang="ts">
import { NotFound, ABtn } from "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 "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 {
    color: rgb(var(--v-theme-on_dark));
    .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 "core1-ui";
import { httpClient } from "core1-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);
  },
};
```
