open-index/open-npm huggingface dataset:
npm package: @nimbl3/eslint-config-nimbl3
Description: Eslint Config developed and maintained by Nimbl3
Author: Nimbl3
Latest version: 2.1.1

# @nimbl3/eslint-config-nimbl3

> ESLint [shareable config](http://eslint.org/docs/developer-guide/shareable-configs.html) developed and maintained by [Nimbl3](https://www.nimbl3.com/)

## Installation

```
$ npm install --save-dev @nimbl3/eslint-config-nimbl3
```

## Usage

### Standalone

Add `@nimbl3/eslint-config-nimbl3` to the extends section of your `.eslintrc` configuration file.

```js
{
  "extends": [
      "@nimbl3/eslint-config-nimbl3"
  ],
  "rules": {
    // Additional, per-project rules...
  }
}
```

### With a framework

Similar process above but usually it requires to add the extra rules for the JS framework:


```js
{
  "extends": [
      "@nimbl3/eslint-config-nimbl3",
      "plugin:react/recommended", 
      "plugin:vue/recommended"
  ],
  "rules": {
    // Additional, per-project rules...
  }
}
```

Obviously, this would require to define the required dependencies in the project itself. 

## License

This project is Copyright (c) 2014-2018 Nimbl3 Ltd. It is free software,
and may be redistributed under the terms specified in the [LICENSE] file.

[LICENSE]: /LICENSE

## About

![Nimbl3](https://dtvm7z6brak4y.cloudfront.net/logo/logo-repo-readme.jpg)

This project is maintained and funded by Nimbl3 Ltd.

We love open source and do our part in sharing our work with the community!
See [our other projects][community] or [hire our team][hire] to help build your product.

[community]: https://nimbl3.github.io/
[hire]: https://nimbl3.com/
npm package: @nimble-ts/cli
Description: The CLI tool for Nimble framework
Author: Eric Ferreira
Latest version: 1.4.2

<h1 align="center" style="color: #444">
	<p>Nimble CLI</p>
</h1>
<p align="center">
	<img align="center" src="nimble_icon.png" alt="nimble" width="80px"/>
</p>

<p align="center" style="color: #777">
	<img align="center" src="logo.png" alt="nimble"/>
	<p align="center">Framework</p>
</p>
<br>

## About
The CLI tool for Nimble framework.

## Install
Run in your terminal:
```shell
$ npm i -g @nimble-ts/cli
```

## Usage
Run in your terminal:
```shell
$ nb
```

### Confirm
```shell
? Do you want create new Nimble project? (Y/n) 
```

### Set project name and confirm
```shell
? What is name of the your project? (ex.: my-project) 
```

### Done! Run project
```shell
$ nb serve
```
After, open your browser in address: http://localhost:8090
npm package: @nimble-ui/move
Description: 鼠标移动事件封装
Author: Chen Yu Yun
Latest version: 1.0.7

# nimble-ui move 封装鼠标事件

## 📢 介绍
nimble-ui move 封装鼠标事件 

## ⚡ 使用说明

### 安装依赖

```sh
npm i @nimble-ui/move
# or
yarn add @nimble-ui/move
# or
pnpm i @nimble-ui/move
```

### 使用
```html
<template>
  <div style="position: absolute;" ref="moveRef"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import move from '@nimble-ui/drag';

const moveRef = ref<HTMLElement>();
move(() => moveRef.value, {
  down({ target }, done) {
    const { offsetLeft, offsetTop } = target;

    done({left: offsetLeft, top: offsetTop})
  },
  move({ disX, disY, value }) {
    const {left, top} = value.down
    moveRef.value.style.top = `${top + disY}px`
    moveRef.value.style.left = `${left + disX}px`
  }
})

</script>
```
## move 参数
| 属性名  | 说明     | 类型                     | 默认 |
| ------- | -------- | ------------------------ | ---- |
| el      | 画布元素 | element \| () => element | -    |
| options | 参数     | MoveBaseOptions                   | -    |

### MoveBaseOptions属性
```ts
type MoveElType = Element | (() => Element | undefined | null);

interface MoveBaseOptions {
  boundary?: MoveElType | Window; // 拖拽的边界元素
  prevent?: boolean; // 阻止默认事件
  stop?: boolean; // 阻止事件冒泡
  scale?: number | (() => number | undefined); // 缩放比例
  expand?: number; // 边界元素扩大
}

interface MoveDataTypes {
  startX: number; // 按下鼠标x轴位置
  startY: number; // 按下鼠标y轴位置
  moveX: number; // 移动鼠标x轴位置
  moveY: number; // 移动鼠标y轴位置
  disX: number; // 鼠标移动x轴的距离
  disY: number; // 鼠标移动y轴的距离
  endX: number; // 鼠标抬起x轴的距离
  endY: number; // 鼠标抬起Y轴的距离
  isMove: boolean; // 是否移动
  target?: Element; // 当前移动的元素
  binElement?: Element; // 绑定的元素
}

type MoveMouseTouchEvent = MouseEvent | TouchEvent;
type MoveCallbackReturnValue = { down?: any; move?: any; up?: any };
type MoveEventCallbackParam = MoveDataTypes & { e: MoveMouseTouchEvent, value: MoveCallbackReturnValue }

interface MoveOptionsType extends MoveBaseOptions {
  down?: (data: MoveEventCallbackParam, setValue: (data: any) => void) => void;
  move?: (data: MoveEventCallbackParam, setValue: (data: any) => void) => void;
  up?: (data: MoveEventCallbackParam, setValue: (data: any) => void) => void;
  agencyTarget?: (el: Element) => Element | undefined | false | void; // 判断是否要代理
  changeTarget?: (el: Element) => Element; // 改变目标元素
  init?: (el: Element) => void; // 绑定按下事件时执行
}
```
npm package: @nimble-ui/scrollbar
Description: 滚动插件
Author: Chen Yu Yun
Latest version: 1.0.0

# nimble-ui scrollbar 封装滚动插件

## 📢 介绍
nimble-ui scrollbar 封装滚动插件 

## ⚡ 使用说明

### 安装依赖

```sh
npm i @nimble-ui/scrollbar
# or
yarn add @nimble-ui/scrollbar
# or
pnpm i @nimble-ui/scrollbar
```

### 使用
```html
<template>
  <div ref="warpRef" class="warp">
    <div ref="contentRef" class="content">
      <div
        v-for="item in list"
        :key="item.id"
        :data-drag-id="item.id"
        class="move css"
      >
      {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onBeforeUnmount } from 'vue';
import { scrollbar } from "@nimble-ui/scrollbar"

defineOptions({ name: 'move' });
const list = reactive([
  { id: 1, title: '测试1' },
  { id: 2, title: '测试2' },
  { id: 3, title: '测试3' },
  { id: 4, title: '测试4' },
  { id: 5, title: '测试5' },
  { id: 6, title: '测试6' },
  { id: 7, title: '测试7' },
  { id: 8, title: '测试8' },
  { id: 9, title: '测试9' },
  { id: 10, title: '测试10' },
]);

setTimeout(() => {
  list.push({id: 11, title: "测试11"})
}, 3000)

const warpRef = ref<HTMLElement>();
const contentRef = ref<HTMLElement>();
const getEl = () => warpRef.value;
const { destroy } = scrollbar(getEl, {
  content: () => contentRef.value!,
})
onBeforeUnmount(destroy)
</script>

<style lang="scss">
.warp {
  width: 500px;
  height: 400px;

  .move {
    width: 150px;
    height: 50px;
  }
}
</style>
```
## scrollbar 参数
| 属性名  | 说明     | 类型                     | 默认 |
| ------- | -------- | ----------------------- | ---- |
| el      | 元素     | element \| () => element | -   |
| options | 参数     | ScrollOptions            | -   |

### ScrollOptions属性
```ts
interface ScrollOptions {
  // 总是显示
  always?: boolean;
  // 最小尺寸
  minSize?: number;
  // 内容元素 必填
  content: Element | (() => Element);
  // 当触发滚动事件时，返回滚动的距离
  onScroll?: (data: { scrollLeft: number; scrollTop: number }) => void;
}
```

## scrollbar 暴露方法
| 属性名         |        说明      | 类型                                                         |
| ------------- | ---------------- | ------------------------------------------------------------ |
| scrollTo      | 滚动到一组特定坐标 | (options: ScrollToOptions \| number, yCoord?: number) => void |
| setScrollSite | 设置滚动条的距离   | (scrollLeft: number, axis: 'x' \| 'y') => void                |
| thumbColor    | 设置滚动条的颜色   | (color: string) => void                                      |
| destroy       | 销毁绑定事件等     | () => void                                                   |
npm package: @nimble-ui/vue
Description: vue3 ui组件库
Latest version: 0.5.5

<h1 align="center">@nimble-ui/vue</h1>
<p align="center">一个 Vue 3 组件库</p>
<p align="center"><b>比较完整，主题可调，组件灵活，使用 TypeScript 开发</b></p>

### 使用 TypeScript

@nimble-ui/vue 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。

### npm

使用 npm 安装。

```bash
npm i @nimble-ui/vue --save
yarn i @nimble-ui/vue --save
```

### 使用

```ts
import YYUi from "@nimble-ui/vue";
import "@nimble-ui/vue/index.css";

createApp(App).use(YYUi, {
  isDark: true, // 开启暗黑主题
  theme: {
    primary: "#1677ff" // 修改主色调
    // ...
  }
})
```

### 其他方式切换主题方式

```ts
import { useTheme } from "@nimble-ui/vue"

/**
 * 第一个参数改颜色、字体大小等等
 * 第二个参数切换主题：dark：暗黑主题  light：正常主题
 */
useTheme({
  primary: "#1677ff",
  //...
}, 'dark')
```