@zafir.co.ao/lightray

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.