ec-composables

Vue 3 composables library with ExpediteConfigurator and CustomGPT components.

Installation

npm install ec-composables

Usage

Import as a Plugin

import { createApp } from 'vue'
import EcComposables from 'ec-composables'
import 'ec-composables/style'

const app = createApp(App)
app.use(EcComposables)

Note: The plugin automatically initializes Pinia if it's not already installed, so you don't need to install it separately.

Import Individual Components

import { ExpediteConfigurator, CustomGpt } from 'ec-composables'
import 'ec-composables/style'

Use in Templates

<template>
    <ExpediteConfigurator 
        :item-id="itemId" 
        :qli-id="qliId" 
        :rest-url="restUrl" 
    />
    
    <CustomGpt 
        :secret-key="apiKey"
        :model="model"
        :max-tokens="300"
    />
</template>

<script setup>
import { ExpediteConfigurator, CustomGpt } from 'ec-composables'
import 'ec-composables/style'

const itemId = 'your-item-id'
const qliId = 'your-qli-id'
const restUrl = 'your-rest-url'
const apiKey = 'your-openai-api-key'
const model = 'gpt-3.5-turbo'
</script>

Development

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Build Library

npm run build

Publish to npm

npm publish

Components

ExpediteConfigurator

A configurator component for product configuration.

Props:

• itemId (String, required) - The item ID
• qliId (String, optional) - The QLI ID
• restUrl (String, optional) - The REST API URL

CustomGpt

A ChatGPT-like component for AI conversations.

Props:

• secretKey (String, required) - OpenAI API key
• model (String, optional, default: 'gpt-3.5-turbo') - GPT model to use
• maxTokens (Number, optional, default: 300) - Maximum tokens
• placeholder (String, optional, default: 'Enter your message...') - Input placeholder

Shadow DOM Support

If you're using these components inside a Shadow DOM, the CSS will be automatically injected. However, if automatic injection doesn't work, you can manually inject the styles:

import { injectEcComposablesStyles } from 'ec-composables'

// Get the shadow root
const shadowRoot = yourShadowHost.shadowRoot

// Inject styles (CSS content will be extracted automatically)
injectEcComposablesStyles(shadowRoot)

// Or provide CSS content manually
injectEcComposablesStyles(shadowRoot, cssContentString)