0.0.57 • Published 9 months ago

@actindo/core-ui v0.0.57

Weekly downloads
-
License
-
Repository
-
Last release
9 months ago

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
  • 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
  1. To use externally defined component
import { getExternalComponent } from "@actindo/core-ui";

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

9 months ago

0.0.55

10 months ago

0.0.56

10 months ago

0.0.54

10 months ago

0.0.42

1 year ago

0.0.43

1 year ago

0.0.44

1 year ago

0.0.45

1 year ago

0.0.46

1 year ago

0.0.47

1 year ago

0.0.51

12 months ago

0.0.52

12 months ago

0.0.53

11 months ago

0.0.50

1 year ago

0.0.48

1 year ago

0.0.49

1 year ago

0.0.41

1 year ago

0.0.40

1 year ago

0.0.39

1 year ago

0.0.38

1 year ago

0.0.37

1 year ago

0.0.36

1 year ago

0.0.35

1 year ago

0.0.34

1 year ago

0.0.33

1 year ago

0.0.32

1 year ago

0.0.30

1 year ago

0.0.31

1 year ago

0.0.29

1 year ago

0.0.28

1 year ago

0.0.27

1 year ago

0.0.25

1 year ago

0.0.26

1 year ago

0.0.24

1 year ago

0.0.23

1 year ago

0.0.22

1 year ago

0.0.20

1 year ago

0.0.21

1 year ago

0.0.19

1 year ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago