open-index/open-npm huggingface dataset:
npm package: @shapeshiftoss/proto-tx-builder
Description: Builds and signs new-style protobuf SIGN_MODE_DIRECT Cosmos SDK transactions
Author: ShapeShift DAO
Latest version: 0.10.0

# proto-tx-builder

Constructs and signs protobuf encoded cosmos-sdk

## Getting started

```bash
# Clone submodules
git submodule update --init --recursive
# Install the required dependencies
yarn
```

## Testing

Bug fixes and features should always come with tests, when applicable. Test files should live next to the file they are testing. Before submitting your changes in a pull request, always run the full test suite.

To run the test suite:

```bash
# build all dependent packages
yarn build

# Runs the full test suite
yarn test
```

## TS Proto generation

cosmos-sdk uses [protocol buffers](https://developers.google.com/protocol-buffers) to encode txs and other communication between nodes and clients as well as other nodes. proto-tx-builder leverages the protobuf definitions to generate the TypeScript implementation of the custom protobufs required to interact with a given chain.

-   place .proto files for the cosmos-sdk chain in `./proto` and `./third_party/proto` directories
-   remove existing generated files:
    ```bash
    rm -rf ./proto/generated/*
    ```
-   execute the generation script:
    ```base
    ./gen.sh
    ```
-   commit the generated content along with your changes

## Contributing

Please see the [Contributing Guidelines](CONTRIBUTING.md) document for this repo's specific contributing guidelines.
npm package: @shaping/wkai
Description: OpenClaw wk.ai channel plugin - Pusher-based real-time notifications
Author: shaping
Latest version: 1.0.18

# OpenClaw wk.ai Pusher Channel Plugin

Pusher-based channel plugin for wk.ai real-time notifications.

## 安装

```bash
cd ~/.openclaw/plugins
git clone <this-repo> openclaw-wkai
cd openclaw-wkai
npm install
```

## 配置

创建配置文件 `~/.openclaw/plugins/openclaw-wkai/config.json`:

```json
{
  "token": "tok_your_token_here",
  "apiUrl": "https://wk.ai/api",
  "pusher": {
    "key": "791945aea13507d7b924",
    "cluster": "ap1",
    "channelPrefix": "private"
  }
}
```

## 使用

```typescript
import { createWKaiChannelPlugin } from 'openclaw-wkai'

const plugin = createWKaiChannelPlugin({
  token: 'tok_your_token',
  apiUrl: 'https://wk.ai/api',
  pusher: {
    key: '791945aea13507d7b924',
    cluster: 'ap1',
    channelPrefix: 'private'
  },
  notifyFeishu: false
})

// 初始化插件
await plugin.init('agent-id', 'master-id')

// 发送消息
await plugin.sendMessage('receiver-id', 'Hello from OpenClaw!')

// 关闭连接
plugin.close()
```

## 频道事件

- `new_message` - 新消息推送
- `new_post` - 新帖子推送
- `heartbeat_summary` - 心跳汇总推送
- `group_activity` - 群组动态推送

## 开发

```bash
npm run build
npm run dev
```
npm package: @shapla/react-components
Description: A collection of React components.
Author: Sayful Islam
Latest version: 0.5.0

# Shapla React Components

> IMPORTANT: Shapla React Components is a work in progress and subject to major changes until 1.0 release.

A collection of reusable React components for rapid development.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)
- [Components](#components)

# Installation

Install using npm package manager

```shell
npm i @shapla/react-components
```

or using yarn package manager

```shell
yarn add @shapla/react-components
```

# Usage

Here we export all components script as ES module and all style as SCSS mixins. So you need to import SCSS mixin to
load style of component and also need to import ES module and use as react component.

### Styles (SCSS)

```scss
// Add the following line at top of your scss file
@use "@shapla/react-components/src/index.scss" as shapla;

@include shapla.button;
@include shapla.progress;
// Include other mixins as your requirement
```

### Javascript Instantiation

```js
import React, { Component } from "react";
import { Button } from "@shapla/react-components";

class MyApp extends Component {
  render() {
    return <Button theme="primary">Click Me!</Button>;
  }
}
```

# Components

- [Button](/src/components/button/README.md)
- [Chip](/src/components/chip/README.md)
- [Columns](/src/components/columns/README.md)
- [Confirm](/src/components/confirm/README.md)
- [Cross](/src/components/cross/README.md)
- [Dropdown](/src/components/dropdown/README.md)
- [Icon Container](/src/components/icon/README.md)
- [Image Container](/src/components/image/README.md)
- [Checkbox](/src/components/checkbox/README.md)
- [TextField](/src/components/input/README.md)
- [File Upload](/src/components/fileUpload/README.md)
- [Radio](/src/components/radio/README.md)
- [Radio Button](/src/components/radioButton/README.md)
- [Range Slider](/src/components/slider/README.md)
- [Search](/src/components/formSearch/README.md)
- [Select](/src/components/select/README.md)
- [Switch](/src/components/switch/README.md)
- [Modal](/src/components/modal/README.md)
- [Notifications](/src/components/notifications/README.md)
- [Progress](/src/components/progress/README.md)
- [Sidenav](/src/components/sidenav/README.md)
- [Spinner](/src/components/spinner/README.md)
- [Star Rating](/src/components/straRating/README.md)
- [Table](/src/components/table/README.md)
- [Tabs](/src/components/tabs/README.md)
- [Toggle](/src/components/toggles/README.md)
- [Dashboard](/src/components/dashboard/README.md)
npm package: @shapla/vue-button
Description: A simple button for Vue 3, in different colors, sizes, and states
Author: Sayful Islam
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Button
A simple button, in different colors, sizes, and states

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-button
```

# Usage

### Styles

with SCSS:

```js
import '@shapla/vue-button/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-button/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaButton from '@shapla/vue-button';

export default {
  name: 'Hello',

  components: {
    ShaplaButton
  },
  
  methods: {
    handleClick(){
      // Handle click event
    }
  }
}

```

```html
<shapla-button @click="handleClick"></shapla-button>
```

### Props
| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|----------------------------------------------------------------------------------------
| `theme`       | String    | **no**    | `default` | Value can be `default` or `primary` or `secondary` or `success` or `warning` or `error`
| `size`        | String    | **no**    | `normal`  | Value can be `normal` or `small` or `medium` or `large`
| `fullwidth`   | Boolean   | **no**    | `false`   | If set `true`, button will take full width.
| `disabled`    | Boolean   | **no**    | `false`   | If set `true`, disabled attribute will be added.
| `outline`     | Boolean   | **no**    | `false`   | If set `true`, outline style will be used.
| `rounded`     | Boolean   | **no**    | `false`   | If set `true`, rounded style will be used
| `fab`         | Boolean   | **no**    | `false`   | If set `true`, circle style will be used.
| `shadow`      | Boolean   | **no**    | `false`   | If set `true`, box-shadow will be added around button.
npm package: @shapla/vue-checkbox
Description: A custom checkbox for Vue 3 that exactly work same way as native checkbox
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Checkbox

A custom checkbox for Vue 3 that exactly work same way as native checkbox

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-checkbox
```

# Usage
### Styles

with SCSS:

```js
import '@shapla/vue-checkbox/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-checkbox/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaCheckbox from '@shapla/vue-checkbox';

export default {
  name: 'Hello',

  components: {
    ShaplaCheckbox
  },

  data(){
    return {
  	    singleCheckbox:false
  	}
  }
}

```

```html
<shapla-checkbox v-model="singleCheckbox">Label goes here.</shapla-checkbox>
```

### Props
| Property      | Type      | Required  | Default     | Description
|---------------|-----------|-----------|-------------|-----------------------------------------------------------
| `label`       | String    | **no**    | ``          | Checkbox label
| `value`       | String    | **no**    | `on`        | The default value for the checkbox
| `trueValue`   | String    | **no**    | `true`      | The value when user checked the checkbox
| `falseValue`  | String    | **no**    | `false`     | The value when user unchecked the checkbox
| `disabled`    | Boolean   | **no**    | `false`     | If set `true`, Checkbox will be disabled to check.
| `checked`     | Boolean   | **no**    | `undefined` | If set `true`, Checkbox will be checked.
npm package: @shapla/vue-chip
Description: Chip component is a small, interactive element. Chips are commonly used for contacts, text, rules, icons, and photos.
Author: Sayful Islam
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Chip
Chip component is a small, interactive element. Chips are commonly used for contacts, text, rules, icons, and photos.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-chip
```

# Usage

### Styles

with SCSS:

```js
import '@shapla/vue-chip/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-chip/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaChip from '@shapla/vue-chip';

export default {
  name: 'Hello',

  components: {
    ShaplaChip
  }
}

```

```html
<shapla-chip text="Sayful Islam" :deletable="true" @delete="handleDeleteEvent"/>
```

### Props
| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|----------------------------------------
| `text`        | String    | **no**    | ``        | Chip text
| `image_src`   | String    | **no**    | ``        | Chip contact image url
| `deletable`   | Boolean   | **no**    | `false`   | If set `true`, Delete icon will appear
| `small`       | Boolean   | **no**    | `false`   | If set `true`, a small chip with display
| `height`      | String    | **no**    | `32px`    | Custom height of chip

## Listeners
The chip component fires the following events:

**`delete`**: When delete icon is clicked, it fires the event.

```html
<!-- template -->
<shapla-chip @delete="handleDeleteEvent"></shapla-chip>


<!-- method -->
methods: {
    handleDeleteEvent(){
    // Handle delete event
    }
}
```
npm package: @shapla/vue-components
Description: A collection of reusable components for Vue 3.
Latest version: 1.3.10

# Shapla Vue Components

A collection of reusable components (using Vue 3 Composition API) for Vue 3.

For Vue 2, Visit [Shapla Vue Components](https://github.com/sayful1/shapla-vue-components)

[Demo & Documentation](https://sayfulislam.com/shapla-vue-components/vue3/docs)

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

Install using npm package manager

```
npm i @shapla/vue-components
```

or using yarn package manager

```
yarn add @shapla/vue-components
```

# Usage

Here we export all components script as ES module and all style as SCSS mixins. So you need to import SCSS mixin to
load style of component and also need to import ES module and register as vue component. For detail documentation,
please visit [Demo & Documentation](https://sayfulislam.com/shapla-vue-components/vue3/docs) page.

For example, to use button and progress bar components:

### Styles (SCSS)

```scss
// Add the following line at top of your scss file
@use "@shapla/vue-components/src/index.scss" as shapla;

@include shapla.button;
@include shapla.progress;
// Include other mixins as your requirement
```

### Javascript Instantiation

```js
import { ShaplaButton, ShaplaProgress } from "@shapla/vue-components";

export default {
  name: "Hello",

  components: {
    ShaplaButton,
    ShaplaProgress,
  },
};
```

```vue
<shapla-progress
  :value="1"
  :max="10"
  :striped="true"
  :animated="true"
  size="small"
  theme="primary"
/>
<shapla-button @click="handleClick">button text</shapla-button>
```

# List of Components

- Button
- Checkbox
- Chip
- Columns/Grid System
- Confirm Dialog
- Cross/Delete Icon
- Dashboard
- Dropdown
- File Uploader
- Icon Container
- Image Container
- Text Field
- Modal/Popup
- Notification
- Progress Bar
- Radio
- Radio Button
- Search Form
- Select
- Sidenav
- Slider
- Spinner
- Star Rating
- Switch
- Data Table
- Tabs
- Toggles
npm package: @shapla/vue-confirm
Description: A simple confirm modal/dialog based on modal component for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Confirm Dialog

A simple confirm modal/dialog based on modal component for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-confirm
```

# Usage

### Note

**Use only one 'ShaplaConfirmContainer' component in the app.**

### Javascript Instantiation

```js
import Dialog, {ShaplaConfirmContainer} from '@shapla/vue-confirm';

export default {
  name: 'Hello',

  components: {
    ShaplaConfirmContainer
  },
  setup() {
    const openConfirmModal = () => {
      Dialog.confirm('Are you sure to delete the item?').then(confirm => {
        if (confirm) {
          console.log('Confirmed');
        }
      });
    }

    const openAlertModal = () => {
      Dialog.alert({message: 'You need to click Ok button to close it.', title: 'Simple Alert'});
    }

    return {
      openAlertModal,
      openConfirmModal
    }
  },
}

```

```vue
<button @click="openConfirmModal">Confirm</button>
<button @click="openAlertModal">Alert</button>

<shapla-confirm-container/>
```

## Notify API

- Dialog.alert(message);
- Dialog.confirm(message);

Both `alert` and `confirm` can accept String for the message or Object with following props.

| Property          | Type              | Required  | Default       | Description
|-------------------|-------------------|-----------|---------------|-------------------------------------------------------
| `message`         | String            | **yes**   | ``            | Confirm dialog message
| `title`           | String            | **no**    | ``            | Confirm dialog title
| `icon`            | String            | **no**    | `primary`     | Value can be `primary`, `success` or `error`.
| `confirmButton`   | String, Boolean   | **no**    | `OK`          | Confirm button text. Set `false` to hide confirm button
| `cancelButton`    | String, Boolean   | **no**    | `Cancel`      | Cancel button text. Set `false` to hide cancel button
npm package: @shapla/vue-cross
Description: A versatile delete cross for Vue 3
Author: Sayful Islam
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Cross

A versatile delete cross for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-cross
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-cross/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-cross/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaCross from '@shapla/vue-cross';

export default {
  name: 'Hello',

  components: {
    ShaplaCross
  },

  methods: {
    handleClick() {
      // Handle click event
    }
  }
}

```

```vue

<shapla-cross @click="handleClick"/>
```

### Props

| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|--------------------------------------------------------
| `size`        | String    | **no**    | `normal`  | Value can be `normal` or `small` or `medium` or `large`.
| `ariaLabel`   | String    | **no**    | `close`   | Value for html `aria-label` attribute

```vue

<shapla-cross size="large"/>
```
npm package: @shapla/vue-dashboard
Description: A simple dashboard layout to build your app dashboard.
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Dashboard

A simple dashboard layout to build your app dashboard for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-dashboard
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-dashboard/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-dashboard/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaDashboard from '@shapla/vue-dashboard';

export default {
  name: 'Hello',

  components: {
    ShaplaDashboard
  },

  data() {
    return {
      activateSideNav: false,
    }
  },

  computed: {
    menuItems() {
      return Array.from({length: 50}, (x, i) => i + 1);
    }
  }
}

```

```html

<shapla-dashboard
  title="Dashboard"
  :activate-side-nav="activateSideNav"
  @open:sidenav="activateSideNav = true"
  @close:sidenav="activateSideNav = false"
  user-display-name="Sayful Islam"
  avatar-url="https://s.gravatar.com/avatar/5ba82fcf5f7f8b24097ff9f7ad4b3d5b?s=80"
  greeting="Hello,"
>
  <template v-slot:sidenav-menu>
    <ul class="sidenav-list">
      <li class="sidenav-list__item" v-for="number in menuItems">
        <a class="sidenav-list__link" href="#">Menu item {{number}}</a>
      </li>
    </ul>
  </template>

  <p v-for="number in menuItems">{{number}}. Dashboard Content will go here</p>
</shapla-dashboard>
```

### Props

| Property          | Type      | Required  | Default   | Description
|-------------------|-----------|-----------|-----------|---------------------------------
| `activateSideNav` | Boolean   | **no**    | `false`   | Boolean value hide/show sidenav
| `title`           | String    | **no**    | ``        | Dashboard title
| `userDisplayName` | String    | **no**    | ``        | User display name
| `avatarUrl`       | String    | **no**    | ``        | User avatar url
| `greeting`        | String    | **no**    | `Hello,`  | Greeting text
| `headerHeight`    | String    | **no**    | `56px`    | Height of header
| `headerTheme`     | String    | **no**    | `primary` | Value can be `default` or `primary` or `secondary`
| `navWidth`        | String    | **no**    | `300px`   | Width of side navigation
| `sideNavType`     | String    | **no**    | `overlay` | Value can be `overlay` or `off-canvas`. `off-canvas` is experimental
| `showOverlay`     | Boolean   | **no**    | `true`    | Should show overlay color when side navigation active.

## Listeners

The dashboard layout component fires the following events:

**`open:sidenav`**: When burger icon is clicked, it fires the event.
**`close:sidenav`**: When outside of sidenav is clicked, it fires the event.

```html
<!-- template -->
<shapla-dashboard @open:sidenav="handleOpenSidenav" @close:sidenav="handleCloseSidenav"/>

<!-- method -->
methods: {
  handleOpenSidenav(){
    // Handle click event
  },
  handleCloseSidenav(){
    // Handle click event
  }
}
```
npm package: @shapla/vue-dropdown
Description: A simple and interactive dropdown menu for discoverable content for Vue 3
Author: Sayful Islam
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Dropdown

A simple and interactive dropdown menu for discoverable content for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-dropdown
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-dropdown/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-dropdown/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaDropdown from '@shapla/vue-dropdown';

export default {
  name: 'Hello',

  components: {
    ShaplaDropdown
  }
}

```

```html

<shapla-dropdown :hoverable="false" :right="true">
  <template v-slot:trigger>
    <div class="shapla-icon is-hoverable">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path
          d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
          fill="currentColor"/>
      </svg>
    </div>
  </template>
  <a href="https://example.com" class="shapla-dropdown-item is-active">Link 1</a>
  <a href="https://example.com" class="shapla-dropdown-item">Link 2</a>
  <span class="shapla-dropdown-divider"></span>
</shapla-dropdown>
```

### Props

| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|---------------------------------------------------------------------------
| `hoverable`   | Boolean   | **no**    | `true`    | If set `true`, the dropdown will show up when hovering the trigger slot.
| `right`       | Boolean   | **no**    | `false`   | Set `true` to have a right-aligned dropdown.
| `role`        | String    | **no**    | `menu`    | Role of component. Mostly for accessibility.
| `direction`   | Boolean   | **no**    | `auto`    | Value can be `auto`, `up`, `down`
npm package: @shapla/vue-icon
Description: The icon-container component is a container for any type of icon font for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Icon

The icon-container component is a container for any type of icon font. Because the icons can take a few seconds to load,
and because you want control over the space the icons will take, you can use the icon class 
as a reliable square container that will prevent the page to "jump" on page load.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-icon
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-icon/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-icon/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaIcon from '@shapla/vue-icon';

export default {
  name: 'Hello',

  components: {
    ShaplaIcon
  },
}

```

```html
<shapla-icon size="medium"><i class="fas fa-fw"></i></shapla-icon>
```

### Props
| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|---------------------------------------------
| `size`        | String    | **no**    | ``        | Value can be `small` or `medium` or `large`
| `hoverable`   | Boolean   | **no**    | `false`   | If set `true`, transparent background color will be added on hover
npm package: @shapla/vue-image
Description: A versatile delete cross for Vue 3
Author: Sayful Islam
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Image

The image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-image
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-image/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-image/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaImage from '@shapla/vue-image';

export default {
  name: 'Hello',

  components: {
    ShaplaImage
  },
}

```

```html
<shapla-image container-width="32px" container-height="32px" is-rounded>
    <img src="https://via.placeholder.com/48x48">
</shapla-image>

<shapla-image :width-ratio="3" :height-ratio="4">
    <img src="https://via.placeholder.com/420x560">
</shapla-image>

<shapla-image :width-ratio="16" :height-ratio="9">
    <iframe width="640" height="360" src="https://www.youtube.com/embed/YE7VzlLtp-4?showinfo=0"
        frameborder="0" allowfullscreen></iframe>
</shapla-image>
```

### Props
| Property          | Type      | Required  | Default   | Description
|-------------------|-----------|-----------|-----------|---------------------------------------------
| `heightRatio`     | Number    | **no**    | `1`       | Image height ratio. You can also put image height
| `widthRatio`      | Number    | **no**    | `1`       | Image width ratio. You can also put image width
| `containerWidth`  | String    | **no**    | ``        | Width of the container.
| `containerHeight` | String    | **no**    | ``        | Height of the container.
| `isRounded`       | Boolean   | **no**    | `false`   | If set `true`, inside item will be rounded
npm package: @shapla/vue-input
Description: A simple customized input text field.
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla TextField

A simple customized input text field.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-input
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-input/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-input/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaInput from '@shapla/vue-input';

export default {
  name: 'Hello',

  components: {
    ShaplaInput
  }
}

```

```vue
<shapla-input
  label="Email"
  help-text="Write your valid email address"
  validation-text="Please enter a valid email address"
  :has-error="true"
/>
```

### Props

| Property          | Type      | Required  | Default   | Description
|-------------------|-----------|-----------|-----------|-------------------------------------------------
| `type`            | String    | **no**    | `text`    | Input field type. Supports all types that support for normal input field
| `label`           | String    | **yes**   | ``        | Input field label
| `modelValue`      | String    | **no**    | ``        | Field value
| `autocomplete`    | String    | **no**    | ``        | Field autocomplete attribute
| `name`            | String    | **no**    | ``        | Field name attribute
| `id`              | String    | **no**    | ``        | Field id attribute
| `helpText`        | String    | **no**    | ``        | Field help text
| `validationText`  | String    | **no**    | ``        | Field validation text
| `hasError`        | Boolean   | **no**    | `false`   | If set `true`, field will show `validationText`
| `hasSuccess`      | Boolean   | **no**    | `false`   | If set `true`, field will show success status
| `disabled`        | Boolean   | **no**    | `false`   | If set `true`, field will be read only
| `required`        | Boolean   | **no**    | `false`   | If set `true`, field must be filled
| `readonly`        | Boolean   | **no**    | `false`   | If set `true`, User cannot modify field value but data can be submit
| `rows`            | Number    | **no**    | ``        | Set number of rows for textarea field
| `dir`             | String    | **no**    | `ltr`     | Set direction. Value can be `ltr` or `rtl` or `auto`

## Listeners

The input component fires the following events:

**`update:modelValue`**: When you input anything on field

```html
<!-- template -->
<text-field @update:modelValue="handleInputEvent"/>


<!-- method -->
methods: {
handleInputEvent(value){
// Handle input event
}
}
```
npm package: @shapla/vue-modal
Description: A classic modal overlay component for Vue 3, in which you can include any content you want.
Author: Sayful Islam
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Modal

A classic modal overlay component for Vue 3, in which you can include any content you want.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-modal
```

# Usage

### Styles

```js
import '@shapla/vue-modal/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-modal/dist/style.css';
```

*Note: `@shapla/vue-modal` component has dependency over `@shapla/vue-cross`, also remember to include that style*

### Javascript Instantiation

```js
import ShaplaModal from '@shapla/vue-modal';

export default {
  name: 'Hello',

  components: {
    ShaplaModal
  },

  data () {
    return {
        modalActive:true,
    };
  },
  
  methods: {
    closeModal(){
      this.modalActive = false;
    }
  }
}

```

```html
<button @click="modalActive = true">Open Modal</button>
<shapla-modal :active="modalActive" title="Modal Title" content-size="full" @close="closeModal">
    Modal content goes here.
    <div slot="foot">
        <button @close="closeModal">Close</button>
    </div>
</shapla-modal>
```

### Props
| Property                  | Type      | Required  | Default       | Description
|---------------------------|-----------|-----------|---------------|-------------------------------------------------------------------------------
| `active`                  | Boolean   | **yes**   | `false`       | Set `true` to show popup and set `false` to hide popup
| `title`                   | String    | **no**    | `Untitled`    | `title` will not show if you set `type` other than `card`
| `type`                    | String    | **no**    | `card`        | Currently `card`, `box` and `confirm` design available.
| `backgroundTheme`         | String    | **no**    | `dark`        | Value can be `dark` or `light`. 
| `closeOnBackgroundClick`  | Boolean   | **no**    | `true`        | If set `true`, clicking outside content area will trigger close event.
| `showCloseIcon`           | Boolean   | **no**    | `true`        | If set `false`, no closing icon will be shown
| `contentSize`             | String    | **no**    | `medium`      | Value can be `small`, `medium`, `large` or `full`. 
| `contentClass`            | String    | **no**    | ``            | Extra css class for modal content 

**Note: `small` has content width 320px, `medium` has content width 640px, `large` has content width 960px and `full` will take full browser width*

## Listeners
The modal component fires the following events:

**`close`**: When close icon or outside content area is clicked, it fires the event.

```html
<!-- template -->
<shapla-modal @close="closeModal">
  <!-- Modal content goes here -->
</shapla-modal>


<!-- method -->
methods: {
  closeModal(){
    this.modalActive = false;
  }
}
```
npm package: @shapla/vue-notification
Description: A simple notification component for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Notification

A simple notification component for Vue 3

[<img src="./packages/notification/screenshot.png" style="width: 100%;" />](https://github.com/sayful1/shapla-vue-components)

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-notification
```

# Usage

### Note
**Use only one `ShaplaNotificationContainer` component in the app.**

**You can import `Notify` anywhere of your app to trigger notification**

### Styles

with Sass:
```js
import '@shapla/vue-notification/src/index.scss';
```

with CSS:
```js
import '@shapla/vue-notification/dist/style.css';
```

### Javascript Instantiation

```js
import Notify, {ShaplaNotificationContainer} from '@shapla/vue-notification';

export default {
  name: 'Hello',

  components: {
    ShaplaNotificationContainer
  },
  
  methods: {
    createNotification(type){
      switch (type) {
        case 'info':
          Notify.info('Info message');
          break;
        case 'success':
          Notify.success('Success message', 'Title here');
          break;
        case 'warning':
          Notify.warning('Warning message', 'Close after 3000ms', 3000);
          break;
        case 'error':
          Notify.error('Error message', 'Click me!', 5000);
          break;
      }
    }
  }
}

```

```vue
<button @click="createNotification('info')">Info</button>
<button @click="createNotification('success')">Success</button>
<button @click="createNotification('warning')">Warning</button>
<button @click="createNotification('error')">Error</button>

<shapla-notification-container position='top-right'/>
```

### NotificationContainer Props
| Property          | Type      | Required  | Default       | Description
|-------------------|-----------|-----------|---------------|-----------------------------------------------------------
| `timeout`         | Number    | **no**    | `4000`        | Time to stay visible notification before auto dismiss.
| `position`        | String    | **no**    | `top-right`   | Value can be 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'
| `showDismisses`   | Boolean   | **no**    | `true`        | Set `false` to hide close icon from notification

## Notify API

- Notify.info(message, title, timeout);
- Notify.success(message, title, timeout);
- Notify.warning(message, title, timeout);
- Notify.error(message, title, timeout);

| Property  | Type      | Required  | Default  | Description
|-----------|-----------|-----------|----------|----------------------------------
| `message` | String    | **yes**   | ``       | Notification message
| `title`   | String    | **no**    | ``       | Notification title
| `timeout` | Number    | **no**    | `4000`   | The popup timeout in milliseconds
npm package: @shapla/vue-progress
Description: A custom progress bar featuring support for stacked bars, animated backgrounds, and text labels.
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Progress Bar

A custom progress bar featuring support for stacked bars, animated backgrounds, and text labels.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-progress
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-progress/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-progress/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaProgress from '@shapla/vue-progress';

export default {
  name: 'Hello',

  components: {
    ShaplaProgress
  }
}

```

```html
<shapla-progress :value="1" :max="10" :striped="true" :animated="true" size="small" theme="primary"/>
```

### Props
| Property      | Type     | Required  | Default    | Description
|---------------|----------|-----------|------------|---------------------------
| `value`       | Number   | **no**    | ``         | Current progress value
| `max`         | Number   | **no**    | `1`        | Max progress value
| `label`       | String   | **no**    | ``         | Label text
| `striped`     | Boolean  | **no**    | `false`    | Set `true` to display stripped design 
| `animated`    | Boolean  | **no**    | `false`    | Set `true` to display stripped animation
| `size`        | String   | **no**    | `default`  | Progress bar height. Value can be `tiny`, `small`, `medium`, `large`
| `theme`       | String   | **no**    | `default`  | Progress bar color theme. Value can be `primary`, `secondary`
npm package: @shapla/vue-radio
Description: A custom radio component that works like native radio component for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Radio

A custom radio component that works like native radio component for Vue 3.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-radio
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-radio/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-radio/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaRadio from '@shapla/vue-radio';

export default {
  name: 'Hello',

  components: {
    ShaplaRadio
  },
  data() {
    return {
      option: 'one',
      options: [
        {label: 'One', value: 'one'},
        {label: 'Two', value: 'two'},
        {label: 'Three', value: 'three'},
      ],
    }
  }
}

```

```html

<shapla-radio v-for="_option in options" :key="_option.value" :value="_option.value" v-model="option">
  {{_option.label}}
</shapla-radio>
```

### Props

| Property  | Type     | Required  | Default    | Description
|-----------|----------|-----------|------------|-------------
| `label`   | String   | **no**    | ``         | Radio label
| `value`   | String   | **no**    | ``         | Radio value
npm package: @shapla/vue-radio-button
Description: A custom button group component that works like native radio component for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Radio Button

A custom buttons group component that works like native radio.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-radio-button
```

# Usage

Add the component:

```js
import ShaplaRadioButton from '@shapla/vue-radio-button';

export default {
  name: 'Hello',

  components: {
    ShaplaRadioButton
  },
  data() {
    return {
      option: 'one',
      options: [
        {label: 'One', value: 'one'},
        {label: 'Two', value: 'two'},
        {label: 'Three', value: 'three'},
      ],
    }
  }
}

```

```html

<shapla-radio-button v-for="_option in options" :key="_option.value" :value="_option.value" v-model="option">
  {{_option.label}}
</shapla-radio-button>
```

### Props

| Property  | Type     | Required  | Default    | Description
|-----------|----------|-----------|------------|-------------
| `label`   | String   | **no**    | ``         | Radio label
| `value`   | String   | **no**    | ``         | Radio value
npm package: @shapla/vue-sidenav
Description: A simple side overlay navigation
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Side Navigation

A simple side overlay navigation. Normally to use to develop admin panel.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-sidenav
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-sidenav/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-sidenav/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaSidenav from '@shapla/vue-sidenav';

export default {
  name: 'Hello',

  components: {
    ShaplaSidenav
  }
}

```

```html

<shapla-sidenav :active="true" nav-width="300px" position="left" :show-overlay="true">
  Nav content goes here
</shapla-sidenav>
```

### Props

| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|-------------------------------------------------
| `active`      | Boolean   | **no**    | `true`    | If set `true`, side navigation will be opened.
| `showOverlay` | Boolean   | **no**    | `true`    | If set `true`, overlay background will be shown
| `navWidth`    | String    | **no**    | `300px`   | Sidenav width in pixels.
| `position`    | String    | **no**    | `left`    | Value can be `left` or `right`.

## Listeners

The side navigation component fires the following events:

**`close`**: When outside area is clicked, it fires the event.

```html
<!-- template -->
<shapla-sidenav @close="handleClose"></shapla-sidenav>


<!-- method -->
methods: {
handleClose(){
// Handle close event
}
}
```
npm package: @shapla/vue-slider
Description: A simple component for input slider for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Range Slider
A simple component for input slider for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-slider
```

# Usage

Add the component:

```js
import ShaplaRangeSlider from '@shapla/vue-slider';

export default {
  name: 'Hello',
	data(){
		return {
			number: 10,
		}
	},
	components: {
    ShaplaRangeSlider
	},
}

```

```html
<shapla-range-slider v-model="number" :default="20"/>
```

### Props for `columns`
| Property      | Type     | Required  | Default    | Description 
|---------------|----------|-----------|------------|-------------------------------------------------
| `modelValue`  | Number   | **no**    | `null`     | Value of the input
| `default`     | Number   | **no**    | `0`        | The default value of the input
| `min`         | Number   | **no**    | `0`        | Min value of input
| `max`         | Number   | **no**    | `100`      | Maximum value of input
| `step`        | Number   | **no**    | `1`        | Step of input slider
| `showReset`   | Boolean  | **no**    | `true`     | Set `true` to show reset to default value
| `showInput`   | Boolean  | **no**    | `true`     | Set `true` to show input field to change value

## Listeners
The input slider component fires the following events:

**`update:modelValue`**: When value is changed, it fires the event.

```html
<!-- template -->
<input-slider :value="20" :default="10" @update:modelValue="handleInput"></input-slider>


<!-- method -->
methods: {
  handleInput(newValue){
    // Handle input event
  }
}
```
npm package: @shapla/vue-spinner
Description: A loading spinner component for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Spinner

A loading spinner component for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-spinner
```

# Usage

### Styles

with Sass:
```js
import '@shapla/vue-spinner/src/index.scss';
```

with CSS:
```js
import '@shapla/vue-spinner/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaSpinner from '@shapla/vue-spinner';

export default {
  name: 'Hello',

  components: {
    ShaplaSpinner
  },

  data () {
    return {
        active:true,
    };
  }
}

```

```vue
<shapla-spinner :active="true" :single="false" :show-text="false" position="static"/>
```

### Props
| Property          | Type      | Required  | Default       | Description                                                       |
|-------------------|-----------|-----------|---------------|-------------------------------------------------------------------|
| `active`          | Boolean   | **no**    | `true`        | Spinner will be shown only when `active` value is `true`          |
| `single`          | Boolean   | **no**    | `false`       | If set `true`, only primary color will be shown for all layers.   |
| `showText`        | Boolean   | **no**    | `false`       | If set `true`, `Loading...` text will be show beside spinner.     |
| `loadingText`     | String    | **no**    | `Loading...`  | Loading text                                                      |
| `position`        | String    | **no**    | `fixed`       | Value can be `fixed`, `absolute`, or `static`.                    |
| `size`            | String    | **no**    | `default`     | Value can be `default`, `small`, or `medium` or `large`.          |
npm package: @shapla/vue-star-rating
Description: A simple, highly customisable star rating component for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# shapla-star-rating

A simple, highly customisable star rating component for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-star-rating
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-star-rating/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-star-rating/dist/style.css';
```

### Javascript Instantiation

```js
import ShaplaStarRating from '@shapla/vue-star-rating';

export default {
  name: 'Hello',

  components: {
    ShaplaStarRating
  },
  data() {
    return {
      rating: 4,
      staticRating: 4.6,
    }
  }
}

```

```vue

<shapla-star-rating v-model="rating"/>

<shapla-star-rating v-model="staticRating" :is-static="true"/>
```

### Props

| Property       | Type     | Required  | Default           | Description                                           |
|----------------|----------|-----------|-------------------|-------------------------------------------------------|
| `value`        | Number   | **yes**   | ``                | The initial rating                                    |
| `is-static`    | Boolean  | **no**    | `false`           | If set `true`, the rating cannot be edited.           |
| `color`        | String   | **no**    | ``                | The color of the non-highlighted portion of a star.   |
| `active-color` | String   | **no**    | ``                | The color of the highlighted portion of a star.       |
| `ratings`      | Array    | **no**    | `[1, 2, 3, 4, 5]` | List of rating value                                  |
npm package: @shapla/vue-switch
Description: Switch is an enhanced version of the standard HTML input checkbox element for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Switch

Switch is an enhanced version of the standard HTML input checkbox element for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-switch
```

# Usage

Add the component:

```js
import ShaplaSwitch from '@shapla/vue-switch';

export default {
  name: 'Hello',

  components: {
    ShaplaSwitch
  },

  data() {
    return {
      singleSwitch: false
    }
  }
}

```

```html

<shapla-switch v-model="singleSwitch">Enable this</shapla-switch>
```

### Props

| Property      | Type      | Required  | Default   | Description
|---------------|-----------|-----------|-----------|-----------------------------------------------------------
| `label`       | String    | **no**    | ``        | Switch label
| `value`       | String    | **no**    | `on`      | The default value for the switch
| `trueValue`   | String    | **no**    | `true`    | The value when user checked the switch
| `falseValue`  | String    | **no**    | `false`   | The value when user unchecked the switch
| `disabled`    | Boolean   | **no**    | `false`   | If set `true`, box-shadow will be added around button.
| `readonly`    | Boolean   | **no**    | `false`   | If set `true`, you cannot change the value.

## Listeners

The switch component fires the following events:

**`update:modelValue`**: When switch is clicked, it fires the event.

```html
<!-- template -->
<shapla-button @update:modelValue="handleChange"></shapla-button>


<!-- method -->
methods: {
handleChange(newValue){
// Handle change event
}
}
```