open-index/open-npm huggingface dataset:
npm package: @roylee1997/vue-js-button
Description: ## Github Example https://github.com/1997roylee/vue-jg-button
Latest version: 0.1.31

# vue-js-button

## Github Example
https://github.com/1997roylee/vue-jg-button

## Npm Install Component
https://www.npmjs.com/package/@roylee1997/vue-js-button

###
<code>
npm i @roylee1997/vue-js-button
</code>

## Example
In src folder, please run <code>npm install</code> before you start the commands <code>npm run serve</code>.
npm package: @roylee1997/vue-js-input
Description: ## Github Example ( In src folder )
Latest version: 0.1.4

# vue-js-input

## Github Example ( In src folder )

https://github.com/1997roylee/vue-js-input

## Npm

https://www.npmjs.com/package/@roylee1997/vue-js-input

## Command

For Install npm

```sh
$ npm i @roylee1997/vue-js-input
```

Run Project

```sh
$ npm install
$ npm run serve
```

## Example

Setup:

```sh
import VInputComponent from '../projects/InputComponent/index.js'
Vue.use(VInputComponent)
```

Usage:

```sh
<v-input
    outline
    :value="Value"
    @input="updateValue"
    @focus="onFocus"
    @blur="onBlur"
    size="small"
></v-input>
```

## Props

| Prop        | Type     | Comment                                           |
| ----------- | -------- | ------------------------------------------------- |
| width       | Number   | default 200px                                     |
| value       | String   | binding value                                     |
| type        | String   | 'text', 'url', 'email', 'password', 'search'      |
| error       | String   | display error messages                            |
| rounded     | String   | border radius of Input, ['none', 'small', 'full'] |
| size        | String   | size of Input, ['small', 'medium']                |
| label       | String   | label text                                        |
| placeholder | String   | placeholder of Input                              |
| outline     | Function | outline style                                     |
| disabled    | Function | disabled                                          |
| field       | Function | field style                                       |
| full        | Function | full width style                                  |
| @input      | Function | Input event                                       |
| @focus      | Function | Focus event                                       |
| @blur       | Function | Blur event                                        |
npm package: @roylee1997/vue-js-modal
Description: ## Github Example ( In src folder ) https://github.com/1997roylee/vue-jg-modal
Latest version: 0.1.35

# vue-js-modal

## Github Example ( In src folder )
https://github.com/1997roylee/vue-jg-modal

## Npm 
https://www.npmjs.com/package/@roylee1997/vue-js-modal

## Command
For Install npm
```sh
$ npm i @roylee1997/vue-js-modal
```

In src folder, App.vue

```sh
$ npm install
$ npm run serve
```

## Example
Setup:
```sh
import VueJsModal from "../projects/VueJsModal/index";
Vue.use(VueJsModal);
```

Usage:
```sh
<v-modal prevent name="Apple">
    <div style="background-color: white;">
        <div style="height: 200px;"></div>
        <div class="bTn" @click="closeDialog">Close</div>
    </div>
</v-modal>
```

Show & Hide Function: 
```sh
showDialog() {
    this.$VModal.show('Apple')
}
```
```sh
closeDialog() {
    this.$VModal.hide('Apple')
}
```

## Props
| Prop | Type | Comment |
| ------ | ------ | ------ |
| name | String | The identify of the Modal |
| height | Number or String | Default auto |
| width | Number | Default 500px |
| maxHeight | Number | Default 500px |
| minHeight | Number | Default 200px |
| prevent | Boolean |  If true, you only can use $VModal.hide to hide the dialog |
| onShow | Function | When the Modal is show |
| onClose | Function | When the Modal is hide |
npm package: @roylee1998/design-tokens
Description: Haisum design tokens (CSS variables and theme helpers)
Latest version: 0.1.0

# Haisum Design System

Haisum 设计系统 Monorepo，包含可发布 npm 包与 Playground 应用。

## 工作区

- `packages/design-tokens`：设计变量与主题能力
- `packages/ui`：UI 能力封装（Element Plus + Lucide）
- `app`：Playground 与主题配置器

## 常用命令

```bash
npm install
npm run build
npm run release:check
```

## 文档

- 消费接入：`docs/consumer-usage.md`
- 发布流程：`docs/publish-guide.md`
npm package: @roylee1998/ui
Description: Haisum UI base package (Element Plus + Lucide helpers)
Latest version: 0.1.0

# Haisum Design System

Haisum 设计系统 Monorepo，包含可发布 npm 包与 Playground 应用。

## 工作区

- `packages/design-tokens`：设计变量与主题能力
- `packages/ui`：UI 能力封装（Element Plus + Lucide）
- `app`：Playground 与主题配置器

## 常用命令

```bash
npm install
npm run build
npm run release:check
```

## 文档

- 消费接入：`docs/consumer-usage.md`
- 发布流程：`docs/publish-guide.md`