open-index/open-npm huggingface dataset:
npm package: @podtoo/songrotate-client
Description: SongRotate / Podtoo Data API client (fetch & artists) for Node/Next.js
Latest version: 0.1.19

# @podtoo/songrotate-client

A tiny, typed client for the Podtoo **Data APIs** (SongRotate), supporting:
- `GET /api/v1/fetch` — campaigns (releases/songs)
- `GET /api/v1/artists` — artist profiles

Works great in **Next.js** (Node 18+). Uses global `fetch`.

# Quick start
```typescript
import SongRotate from "@podtoo/songrotate-client";

// Configure once at startup (server-side)
SongRotate.conf({
  domain: "https://songrotate.com",   
  api: "/api/v1",                     
  token: process.env.PT_API_KEY       
});

// --- Fetch campaigns (/fetch) ---
const campaigns = await SongRotate.fetch({
  status: "active",
  artist: "armin",
  sortBy: "releaseDate",
  order: "desc",
  limit: 10
});

console.log("Active campaigns:", campaigns.items);

// --- Fetch artists (/artists) ---
const artists = await SongRotate.artist({
  q: "van",
  limit: 50,
  order: "asc"
});

console.log("Artists:", artists.items);
```
npm package: @podut/cwescan-sdk
Description: JavaScript/TypeScript SDK for CWEScan
Author: Podut
Latest version: 0.3.0

# podut cwescan SDK

> ⚠️ **Work in Progress**: This SDK is currently under active development. The API is subject to change and may introduce breaking changes in future releases.

`@podut/cwescan-sdk` is an HTTP/REST based client for TypeScript, built on top of the [cwescan API](https://cwescan.com).

## Why cwescan?

LLMs rely on outdated or generic training data about the libraries you use. This leads to:

- Code examples based on year-old training data
- Hallucinated APIs that don't exist
- Generic answers for old package versions

cwescan solves this by providing up-to-date, version-specific documentation and code examples directly from the source. Use this SDK to:

- Build AI agents with accurate, current documentation context
- Create RAG pipelines with reliable library documentation
- Power code generation tools with real API references

## Quick Start

### Install

```bash
npm install @podut/cwescan-sdk
```

### Get API Key

Get your API key from [cwescan](https://cwescan.com)

## Basic Usage

```ts
import { cwescan } from "@podut/cwescan-sdk";

const client = new cwescan({
  apiKey: "<cwescan_API_KEY>",
});

// Search for libraries
const libraries = await client.searchLibrary(
  "I need to build a UI with components",
  "react"
);
console.log(libraries[0].id); // "/facebook/react"

// Get documentation as JSON array (default)
const docs = await client.getContext("How do I use hooks?", "/facebook/react");
console.log(docs[0].title, docs[0].content);

// Get documentation context as plain text
const context = await client.getContext(
  "How do I use hooks?",
  "/facebook/react",
  { type: "txt" }
);
console.log(context);
```

## Configuration

### Environment Variables

You can set your API key via environment variable:

```sh
cwescan_API_KEY=cwescansk-...
```

Then initialize without options:

```ts
const client = new cwescan();
```

## Docs

See the [documentation](https://cwescan.com/docs/sdks/ts/getting-started) for details.

## Contributing

### Running tests

```sh
pnpm test
```

### Building

```sh
pnpm build
```
npm package: @podut/cwescan-tools-ai-sdk
Description: CWEScan tools for Vercel AI SDK
Author: Podut
Latest version: 0.2.2

# podut cwescan AI SDK

`@podut/cwescan-tools-ai-sdk` provides [Vercel AI SDK](https://ai-sdk.dev/) compatible tools and agents that give your AI applications access to up to date library documentation through cwescan.

Use this package to:

- Add documentation lookup tools to your AI SDK workflows with `generateText` or `streamText`
- Create documentation aware agents using the pre-configured `cwescanAgent`
- Build RAG pipelines that retrieve accurate, version specific code examples

The package provides two main tools:

- `resolveLibrary` - Searches cwescan's database to find the correct library ID
- `getLibraryDocs` - Fetches documentation for a specific library with optional topic filtering

## Quick Start

### Install

```bash
npm install @podut/cwescan-tools-ai-sdk @podut/cwescan-sdk ai zod
```

### Get API Key

Get your API key from [cwescan](https://cwescan.com)

## Usage

### Using Tools with `generateText`

```typescript
import { resolveLibrary, getLibraryDocs } from "@podut/cwescan-tools-ai-sdk";
import { generateText, stepCountIs } from "ai";
import { openai } from "@ai-sdk/openai";

const { text } = await generateText({
  model: openai("gpt-4o"),
  prompt: "How do I use React Server Components?",
  tools: {
    resolveLibrary: resolveLibrary(),
    getLibraryDocs: getLibraryDocs(),
  },
  stopWhen: stepCountIs(5),
});

console.log(text);
```

### Using the cwescan Agent

The package provides a pre-configured agent that handles the multi-step workflow automatically:

```typescript
import { cwescanAgent } from "@podut/cwescan-tools-ai-sdk";
import { anthropic } from "@ai-sdk/anthropic";

const agent = new cwescanAgent({
  model: anthropic("claude-sonnet-4-20250514"),
});

const { text } = await agent.generate({
  prompt: "How do I set up routing in Next.js?",
});

console.log(text);
```

## Configuration

### Environment Variables

Set your API key via environment variable:

```sh
cwescan_API_KEY=cwescansk-...
```

Then use tools and agents without explicit configuration:

```typescript
const tool = resolveLibrary(); // Uses cwescan_API_KEY automatically
```

## Docs

See the [documentation](https://cwescan.com/docs/agentic-tools/ai-sdk/getting-started) for details.

## Contributing

### Running tests

```sh
pnpm test
```

### Building

```sh
pnpm build
```
npm package: @podzito/vue3-carousel
Description: This is a fork of https://ismail9k.github.io/vue3-carousel/. Our goal is to extend this base functionality to provide more diverse usage scenarios.
Latest version: 0.4.1

# Vue 3 Carousel

This is a fork of https://ismail9k.github.io/vue3-carousel/. Our goal is to extend this base functionality to provide more diverse usage scenarios.

Modern lightweight Vue 3 carousel component

## Documentation

Coming soon ...

## Features

- [x] Responsive breakpoints
- [x] Mouse/touch dragging
- [x] Infinity scroll (wrapping around)
- [x] Auto play
- [x] Add classes for active and for visible slides
- [x] RTL
- [x] Enrich a11y

## Getting started

### Installation

First step is to install it using `yarn` or `npm`:

```bash
npm install @podzito/vue3-carousel

# or use yarn
yarn add @podzito/vue3-carousel
```

### Basic Using

```vue
<template>
  <carousel :items-to-show="1.5">
    <slide v-for="slide in 10" :key="slide">
      {{ slide }}
    </slide>

    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
</template>

<script>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import '@podzito/vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from '@podzito/vue3-carousel'

export default {
  name: 'App',
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
}
</script>
```
npm package: @podzito/vue3-slider-component
Description: A highly customized slider component for Vue 3
Author: Arshad M
Latest version: 1.0.3

![banner](https://github.com/s-sasaki-0529/vue-slider-component/blob/master/.github/banner.jpg?raw=true)

[![license](https://img.shields.io/npm/l/express.svg)]()

> 🎚 A highly customized slider component

## Forked from [s-sasaki-0529/vue-slider-component](https://github.com/s-sasaki-0529/vue-slider-component)

This repository is forked from [s-sasaki-0529/vue-slider-component](https://github.com/s-sasaki-0529/vue-slider-component) which in turn is a fork from [NightCatSame/vue-slider-component](https://github.com/NightCatSama/vue-slider-component) (v3.2.10) and rewritten to work with Vue 3.

Please note that this fork is work in progress, so some links may still point to the work that _s-sasaki-0529_ has done.

## 🎯 install

```bash
$ yarn add @podzito/vue3-slider-component
# npm install @podzito/vue3-slider-component --save
```

## ✨ Features

- 🛠️ More customizable
- 🐳 Support for more sliders
- 📌 Add marks

## 📚 Documentation

[Storybook](https://vue3-slider-component.netlify.app/?path=/docs/vue3-slider-component--vue3-slider-component)

## 🚀 Usage

```vue
<script setup lang="ts">
import { ref } from 'vue'
import VueSlider from '@podzito/vue3-slider-component'

const value = ref(0)
</script>

<template>
  <div>
    <VueSlider v-model="value" />
    <p>Value: {{ value }}</p>
  </div>
</template>
```

Also available in the Options API

```vue
<template>
  <VueSlider v-model="value" />
</template>

<script>
import VueSlider from '@podzito/vue3-slider-component'

export default {
  components: {
    VueSlider,
  },
  data() {
    return {
      value: 0,
    }
  },
}
</script>
```

## License

Licensing is in accordance with the original.

[MIT](https://github.com/NightCatSama/vue-slider-component/blob/master/LICENSE)
npm package: @poech/camel-hump-unde
Description: JavaScript variable naming transformation
Author: poe.chiang
Latest version: 1.0.6

# @poech/camel-dump-under

JavaScript name conversion

# Declaration

The name of this package is incorrect. It has been officially renamed @poech/camel-hump-under. Since the release operation cannot be undone, and it cannot be invalidated, we hereby make this statement and attach the new package link:

> 1.0.0 Deprecated @poech/camel-dump-unde,Please replace it with <kbd> [@poech/camel-dump-under](https://www.npmjs.com/package/@poech/camel-hump-under)</kbd>
npm package: @poech/camel-hump-under
Description: JavaScript variable naming transformation
Author: poe.chiang
Latest version: 1.1.0

# @poech/camel-dump-under

JavaScript name conversion

# Install

npm
```bash
$ npm install @poech/camel-dump-under --dev-save
```

yarn
```bash
$ yarn add @poech/camel-hump-under -D
```

## Usage


```js

// const is = require( '@poech/camel-hump-under' );
import chu from '@poech/camel-hump-under';

const { camel, hump, hyphen, underline } = chu


let v = 'abCde-fg-Hi_gk_Lmn';
console.log(camel(v));		// abCdeFgHiGkLmn
console.log(hump(v));		// AbCdeFgHiGkLmn (Capitalize the first letter)
console.log(hyphen(v));		// ab-cde-fg-hi-gk-lmn 
console.log(underline(v));	// ab_cde_fg_hi_gk_lmn
```
npm package: @poeledger/economy-data
Description: Generated TS bindings from Rust+Typeshare
Author: Matt Conway
Latest version: 0.3.0

# poeledger-economy-data

A Rust crate and generated Typescript lib for converting poe.ninja CSV data dumps into usable Rust structs

## Typscript Generation

The Rust library is annotated with `typeshare` annotations as needed, and the Typeshare CLI can be used to generate a basic Typescript library to keep types in sync between the two languages. Here's the Typeshare CLI command to use:
```sh
typeshare . --lang=typescript --output-file=generated/lib.ts
```
Some types can't be mapped to Typescript, such as `NaiveDate` from `chrono`, so we must manually replace this with `Date` in the generated bindings
npm package: @poembyrabbit/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 2.1.4

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @poemsqpoem/material-demo
Description: material-demo
Latest version: 0.1.2

# demo component

@alifd/example-component

intro component

## API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
|        |      |      |      |        |      |
npm package: @poen/test_napi2-linux-arm-gnueabihf
Description: 测试 napi-cli 发包
Latest version: 0.0.6

# `@poen/test_napi2-linux-arm-gnueabihf`

This is the **armv7-unknown-linux-gnueabihf** binary for `@poen/test_napi2`
npm package: @poetadigital/alert
Description: Template for bundle Vue component or plugin for NPM
Latest version: 0.0.7
Deprecated: This package is not supported.

# Alert

```shell
$ npm install @poetadigital/alert --save
```

## Usage
### Global

In `main.js` of Vue projects
```javascript
import PAlert from '@poetadigital/alert';
import App from './App.vue';

Vue.use(PAlert);

new Vue({
  render: (h) => h(App),
}).$mount('#app');
```

In `App.vue`, you can use `PAlert` component

```vue
<template>
    <div>
        <PAlert
          message="Error messages"
          alertType="error"
        />
    </div>
</template>

<script>
export default {
    name: 'App',
}
</script>
```

### Import Component

```vue
<template>
  <div class="app">
    <PAlert
      message="Error messages"
      alertType="error"
      customClass="custom-class"
      :customIconStyle="iconStyle"
      :customTextStyle="textStyle"
    >
    /* Icon alert SVG */
      <IconAlertError />
    </PAlert>
  </div>
</template>

<script>
import PAlert from "./components/PAlert";

export default {
  components: { PAlert }
};
</script>

<style></style>
```

## Props

| Props            | Required | Default | Type   | Description                                                   |
|------------------|----------|---------|--------|---------------------------------------------------------------|
| message          | N        | -       | String | Alert message                                                 |
| alertType        | N        | error   | String | error, warning, success, custom                               |
| :customStyle     | N        | fasle   | Object | A custom style object to override the base styles.            |
| :customIconStyle | N        | -       | Object | A custom icon style object to override the base icon styles.  |
| :customTextStyle | N        | -       | Object | A custom text style object to override the base text styles.  |
| customClass      | N        | -       | String | A custom class to override the base classes.                  |
| customIconClass  | N        | -       | String | A custom icon class object to override the base icon classes. |
| customTextClass  | N        | -       | String | A custom text class object to override the base text classes. |

## License

MIT © [Dang Van Thanh](https://dangthanh.org)
npm package: @poetadigital/avatar
Description: > Description
Author: info@poetadigital.com
Latest version: 1.0.6
Deprecated: This package is not supported by poetadigital.

# Core

> Description

## Install

```shell
$ npm install @poetadigital/core --save-dev
```

## Getting Starting

How to use component

### Paramters

| Props | Required | Default | Type   | Description         |
|-------|----------|---------|--------|---------------------|
| msg   | true     | ''      | String | Message for display |

### Usage

```vue
<template>
  <div class="app">
    <PCore msg="Poeta Digital"/>
  </div>
</template>

<script>
import PCore from '@poetadigital/core';

export default {
  components: { PCore }
};
</script>

<style scoped></style>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/breadcrumbs
Description: Simple Vue Breadcrumbs
Author: info@poetadigital.com
Latest version: 0.0.3
Deprecated: This package is not supported by poetadigital.

# Poeta Digital Breadcrumbs

> Simple Breadcrumbs

## Usage

### Global

In `main.js` of Vue projects

```javascript
import PBreadcrumbs from '@poetadigital/breadcrumbs'
import App from './App.vue'

Vue.use(breadcrumbs)

new Vue({
  render: h => h(App),
}).$mount('#app')
```
### Route

In `route.js` of Vue projects add `meta` => `breadcrumb` property

```javascript
const routes = [
  { 
    path: '/', 
    meta: {
      breadcrumb: [
        {name : 'Student List', link: 'student'},
        {name : 'Student Assessment', link: 'list-assessment'},
        {name : 'Assessment Result'}
      ]
    },
  }
]
```

### Import Component

```javascript
<template>
    <div>
        <PBreadcrumbs/>
    </div>
</template>

<script>
import PBreadcrumbs from '@poetadigital/breadcrumbs';

export default {
    name: 'App',
    components: { PBreadcrumbs }
}
</script>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/buttons
Description: > Buttons component
Author: info@poetadigital.com
Latest version: 0.1.0
Deprecated: This package is not supported by poetadigital.

# Buttons

> Buttons component

## Install

```shell
$ npm install @poetadigital/buttons --save
```

## Getting Starting

How to use component

### Parameters

| Props       | Required | Default | Type    | Description                                                            |
|-------------|----------|---------|---------|------------------------------------------------------------------------|
| id          | false    | null    | String  | Equivalent to the `id` attribute on an `<button>`.                     |
| customClass | false    | null    | String  | Attach your custom class on the compontent.                            |
| name        | false    | null    | String  | Equivalent to the `name` attribute on an `<button>`.                   |
| disabled    | false    | null    | Boolean | Equivalent to the `disabled` attribute on an `<button>`.               |
| outline     | false    | false   | Boolean | The `outline` button is transparent with border button.                |
| variant     | false    | default | String  | The value can be `default`, `primary`, `secondary`, `third`, `fourth`. |
| @click      | false    | null    | Object  | Set the click event on `<button>`.                                     |

### Usage

```vue
<template>
  <div class="App">
    <PButton variant="primary">Submit</PButton>
    <PButton variant="primary" outline>Submit</PButton>
  </div>
</template>

<script>
import PButton from '@poetadigital/buttons';

export default {
  components: { PButton }
};
</script>

<style scoped></style>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/checkbox-toggle
Description: Template for bundle Vue component or plugin
Author: dangvanthanh@dangthanh.org
Latest version: 0.0.9
Deprecated: This package is not supported by poetadigital.

# Checkbox Toogle

![](screenshot.png)

## Install

```shell
$ npm install @poetadigital/checkbox-toggle --save
```

## Usage

```
<template>
  <div class="app">
    <PCheckboxToggle v-model="isActive"/>
    
    <!-- Disabled checkbox toggle -->
    <PCheckboxToggle v-model="isDisabled" :disabled="true"/>

    <!-- Use with CSS custom variables -->
    <PCheckboxToggle v-model="isUnactive" class="checkbox-toggle-custom"/>
  </div>
</template>

<script>
import PCheckboxToggle from '@poetadigital/checkbox-toggle';

export default {
  components: { PCheckboxToggle },
  data() {
    return {
      isActive: true,
      isUnactive: false,
      isDisabled: false
    }
  }
};
</script>

<style>
@import "@poetadigital/checkbox-toggle/dist/checkbox-toggle.esm.css";

.checkbox-toggle-custom {
  --checkbox-bg: #d9534f;
  --checkbox-bg-active: #c9302c;
}
</style>
```

## Props

| Prop     | Description                                                                         |
|----------|-------------------------------------------------------------------------------------|
| disabled | The status of element for mutable, focusable or event submitted. Default is `false` |


## CSS Custom Properties

```css
:root {
  --checkbox-bg: #f2f2f2;
  --checkbox-bg-active: #3498db;
}
```


## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/progress-bar
Description: Template for bundle Vue component or plugin for NPM
Latest version: 0.0.4
Deprecated: This package is not supported by poetadigital.

# Poeta Digital Progress Bar

> A simple, flexible progress bar.

## Install

```shell
$ npm install @poetadigital/progress-bar --save-dev
```
## Usage

### Global

In `main.js` of Vue projects

```javascript
import PProgressBar from '@poetadigital/progress-bar';
import App from './App.vue';

Vue.use(PProgressBar);

new Vue({
  render: (h) => h(App),
}).$mount('#app');
```

In `App.vue`, you can use `PProgressBar` component
```vue
<template>
  <div class="app">
    <PProgressBar
        class="custom-progress-bar"
        barBorderRadius="100"
        size="huge"
        val="50"
        textPosition="middle"
        text="50%"
    />
    <span> 50% </span>
  </div>
</template>

<script>
export default {
    name: 'App',
}
</script>
```

### Import Component

```vue
<template>
  <div class="app">
    <PProgressBar
        class="custom-progress-bar"
        barBorderRadius="100"
        size="huge"
        val="50"
        textPosition="middle"
        text="50%"
    />
    <span> 50% </span>
  </div>
</template>

<script>
import PProgressBar from '@poetadigital/progress-bar';

export default {
    name: 'App',
    components: { PProgressBar }
}
</script>
```

### Props

| Props           | Type             | Values                                         | Default           |
|-----------------|------------------|------------------------------------------------|-------------------|
| val             | Number           | 0 - max                                        | 0                 |
| max             | Number           | Any number                                     | 100               |
| size            | Number \| String | tiny, small, medium, large, huge, massive, {n} | 10                |
| borderProgress  | String           | CSS                                            | 1px solid #D9D9D9 |
| barColor        | String           | Color                                          | #0085FF           |
| barColor        | String           | Color                                          | #0085FF           |
| barTransition   | String           | CSS                                            | all 0.5s ease     |
| barBorderRadius | Number           | 0 - max                                        | 0                 |
| spacing         | Number           | Any Number                                     | 4                 |
| text            | String           | Text to display                                | empty             |
| textAlign       | String           | left, right, center                            | center            |
| textPosition    | String           | bottom, top, middle, inside                    | bottom            |
| textSize        | Number           | Any Number                                     | 13                |
| textFgColor     | String           | Color                                          | #222222           |

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/ptext-input-validators
Description: Template for bundle Vue component or plugin
Author: poetadigital
Latest version: 0.0.4
Deprecated: This package is not supported by poetadigital.

# Vue Rollup Plugin Template

> Template for bundle Vue component or plugin

## Usage

You can [generate this template](https://github.com/dangvanthanh/vue-rollup-plugin/generate) or use `degit` make copy the template

```shell
$ npx degit dangvanthanh/vue-rollup-plugin
```

then find `vue-base` in javascript files of `build` folder then replace all by name of your component.

## License

MIT © [Dang Van Thanh](https://dangthanh.org)
npm package: @poetadigital/text-input-validators
Description: Text input validators
Author: Poeta Digital
Latest version: 0.0.9
Deprecated: This package is not supported by poetadigital.

# Poeta Digital Text Input Validators

> Text input validators

## Usage

### Global

In `main.js` of Vue projects

```javascript
import PTextInputValidators from '@poetadigital/text-input-validators'
import App from './App.vue'

Vue.use(PTextInputValidators)

new Vue({
  render: h => h(App),
}).$mount('#app')
```

### Import Component

```javascript
<template>
    <div>
        <PTextInputValidators/>
    </div>
</template>

<script>
import PTextInputValidators from '@poetadigital/text-input-validators';

export default {
    name: 'App',
    components: { PTextInputValidators }
}
</script>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/vue-alert
Description: > Alert component
Author: info@poetadigital.com
Latest version: 0.2.5

# Alert

> Alert component

## Install

```shell
$ npm install @poetadigital/vue-alert --save
```

## Getting Starting

How to use component

### Parameters

| Props            | Required | Default | Type   | Description                                                   |
|------------------|----------|---------|--------|---------------------------------------------------------------|
| message          | N        | -       | String | Alert message                                                 |
| alertType        | N        | error   | String | error, warning, success, custom                               |
| :customStyle     | N        | fasle   | Object | A custom style object to override the base styles.            |
| :customIconStyle | N        | -       | Object | A custom icon style object to override the base icon styles.  |
| :customTextStyle | N        | -       | Object | A custom text style object to override the base text styles.  |
| customClass      | N        | -       | String | A custom class to override the base classes.                  |
| customIconClass  | N        | -       | String | A custom icon class object to override the base icon classes. |
| customTextClass  | N        | -       | String | A custom text class object to override the base text classes. |

### Usage

```vue
<template>
  <div class="App">
    <PAlert alertType="error" message="Error messages" />
  </div>
</template>

<script>
import PAlert from '@poetadigital/vue-alert';

export default {
  components: { PAlert }
};
</script>

<style scoped></style>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/vue-breadcrumbs
Description: Simple Vue Breadcrumbs
Author: info@poetadigital.com
Latest version: 0.2.0

# Poeta Digital Breadcrumbs

> Simple Breadcrumbs

## Usage

### Global

In `main.js` of Vue projects

```javascript
import PBreadcrumbs from '@poetadigital/vue-breadcrumbs'
import App from './App.vue'

Vue.use(breadcrumbs)

new Vue({
  render: h => h(App),
}).$mount('#app')
```
### Route

In `route.js` of Vue projects add `meta` => `breadcrumb` property

```javascript
const routes = [
  { 
    path: '/', 
    meta: {
      breadcrumb: [
        {name : 'Student List', link: 'student'},
        {name : 'Student Assessment', link: 'list-assessment'},
        {name : 'Assessment Result'}
      ]
    },
  }
]
```

### Import Component

```javascript
<template>
    <div>
        <PBreadcrumbs/>
    </div>
</template>

<script>
import PBreadcrumbs from '@poetadigital/vue-breadcrumbs';

export default {
    name: 'App',
    components: { PBreadcrumbs }
}
</script>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/vue-buttons
Description: > Buttons component
Author: info@poetadigital.com
Latest version: 0.2.0

# Buttons

> Buttons component

## Install

```shell
$ npm install @poetadigital/vue-buttons --save
```

## Getting Starting

How to use component

### Parameters

| Props       | Required | Default | Type    | Description                                                            |
|-------------|----------|---------|---------|------------------------------------------------------------------------|
| id          | false    | null    | String  | Equivalent to the `id` attribute on an `<button>`.                     |
| customClass | false    | null    | String  | Attach your custom class on the compontent.                            |
| name        | false    | null    | String  | Equivalent to the `name` attribute on an `<button>`.                   |
| disabled    | false    | null    | Boolean | Equivalent to the `disabled` attribute on an `<button>`.               |
| outline     | false    | false   | Boolean | The `outline` button is transparent with border button.                |
| variant     | false    | default | String  | The value can be `default`, `primary`, `secondary`, `third`, `fourth`. |
| @click      | false    | null    | Object  | Set the click event on `<button>`.                                     |

### Usage

```vue
<template>
  <div class="App">
    <PButton variant="primary">Submit</PButton>
    <PButton variant="primary" outline>Submit</PButton>
  </div>
</template>

<script>
import PButton from 'poetadigital/vue-buttons';

export default {
  components: { PButton }
};
</script>

<style scoped></style>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/vue-checkbox-toggle
Description: > Checkbox toggle component
Author: info@poetadigital.com
Latest version: 0.1.1

# Checkbox Toggle

> Checkbox toggle component

## Install

```shell
$ npm install @poetadigital/vue-checkbox-toggle --save
```

## Getting Starting

How to use component

### Parameters

| Props    | Required | Default | Type    | Description                                                     |
|----------|----------|---------|---------|-----------------------------------------------------------------|
| disabled | false    | false   | Boolean | The status of element for mutable, focusable or event submitted |

### Usage

```vue
<template>
  <div class="App">
    <PCheckboxToggle v-model="isActive"/>
    
    <!-- Disabled checkbox toggle -->
    <PCheckboxToggle v-model="isDisabled" :disabled="true"/>

    <!-- Use with CSS custom variables -->
    <PCheckboxToggle v-model="isUnactive" class="checkbox-toggle-custom"/>
  </div>
</template>

<script>
import PCheckboxToggle from '@poetadigital/vue-checkbox-toggle';

export default {
  components: { PCheckboxToggle },
  data() {
    return {
      isActive: true,
      isUnactive: false,
      isDisabled: false
    }
  }
};
</script>

<style></style>
</script>

<style scoped></style>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)
npm package: @poetadigital/vue-modal
Description: > Poeta Digital Modal
Author: info@poetadigital.com
Latest version: 0.2.7

# Poeta Digital Modal

> Poeta Digital Modal

## Install
```shell
$ npm install @poetadigital/vue-modal --save
```

### Parameters
```js
/**
 * Show or close the modal (isVisible: true, false).
 * @type {String}
 */
isVisible: {
  type: String,
  default: null
},

/**
 * The modal size
 * That means you can change the size if you want.
 * @type {String}
 */
size: {
  type: [String, Number],
  default: 340
}

/**
 * The modal height.
 * @type {String}
 */
height: {
  type: String,
  default: null
},

/**
 * The modal max-height.
 * @type {String}
 */
maxHeight: {
  type: [String, Number],
  default: null
}

/**
 * The modal title.
 * @type {String}
 */
modalTitle: {
  type: String,
  default: 'Confirm Popup'
},

/**
 * The modal z-index
 * @type {Number}
 */
modalZIndex: {
  type: [Number],
  default: 100
}

/**
 * Header text transform
 * @type {String}
 */
headerTextTransform: {
  type: String,
  default: 'capitalize'
},

/**
 * Header text font size
 * @type {String}
 */
headerTextFontSize: {
  type: String,
  default: '18px'
}

/**
 * Header text font weight
 * @type {String}
 */
headerTextWeight: {
  type: [String, Number],
  default: 500
}

/**
 * Header text color
 * @type {String}
 */
headerTextColor: {
  type: String,
  default: '#000000'
}
```
#### Class
```Vue
<style scoped>
  /**
  * The class modal size
  * That means you can change the style if you want.
  * @type {String}
  */
  .poeta-modal-size {
    width: 470px;
  }
</style>
```

##### Usage

In `main.js` of Vue projects

```javascript
import PModal from @poetadigital/vue-modal;
import App from './App.vue';

Vue.use(PModal);

new Vue({
  render: (h) => h(App),
}).$mount('#app');
```

In `App.vue`, you can use `PModal` component

```vue
<template>
   <PModal 
      :size="400"
      maxHeight="500px"
      :modalZIndex="200"
      textTransform="capitalize"
      :modalTitle="'Confirm Modal'"
      :isVisible="isVisible"
      @hidenModal="isVisible = false"
    />
  </div>
</template>

<script>
import PModal from '../src/Index.vue'

export default {
  name: 'App',
  components: { PModal },
  data() {
    return {
      isVisible: true,
    }
  },
}
</script>
```

## License

MIT © [Dang Van Thanh](https://dangthanh.org)
npm package: @poetadigital/vue-progress-bar
Description: Progress bar component
Author: info@poetadigital.com
Latest version: 0.2.1

# Progress Bar

> Progress bar component

## Install

```shell
$ npm install @poetadigital/vue-progress-bar --save
```

## Getting Starting

How to use component

### Parameters

| Props           | Type             | Values                                         | Default           |
|-----------------|------------------|------------------------------------------------|-------------------|
| val             | Number           | 0 - max                                        | 0                 |
| max             | Number           | Any number                                     | 100               |
| size            | Number \| String | tiny, small, medium, large, huge, massive, {n} | 10                |
| borderProgress  | String           | CSS                                            | 1px solid #D9D9D9 |
| barColor        | String           | Color                                          | #0085FF           |
| barTransition   | String           | CSS                                            | all 0.5s ease     |
| barBorderRadius | Number           | 0 - max                                        | 0                 |
| spacing         | Number           | Any Number                                     | 4                 |
| text            | String           | Text to display                                | empty             |
| textAlign       | String           | left, right, center                            | center            |
| textPosition    | String           | bottom, top, middle, inside                    | bottom            |
| textSize        | Number           | Any Number                                     | 13                |
| textFgColor     | String           | Color                                          | #222222           |

### Usage

```vue
<template>
  <div class="App">
    <PProgressBar
        class="custom-progress-bar"
        barBorderRadius="100"
        size="huge"
        val="50"
        textPosition="middle"
        text="50%"
    />
    <span> 50% </span>
  </div>
</template>

<script>
import PProgressBar from '@poetadigital/vue-progress-bar';

export default {
    name: 'App',
    components: { PProgressBar }
}
</script>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)