Lightray Vue Component Library

Lightray is a Vue component library designed for seamlessly managing content in the Antbox ECM server. With four meticulously crafted components, Lightray streamlines interactions with Antbox, making your development faster and more intuitive. Whether you're integrating a single component or utilizing the entire plugin, Lightray is here to illuminate the path for you.

Table of Contents

• Installation
• Quick Start
• Usage
  • Using Single Component
  • Using as a Plugin
• Components

Installation

Installing Lightray is a breeze, simply run the following command:

npm install @zafir.co.ao/lightray

Quick Start

1. To use Lightray in your Vue project, first, install the package:

   npm install @zafir.co.ao/lightray

2. Next, add the following line to your src/main.ts:

   import "@zafir.co.ao/lightray/style.css";

Usage

Import the desired component or the entire plugin.

Using Single Component

For importing specific components into your Single File Components (SFC):

<!-- Inside your .vue file-->

<script lang="ts" setup>
	import { LrHelloLight } from "@zafir.co.ao/lightray";
</script>

<template>
	<LrHelloLight />
</template>

Using as a Plugin

For a more holistic approach, where you'd like to use all of Lightray's offerings, you can integrate it as a plugin:

// main.ts

import { createApp } from "vue";

import "./style.css";
import App from "./App.vue";

import { LightrayPlugin } from "@zafir.co.ao/lightray";
import "@zafir.co.ao/lightray/style.css";

createApp(App).use(LightrayPlugin).mount("#app");

Components

LrDiscovery

The LrDiscovery component serves as an interface to the Antbox ECM server.

| Property | Type | Required | Default | Description | | --------- | ------ | -------- | ------- | ---------------------------------------------- | | antboxUrl | String | Yes | - | URL for the Antbox server. | | token | String | No | - | Authentication token for Antbox. | | tenant | String | No | - | Specifies the tenant in a multi-tenant Antbox. |

LrWebContent

The LrWebContent component is designed to display and optionally allow the edition of web content based on the provided language.

| Property | Type | Required | Default | Description | | -------------- | ---------- | -------- | ------- | ---------------------------------------------------- | | lang | Language | Yes | - | Language of the displayed web content. | | webContent | WebContent | No | - | Object representing the web content to be displayed. | | editionAllowed | Boolean | No | false | Determines if the web content can be edited. | | onEdit | Function | No | - | Callback when the content is edited. |

Events:

• edit: Emitted when the web content is edited.

LrHelloLight

The LrHelloLight component is a simple greeting component.

(This component does not have any properties.)

(Optional) Configure project as PWA

To configure your project as a PWA, follow the steps at Vite PWA.