ec-lib-test
v1.4.7
Published
Vue 3 component library with TestCard and TestGPT components
Maintainers
rggupta225Readme
ec-lib-test
Vue 3 component library with TestCard and TestGPT components.
Installation
npm install ec-lib-testPeer Dependencies
Note: Peer dependencies are only required when using the library in Vue 3 projects. Web components (see below) bundle all dependencies and don't require peer dependencies.
When using in Vue 3 projects, this library requires the following peer dependencies:
vue^3.0.0pinia^2.0.0 or ^3.0.0
Make sure to install them in your project:
npm install vue piniaUsage
In Vue 3 Projects
Option 1: Install as Plugin (Global Registration)
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import EcLibTest from 'ec-lib-test'
import 'ec-lib-test/dist/ec-lib-test.css'
const app = createApp(App)
app.use(createPinia()) // Required for TestGPT component
app.use(EcLibTest)
app.mount('#app')Then use components in your templates:
<template>
<div>
<TestCard
title="My Card"
description="Card description"
action="Click Me"
@action-click="handleClick"
/>
<TestGPT
:secret-key="apiKey"
model="gpt-4o-mini"
:max-tokens="300"
/>
</div>
</template>Option 2: Import Individual Components
<script setup>
import { TestCard, TestGPT } from 'ec-lib-test'
import 'ec-lib-test/dist/ec-lib-test.css'
</script>
<template>
<TestCard
title="My Card"
description="Card description"
@action-click="handleClick"
/>
<TestGPT
:secret-key="apiKey"
model="gpt-4o-mini"
/>
</template>As Script Tag (HTML/JavaScript)
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/pinia@2/dist/pinia.iife.js"></script>
<script src="https://unpkg.com/ec-lib-test/dist/ec-lib-test.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ec-lib-test/dist/ec-lib-test.css">
</head>
<body>
<div id="app">
<test-card
title="My Card"
description="Card description"
action="Click Me"
></test-card>
<test-gpt
:secret-key="apiKey"
model="gpt-4o-mini"
></test-gpt>
</div>
<script>
const { createApp } = Vue
const { createPinia } = Pinia
const app = createApp({
data() {
return {
apiKey: 'your-api-key-here'
}
}
})
app.use(createPinia())
app.use(EcLibTest)
app.mount('#app')
</script>
</body>
</html>As Web Components (Vanilla HTML/JavaScript - Framework Agnostic)
The library also provides web components that can be used in any HTML page without requiring Vue or Pinia. This is perfect for vanilla JavaScript projects or when you want to use the components without a framework.
Note: Web components are built separately and include all dependencies bundled, so no additional setup is required.
<!DOCTYPE html>
<html>
<head>
<script type="module">
import { registerWebComponents } from 'https://unpkg.com/ec-lib-test@latest/dist/vue-expedite-lib-web-components.es.js';
registerWebComponents();
</script>
</head>
<body>
<!-- TestCard component -->
<vue-expedite-test-card
title="My Card Title"
description="This is a test card description"
action="Click Me"
></vue-expedite-test-card>
<!-- TestGPT component -->
<vue-expedite-test-gpt
secret-key="your-api-key-here"
model="gpt-3.5-turbo"
max-tokens="300"
placeholder="Enter your message..."
></vue-expedite-test-gpt>
<script>
// Listen to events from TestCard
document.querySelector('vue-expedite-test-card').addEventListener('action-click', () => {
console.log('Card action clicked!');
});
</script>
</body>
</html>Important Notes for Web Components:
- Props are passed as HTML attributes using kebab-case (e.g.,
secretKeybecomessecret-key,maxTokensbecomesmax-tokens) - Events can be listened to using standard DOM event listeners
- CSS is automatically injected into the shadow DOM, so no additional stylesheet link is needed
- The web components are self-contained and include all dependencies (Vue, Pinia, etc.) bundled
Building Web Components:
The web components need to be built separately. You can build them using:
npm run build:web-componentsOr build both the main library and web components:
npm run build:allThis will generate:
dist/vue-expedite-lib-web-components.es.js(ES module)dist/vue-expedite-lib-web-components.umd.js(UMD module)dist/style.css(Styles - automatically loaded by components)
Note: The web components files are only generated when you run the build command. Make sure to build them before publishing or using the web components.
Components
TestCard
A card component with title, description, and action button.
Props:
title(String, required): Card titledescription(String, optional): Card descriptionaction(String, optional): Action button text (default: "Action")
Events:
action-click: Emitted when action button is clicked
Example:
<TestCard
title="Welcome"
description="This is a test card"
action="Get Started"
@action-click="handleClick"
/>TestGPT
A GPT chat component that integrates with OpenAI API.
Props:
secretKey(String, optional): OpenAI API secret keymodel(String, optional): GPT model to use (default: "gpt-3.5-turbo")maxTokens(Number, optional): Maximum tokens for response (default: 300)placeholder(String, optional): Input placeholder text (default: "Enter your message...")
Note: The secretKey can also be set via the Pinia store. See Store Usage below.
Example:
<TestGPT
:secret-key="apiKey"
model="gpt-4o-mini"
:max-tokens="500"
placeholder="Ask me anything..."
/>Store Usage
The library includes a Pinia store (useRootStore) that can be used to manage the GPT secret key globally:
import { useRootStore } from 'ec-lib-test'
const store = useRootStore()
store.setSecretKey('your-api-key-here')
// Use in component
const response = await store.getGptResponse(
[{ role: 'user', content: 'Hello' }],
'gpt-4o-mini',
300
)Development
# Install dependencies
npm install
# Run dev server
npm run dev
# Build library only
npm run build
# Build web components only
npm run build:web-components
# Build both library and web components
npm run build:allLicense
MIT