open-index/open-npm huggingface dataset:
npm package: @maqden/mcp
Description: MCP Server for MAQDEN Marketplace - B2B Industrial Equipment Platform
Author: Renato
Latest version: 1.0.0

# @maqden/mcp

MCP Server for MAQDEN Marketplace - B2B Industrial Equipment Platform

This package provides a Model Context Protocol (MCP) server that connects Claude AI to the MAQDEN marketplace, exposing all tools and resources for searching equipment, managing messages, bookmarks, and more.

## Installation

### Via Claude Desktop

```json
{
  "mcpServers": {
    "maqden": {
      "command": "npx",
      "args": ["-y", "@maqden/mcp"]
    }
  }
}
```
npm package: @maqe-vue/checkbox
Description: The Vue2 component for checkbox
Latest version: 1.0.0

# @maqe-vue/checkbox-input
The Vue2 component for checkbox-input

![label-insde](https://i.imgur.com/VvFaGDM.png)

See demo on: [Storybook](https://maqe-vue.qa.maqe.com/?path=/story/checkbox--all)

------

## Installation

#### NPM
Install the npm package.

```
npm install @maqe-vue/checkbox-input --save
```

#### Register the component

```if you want me to contribute, let me know na.
import VmqCheckbox from '@maqe-vue/checkbox-input'
import '@maqe-vue/checkbox-input/dist/style.css'

Vue.component('vmq-checkbox', VmqCheckbox)
```

------

## Usage

#### Basic
<img src="https://i.imgur.com/vtlyk2Z.png" height="28">

```
<vmq-checkbox
    v-model="checkbox"
    label="Label"
/>
```

#### Multiple
<img src="https://i.imgur.com/AZrdjX3.png" height="33">

```
<vmq-checkbox
    v-for="({ id, title }) in fruits"
    v-model="input"
    :label="title"
    :vmq-value="id"
    :key="id"
/>
data() {
    return {
        fruits: [
            { id: 1, title: "Bannan" },
            { id: 2, title: "Orange" },
            { id: 3, title: "Apple" },
        ],
        input: [1, 2]
    };
}
```

------

## API
#### Props

| Name                 | Type                | Description    | default    |
| :--------------------|:-------------------:|----------------|:-----------|
| `v-model`            | `bind`              |                |            |
| `labele`             | `string`            |
| `disabled`           | `boolean`           |                | `false`    |
| `containerClass`     | `string`

#### Event

| Name                 | Type                | Description    | default    |
| :--------------------|:-------------------:|----------------|:-----------|
| `change(value, event)` | `function`        | `Invoked when input changes`

## Style
#### Custom Style
Custom style with css variable

<img src="https://i.imgur.com/TFR4DFh.png" height="100">

```
<vmq-checkbox
    v-model="checkbox"
    label="Label"
/>

// for example to set as a global
<style>
    :root {
        --vmq-checkbox-color: tan;
        --vmq-checkbox-label-color: black;
    }
</style>
```
npm package: @maqe-vue/dropdown
Description: The Vue2 component for dropdown
Latest version: 1.0.2

# @maqe-vue/dropdown
The Vue2 component for dropdown

![label-insde](https://i.imgur.com/p0Nylj8.png)
![label-insde](https://i.imgur.com/jUNrRfv.png)
![label-insde](https://i.imgur.com/e8Iqwz6.png)

See demo on: [Storybook](https://maqe-vue.qa.maqe.com/?path=/story/dropdown--default)

------

## Installation

#### NPM
Install the npm package.

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

#### Register the component

```if you want me to contribute, let me know na.
import VqmDropdown from '@maqe-vue/dropdown'
import '@maqe-vue/dropdown/dist/style.css'

Vue.component('vmq-dropdown', VqmDropdown)
```

------

## Usage

#### Basic
<img src="https://i.imgur.com/0YqgTDv.png" width="250">
<img src="https://i.imgur.com/YYzse4Y.png" width="250">

```
<vqm-dropdown
    v-model="input"
    :list="list"
    label-style="label-inside"
    label="Label"
    size="medium"
/>

<script>
export default {
	data() {
		return {
			input: "",
			list: [
				{ title: "Selection 1", value: "1" },
				{ title: "Selection 2", value: "2" },
				{ title: "Selection 3", value: "3" },
				{ title: "Selection 4", value: "4" },
				{ title: "Selection 5", value: "5" },
				{ title: "Selection 6", value: "6" }
			]
		};
	}
};
</script>
```

#### Search
<img src="https://i.imgur.com/ccQ89DO.png" width="250">

Searching supported to arrow up, down and enter keys.

```
<vqm-dropdown
    v-model="input"
    :list="list"
    label-style="label-inside"
    label="Label"
    size="medium"
    searchable
/>
```

------

## API
#### Props

| Name                 | Type                | Description    | default    |
| :--------------------|:-------------------:|----------------|:-----------|
| `v-model`            | `bind`              |                |            |
| `containerClass`     | `string`            |
| `searchable`         | `boolean`           |                | `false`    |
| `label-style`        | `string`            | `label-inside|label-outside|label-border|label-none` | `label-none` |
| `label`              | `string`            |                |            |
| `placeholder`        | `string`            |                |            |
| `disabled`           | `boolean`           |                | `false`    |
| `required`           | `boolean`           |                | `false`    |
| `helper-text`        | `string`            |                |            |
| `size`               | `small|medium|large`|                | `large`    |
| `size-dropdown-list` | `small|large`       |                | `large`    |

## Style
#### Custom Style
Custom style with css variable

<img src="https://i.imgur.com/2cahamK.png" height="250">

```
<vqm-dropdown
    v-model="input"
    :list="list"
    label-style="label-inside"
    label="Label"
    size="medium"
/>

// for example to set as a global
<style>
    :root {
        --vqm-dropdown-color: tan;
        --vqm-dropdown-hover-color: rgba(203, 203, 203, .2);
        --vqm-dropdown-selected-color: tan;
    }
</style>
```
npm package: @maqe-vue/pagination
Description: The Vue2 component for pagination
Author: MAQE
Latest version: 1.0.2

# @maqe-vue/pagination
The Vue2 component for pagination

## Installation

### NPM
Install the npm package.
```
npm install @maqe-vue/pagination --save
```

### Register the component
**Global**
```
import Pagination from '@maqe-vue/pagination'

Vue.component('pagination', Pagination)
```

**Local**
```
<script>
import Pagination from '@maqe-vue/pagination'

export default {
	components: {
		Pagination
	}
}
</script>
```

### Included the style
Add the default style of component
```
import '@maqe-vue/pagination/dist/@maqe-vue/pagination.css'
```


## Usage

### Basic
```
<pagination
	:totalPage="10"
	:value="1"
	@onPageChange="handleChange"
/>
```

### Custom Previous and Next button
You can use `slot` for override original button

**Slot names**

| Name    | Description    |
| ------- | :------ |
| `prev`  | Previous button **default: "Prev"** |
| `next`  | Next button **default: "Next"** |

```
<pagination
	:totalPage="10"
	:value="1"
	@onPageChange="handleChange"
>
	<template v-slot:prev>
		<font-awesome-icon :icon="['far', 'angle-left']" />
	</template>
	<template v-slot:next>
		<font-awesome-icon :icon="['far', 'angle-right']" />
	</template>
</pagination>
```

### Custom Options
You can use property `options` to custom pagination type that depend on screen width

```
<pagination
	:totalPage="10"
	:value="1"
	:options="{
		type: 'full',
		breakpoints: {
			// large to small: that override smaller
			1024: { // screen width is lower 1024. so, this is for tablet
				type: 'compact'
			},
			580: { // screen width is lower 480. so, this is for mobile
				type: 'simple'
			}
		}
	}"
	@onPageChange="handleChange"
/>
```

### Custom style
You can add container class name as `containerClass` prop
```
<template>
	<pagination
		:totalPage="10"
		:value="1"
		containerClass="custom-pagination"
		@onPageChange="handleChange"
	>
		<template v-slot:prev>
			<font-awesome-icon :icon="['far', 'angle-left']" />
		</template>
		<template v-slot:next>
			<font-awesome-icon :icon="['far', 'angle-right']" />
		</template>
	</pagination>
</template>

<script>
export default {
	methods: {
		handleChange(page) => {
			console.log(page)
		}
	}
}
</script>

<style lang="scss">
.custom-pagination {
	--vmq-pagination-color: #ddd;
}
</style>
```

## Props and Computed

### Props

| Name              | Type     | Description    |
| ----------------- | :------- | :------------- |
| `totalPage`       | `Number` | Total count of pages. **default: 1** |
| `value`           | `Number` | The current page. **default: 1**  |
| `containerClass`  | `String` | Add container class name |
| `options`         | `Object` |
| `options.type` | `String` | `full` `compact` `simple` **default: `full`**
| `options.breakpoints` | `Object` | set `options.type` depend on screen width

### Computed

| Name |
| ----------------- |
| `firstPage`       |
| `lastPage`        |
| `isFirstPage`     |
| `isLastPage`      |
| `currentPage`     |
npm package: @maqe-vue/radio
Description: The Vue2 component for radio
Latest version: 1.0.0

# @maqe-vue/radio-input
The Vue2 component for radio-input

![label-insde](https://i.imgur.com/RcrX71S.png)

See demo on: [Storybook](https://maqe-vue.qa.maqe.com/?path=/story/radio--all)

------

## Installation

#### NPM
Install the npm package.

```
npm install @maqe-vue/radio-input --save
```

#### Register the component

```
import Input from '@maqe-vue/radio-input'
import '@maqe-vue/radio-input/dist/style.css'

Vue.component('vmq-radio', Input)
```

------

## Usage

#### Basic
<img src="https://i.imgur.com/Lt6jrQv.png" height="28">

```
<vmq-radio
    v-model="radio"
    :list="[
        { value: 'yes', title: 'Yes' },
        { value: 'no', title: 'No' }
    ]"
/>
```

------

## API
#### Props

| Name                 | Type                | Description    | default    |
| :--------------------|:-------------------:|----------------|:-----------|
| `v-model`            | `bind`              |                |            |
| `list`               | `array`             | Radio group including list | `[]`
| `list > value`       | `String | Integer`  |                | `null`
| `list > title`       | `String`            | Label name     | `""`
| `list > disabled`    | `Boolean`           |                | `false`    |
| `containerClass`     | `string`

## Style
#### Custom Style
Custom style with css variable

<img src="https://i.imgur.com/3phOMSM.png" height="100">

```
<vmq-radio
    v-model="radio"
    :list="[
        { value: 'yes', title: 'Yes' },
        { value: 'no', title: 'No' }
    ]"
/>

// for example to set as a global
<style>
    :root {
        --vmq-radio-color: tan;
    }
</style>
```