AautcqUI

AautcqUI is a Vue 3 components library.

Prerequisites

You will need the following things properly installed on your computer.

• Node.js (with NPM)

Install & config

With NPM

$ npm i @aautcq/aautcq-ui

Global components registration

In your Vue project, you can either register all components globally

import App from '@/App.vue';
import { createApp } from 'vue';
import createAautcqUi from '@aautcq/aautcq-ui';

const app = createApp(App);

const AautcqUI = createAautcqUi({
  // options object
});

app.use(AautcqUI).mount('#app');

On the fly import

You can also import components one at a time

<template>
  <aa-button>Hello world</aa-button>
</template>

<script setup lang="ts">
import { AaButton } from '@aautcq/aautcq-ui';
</script>

Important: if you choose this method, you must manually initialize the Filestack service using initFilestack (documentation below).

Options

The createAautcqUi method takes an options object as parameter. Below are the keys of this object, which can be used to customize you usage of AautcqUI.

• components - Array<String>

The array of component names to be globally registered. If not set, all components will be registered.

• locale - String

Locale to use for component wordings. Available locales are 'fr' and 'en'.

Composables

• Focus trap

This composable creates a focus trap: the focus cannot go outside of the specified HTML element.

<template>
  <div>
    <div ref="trapRef">Everything in here can be focused!</div>
    <div>Cannot be focused</div>
  </div>
</template>

<script setup lang="ts">
import { useFocusTrap } from '@/composables/useFocusTrap';

const { trapRef } = useFocusTrap();
</script>

Exposed methods

• Modals

To toggle modals built using the Modal.vue component, you can use the toggle exposed method.

<template>
  <aa-modal ref="myModal" name="my-modal">I am a modal!</aa-modal>

  <button type="button" @click="myModal.toggle()">Toggle modal</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const myModal = ref(null);
</script>

Alternatively, you can use the global toggleModal method.

<template>
  <aa-modal name="my-modal">I am a modal!</aa-modal>

  <button type="button" @click="toggleModal('my-modal')">Toggle modal</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { toggleModal } from '@aautcq/aautcq-ui';
</script>

• Locale

If you chose to import components on the fly (see above for more details), you might need to manually initialize the locale using the setLocale method.

In your main.js file:

import { setLocale } from '@aautcq/aautcq-ui';

const locale = 'fr';
setLocale(locale);

The accepted locale is the same as the options.locale string used in the createAautcqUi method.

Build the library

Kindly ask another developper for the content of the .env file, then run

$ npm run build

Run the documentation locally

To run the documentation locally, run

$ npm run docs:dev

Further Reading / Useful Links

• Vue 3
• Tailwind
• Sass
• Histoire
• TypeScript
• Vite