open-index/open-npm huggingface dataset:
npm package: @fisch0920/eslint-config
Description: Transitive Bullshit eslint config.
Author: Travis Fischer
Latest version: 1.4.0

# Forked from `@remix-run/eslint-config`

My personal ESlint config used for all projects.

## Installation

First, install this package along with ESLint in your project. **This package requires at least version 8.1 of ESLint**

```sh
npm install -D eslint @fisch0920/eslint-config
```

Then create a file named `.eslintrc.js` in the root of the project/package:

```js filename=.eslintrc.js
module.exports = {
  extends: ['@fisch0920/eslint-config']
}
```

For Node-only projects (no React/browser code), use the `node` config:

```js filename=.eslintrc.js
module.exports = {
  extends: ['@fisch0920/eslint-config/node']
}
```

## License

MIT © [Travis Fischer](https://twitter.com/transitive_bs)
npm package: @fisch0920/markdown-to-html
Description: Converts markdown to html.
Author: Travis Fischer
Latest version: 1.1.1

# markdown-to-html <!-- omit from toc -->

> Converts markdown to HTML, including sub-html and GFM.

<p>
  <a href="https://github.com/transitive-bullshit/markdown-to-html/actions/workflows/main.yml"><img alt="Build Status" src="https://github.com/transitive-bullshit/markdown-to-html/actions/workflows/main.yml/badge.svg" /></a>
  <a href="https://www.npmjs.com/package/@fisch0920/markdown-to-html"><img alt="NPM" src="https://img.shields.io/npm/v/@fisch0920/markdown-to-html.svg" /></a>
  <a href="https://github.com/transitive-bullshit/markdown-to-html/blob/main/license"><img alt="MIT License" src="https://img.shields.io/badge/license-MIT-blue" /></a>
  <a href="https://prettier.io"><img alt="Prettier Code Formatting" src="https://img.shields.io/badge/code_style-prettier-brightgreen.svg" /></a>
</p>

- [Install](#install)
- [Usage](#usage)
- [License](#license)

## Install

```bash
npm install @fisch0920/markdown-to-html
```

## Usage

```ts
import { markdownToHtml } from '@fisch0920/markdown-to-html'

const html = markdownToHtml('# **example markdown**')
```

## License

MIT © [Travis Fischer](https://x.com/transitive_bs)
npm package: @fische/react
Description: React Hooks for utility
Author: vvyre
Latest version: 0.0.3

# fische

**React Utility Custom Hook Package**

```
npm install fische
yarn add fische
pnpm add fische
```

## useBooleanState

- A useState hook for using boolean state conveniently
- example `const [display, show, hide, toggle] = useBooleanState(initialState)`
- If `initialState` is not provided as an argument, the default state value is set to **false**.
- [DOCS](https://github.com/XunderbarX/fische/tree/main/src/use-boolean-state)

## useConditionalRender

- A React hook for using conditional render easily
- useful in triggering animation with (un)mounting component
- [DOCS](https://github.com/XunderbarX/fische/tree/main/src/use-conditional-render)

## useDebouncedEffect / State / Fn

- A React hook for debounced effect/state
- [DOCS](https://github.com/XunderbarX/fische/tree/main/src/use-debounced)

## useForceRender

- A React hook for forcibly rendering a component
- [DOCS](https://github.com/XunderbarX/fische/tree/main/src/use-force-render)

## useIsomorphicLayoutEffect

- In an SSR environment, useEffect should be used, while on the client side, useLayoutEffect should be utilized.
- helps prevent hydration errors
- [DOCS](https://github.com/XunderbarX/fische/tree/main/src/use-isomorphic-layout-effect)

## useMediaQuery

- A React hook for using MediaQuery easily
- [DOCS](https://github.com/XunderbarX/fische/tree/main/src/use-media-query)

## useRefEffect

- A React hook for give effect to Ref values
- [DOCS](https://github.com/XunderbarX/fische/tree/main/src/use-ref-effect)

## useTextCopy

- A React hook for copying plain text to clipboard
- other types will be provided later
- **works only in localhost or https**
- [DOCS](https://github.com/XunderbarX/fische/tree/main/src/use-clipboard)
npm package: @fischerpascal/html-email-obfuscator
Description: NodeJS module to obfuscate eMail addresses
Latest version: 1.1.0

html-email-obfuscator for Node.js
============================

This module combines some Email obfuscation technics.

 * The @ char is removed and only its index is passed on. It will be reinserted using the expression String.fromCharCode(4*2*2*4).
 * The address itself will be transmitted as a ROT13 transformed string which will be retransformed by Javascript.


Installation
------------

```
npm install --save @fischerpascal/html-email-obfuscator
```


Usage
-----

The Email address "mail@example.com" will result in the following string:

```js
var emailObfuscator = require('@fischerpascal/html-email-obfuscator');

// Obfuscate and encode as HTML <script>
var htmlScript = emailObfuscator.asHtmlScript('mail@example.com');
// htmlScript = See below

// Obfuscate and return as string
var obfuscated = emailObfuscator.obfuscate('mail@example.com');
// obfuscated = 'znvyrknzcyr.pbz/4'
var original = emailObfuscator.unobfuscate(obfuscated);
// original = 'mail@example.com'

// Find, obfuscate and encode emails in HTML-Strings
// This function use emailObfuscator.asHtmlScript();
var obfuscated_html_string = emailObfuscator.obfuscateEMailsInHtml("<p>My Mail is test@test.de</p>");
// obfuscated_html_string = '<p>My Mail is <script>…</script></p>' // See below

```

asHtmlScript output which can be included instead of the email address:

```html
<script type="text/javascript">
var action=":otliam".split("").reverse().join("");
var href="znvyrknzcyr.pbz".replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});
href=href.substr(0, 4) + String.fromCharCode(4*2*2*4) + href.substr(4);
var a = "<a href=\""+action+href+"\">"+href+"</a>";
document.write(a);
</script>
```
npm package: @fischi20/chainawait
Description: Chainawait is a plugin that allows you to chain await calls as follows:
Latest version: 1.0.3

# @fischi20/chainawait

Chainawait is a plugin that allows you to chain await calls as follows:

```ts
const a = getUser().await.username.toUpperCase()
```

The above code will be transformed into:

```ts
const a = (await getUser()).username.toUpperCase()
```

This plugin will add the `.await` property to the Promise prototype.

### Why would you want to do this?
Comfort, readability, you are used to it from other languages, whatever really, I just like await as a postfix better than as a keyword
leading a thenable.

This plugin technically works with any thenable, you would just need to add the .await property in the type definition of that thenable and make it return the ReturnType of the thenable

```ts
// Normal thenable, any object with a then method can also be awaited
interface Thenable<T> {
  then: (onfulfilled: (value: T) => void) => void
}

// Awaited thenable, any object with a then method and a await property that returns the resolved value
interface AwaitedThenable<T> {
  then: (onfulfilled: (value: T) => void) => void
  await: T // type system only since it would get transformed by the plugin
}
```

### Tested
I tested the plugin with Vite, it should work with esbuild and rollup as well since that's what vite uses under the hood.
For the other bundlers, I didn't test it, but it should work since the plugin is based on unplugin.

## Install

```bash
npm i @fischi20/chainawait
```

<details>
<summary>Vite</summary><br>

```ts
// vite.config.ts
import chainawait from '@fischi20/chainawait/vite'

export default defineConfig({
  plugins: [
    chainawait(),
  ],
})
```

Example: [`playground/`](./playground/)

<br></details>

<details>
<summary>Rollup</summary><br>

```ts
// rollup.config.js
import chainawait from '@fischi20/chainawait/rollup'

export default {
  plugins: [
    chainawait(),
  ],
}
```

<br></details>

<details>
<summary>Webpack</summary><br>

```ts
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('@fischi20/chainawait/webpack')()
  ]
}
```

<br></details>

<details>
<summary>Nuxt</summary><br>

```ts
// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ['@fischi20/chainawait/nuxt'],
  ],
})
```

> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)

<br></details>

<details>
<summary>Vue CLI</summary><br>

```ts
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('@fischi20/chainawait/webpack')(),
    ],
  },
}
```

<br></details>

<details>
<summary>esbuild</summary><br>

```ts
import chainawait from '@fischi20/chainawait/esbuild'
// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [chainawait()],
})
```

<br></details>
npm package: @fischi20/errval
Description: Why try-catch if you can await safe?
Author: Fischnaller Daniel
Latest version: 0.0.3

# Errval

Errval is a simple error handling library for JS/TS.
It encourages to use Errors as values over exceptions.

## Installation
```sh
# npm
npm i @fischi20/errval

# pnpm
pnpm i @fischi20/errval

# yarn
yarn add @fischi20/errval
```

## Usage

- safe await a fetch request
  ```ts
  import { safe } from '@fischi20/errval'

  const [response, error] = await safe(fetch('https://example.com/data'))
  ```

- safe await a fetch callback
  ```ts
  import { safe } from '@fischi20/errval'

  const [response, error] = await safe(() => fetch('https://example.com/data'))
  ```

- secure a function
  ```ts
  import { secure } from '@fischi20/errval'

  const securedDivision = secure((a: number, b: number) => {
    if (b === 0) {
      throw new Error('division by zero')
    }
    return a / b
  })
  ```

- results
  ```ts
  import { err, isResult, ok, result } from '@fischi20/errval'

  const result = ok(1)
  const errResult = err('error')
  if(isResult(object)){
    // do something with the result here
  }
  const genericResult = result({value: 1})
  ```
npm package: @fischly-x/vue
Description: ![qalendar](https://schedule-x.s3.eu-west-1.amazonaws.com/schedule-x-logo.png)
Latest version: 3.0.1

![qalendar](https://schedule-x.s3.eu-west-1.amazonaws.com/schedule-x-logo.png)

# @schedule-x/vue

This package offers Vue components for the Schedule-X calendar and date picker. For the full documentation, please refer to: https://schedule-x.dev/

## Quick start examples

### Calendar

```vue
<script setup>
import { ScheduleXCalendar } from '@schedule-x/vue'
import {
  createCalendar,
  viewDay,
  viewWeek,
  viewMonthGrid,
  viewMonthAgenda,
} from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'

// Do not use a ref here, as the calendar instance is not reactive, and doing so might cause issues
// For updating events, use the events service plugin
const calendarApp = createCalendar({
  selectedDate: '2023-12-19',
  views: [viewDay, viewWeek, viewMonthGrid, viewMonthAgenda],
  defaultView: viewWeek.name,
  events: [
    {
      id: 1,
      title: 'Event 1',
      start: '2023-12-19',
      end: '2023-12-19',
    },
    {
      id: 2,
      title: 'Event 2',
      start: '2023-12-20 12:00',
      end: '2023-12-20 13:00',
    },
  ],
})
</script>

<template>
  <div>
    <ScheduleXCalendar :calendar-app="calendarApp" />
  </div>
</template>
```
npm package: @fiscozen/alert
Description: Design System Alert component
Author: Alen Ajam
Latest version: 3.0.0

# @fiscozen/alert

Alert component: callout for timely information (info, error, warning, success, danger).

> For usage documentation and examples, see [Storybook Documentation – Messages / FzAlert](https://main--*.storybook.inspire.cloud/?path=/docs/documentation-messages-fzalert).

## Development

### Setup

From the repo root: install dependencies with `pnpm install`. Run unit tests with `pnpm --filter @fiscozen/alert test:unit`. Run Storybook from the repo root to try the component.

### Architecture

- **Variants**: `background` (always expanded, optional title and actions), `accordion` (collapsible), `text` (description only, no title/actions/dismiss, transparent background, tone ignored).
- **Tone**: Drives icon, background and border for `background` and `accordion`; ignored for `text` (transparent background; icon still reflects tone for semantics).
- **Environment**: `frontoffice` (default) vs `backoffice`. Affects padding (`p-12` vs `p-6`) and is passed to `FzButton` / `FzIconButton`. For variant `text` + `environment: 'backoffice'`, the leading icon uses size `sm`; otherwise `md`.

### Code organization

- `src/FzAlert.vue`: main component; computed `safeVariant`, `safeEnvironment`, `isTextVariant`, `iconSize`, `containerClass`, etc.
- `src/types.ts`: `AlertProps`, `AlertVariant`; deprecated props `alertStyle`, `size`.
- `src/index.ts`: exports component and types.

### Key concepts

**Text variant**: No title, no button/link actions, not collapsible, not dismissible. Container uses `bg-transparent` (tone-based background and border are not applied). Icon size is `sm` when `environment === 'backoffice'`, `md` otherwise (`iconSize` computed).

**Environment and padding**: Root div gets `p-6` only in backoffice. Inner `FzContainer` uses `p-6` (backoffice) or `p-12` (frontoffice).

### Testing

- Unit tests: `pnpm --filter @fiscozen/alert test:unit` (or `test:unit --run -u` to update snapshots).
- Tests cover rendering, props (all variants including `text`), events, CSS classes, accessibility expectations, edge cases, and snapshots (including `text` and `text` + backoffice).

### Build

- `pnpm --filter @fiscozen/alert build`: runs `vue-tsc` and `vite build`.
npm package: @fiscozen/breadcrumbs
Description: Design System Breadcrumbs component
Author: Riccardo Agnoletto
Latest version: 0.1.1

# @fiscozen/breadcrumbs

## Note
- Per rendere più flessibile il componente abbiamo deciso di separare il rendering delle breadcrumb in due componenti: uno agnostico di pura visualizzazione, e un wrapper dipendente da `vue-router` che implementa la logica del caso d'uso "navigazione primaria".
- Gli utilizzi previsti sono
    - completamente custom: tramite `FzBreadcrumbs`
    - router link ma gestiti dal componente padre: tramite `FzRouterBreadcrumbs` passando la prop `breadcrumbs` manualmente
    - router link automatici basandosi su gerarchia route: `FzRouterBreadcrumbs`, nessun parametro (**DEFAULT**)
npm package: @fiscozen/radio
Description: Design System Radio and Radiogroup component
Author: Cristian Barraco
Latest version: 3.0.1

# @fiscozen/radio

The Radio and Radio Group components manage the selection of a single option from a set of options.

The basic usage of the Radio component is within a Radio Group. The Radio Group exposes a group of props that are to pass down to the individual Radio components. This choice was made in order to allow the end user to use custom logic to control the various radio inputs, if necessary

Here is an example of basic usage:

```tsx
import { FzRadio, FzRadioGroup } from '@fiscozen/radio';

<FzRadioGroup label="Radio Group" v-slot={radioGroupProps}>
  <FzRadio label="Option 1" value="option1" v-model="selected" v-bind="radioGroupProps"/>
  <FzRadio label="Option 2" value="option2" v-model="selected" v-bind="radioGroupProps"/>
  <FzRadio label="Option 3" value="option3" v-model="selected" v-bind="radioGroupProps"/>
</FzRadioGroup>
```
The ```radioGroupProps``` are common props that can be managed by the Radio Group component, such as ```size```, ```error```, ```disabled```, ```name```, ```emphasis```, ```required```.
npm package: @fiscozen/tab
Description: Design System Tab component
Author: Cristian Barraco
Latest version: 3.0.2

# @fiscozen/tab

Tabs are used to display multiple views in a single window. Users can switch between them by clicking on a tab.

Internally, FzTabs uses the API provide/inject to communicate with FzTab and other components.
This choice is made to avoid the use of global variables to manage the state of the tabs and to make the component uncontrolled: all
the logic is handled by the FzTabs and FzTab components.

If necessary, all components inside FzTabs can use the following code    

```typescript
import { inject, Ref } from 'vue';

const selectedTab = inject<Ref<string>>('selectedTab');
```

to manage the state of the tabs. This should be done with caution, as it can lead to unexpected behavior.
npm package: @fish-bubble/icons
Description: Vue components of fish-bubble icons collection.
Latest version: 1.0.4

<!--
 * @Date: 2023-12-30 11:43:31
 * @Description: Modify here please
-->
<p align="center">
  <img width="300px" height="250px" src="https://cdn.yupaowang.com/yupao_pc/images/pl/fish-bubble-design-logo.png">
</p>

<p align="center">fish-bubble-icons - 用于存储 fish bubble 图标资源的主包</p>

### 安装

```shell
 # NPM
$ npm install @fish-bubble/icons
# Yarn
$ yarn add @fish-bubble/icons
# pnpm
$ pnpm install @fish-bubble/icons
```

### 使用方法

```shell

 <script setup lang="ts">
   import Icon, { Close as CloseIcon, createFromIconfont } from "@fish-bubble/icons";
   // 如果你是使用 iconfont.cn
   /**
    * 对于使用 iconfont.cn 的用户，通过设置 createFromIconfont 方法参数对象中的 scriptUrl 字段，
    *  即可轻松地使用已有项目中的图标
    */
   const IconFont = createFromIconfont({
    scriptUrl: '//at.alicdn.com/t/c/font_4341410_dda0iswxhbi.js',
  });
 </script>

 <template>
   // 如果你是使用 iconfont.cn
   // 使用createFromIconfont时: SVG图标自带颜色：某些SVG图标可能已经自带颜色，这会导致您在CSS中设置的样式无效
   <IconFont type="yp-fangda" size="22px" color="red" />

   // @fish-bubble/icons自带的图标
   <CloseIcon size="20px" color="red" class="custom-class" />
 </template>

 // 自定义图标
 <p>利用 Icon 组件封装一个可复用的自定义图标。可以通过插槽传入一个 svg 组件来渲染最终的图标，以满足特定的需求。</p>
 <template>
   // size为number时不需要接上px
   <Icon :size="22" color="red">
      <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
        <path
          d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"
        />
      </svg>
   </Icon>
 </template>
```
npm package: @fish-kit/fish
Description: An enterprise-class UI design language and React components implementation
Latest version: 3.13.0-beta.0

---
order: -2
title: Fish of React
---

<div class="pic-plus">
  <img width="150" src="//cdncs.101.com/v0.1/static/fish/image/ndlogo.png">
  <span>+</span>
  <img width="150" src="//cdncs.101.com/v0.1/static/fish/image/antd.png">
</div>

<style>
.pic-plus > * {
  display: inline-block!important;
  vertical-align: middle;
}
.pic-plus span {
  font-size: 30px;
  color: #aaa;
  margin: 0 20px;
}
</style>

---

## 浏览器支持

兼容 IE9+浏览器，兼容相关细节参见：[兼容须知](/docs/compatibility)。

## 安装

### 使用 npm 安装

**我们推荐使用 npm 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

```bash
$ npm install @sdp.nd/fish --save
```

如果你未配置内网镜像，推荐执行如下命令进行配置：

```bash
$ npm config set registry="http://registry.npm.sdp.nd/"
```

建议为`@sdp.nd/fish` 配置别名 `fish`, 下面的描述中，都以配置了别名为例

### 浏览器引入

在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `fish`。

我们在 npm 发布包内的 `fish/dist` 目录下提供了 `fish.js` `fish.css` 以及 `fish.min.js` `fish.min.css`

> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。

## 示例

```jsx
import { DatePicker } from 'fish';
ReactDOM.render(<DatePicker />, mountNode);
```

未使用按需加载，需要引入如下样式：

```jsx
import 'fish/dist/fish.min.css';
```

### 按需加载

下面两种方式都可以只加载用到的组件。

- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。

  > <div style="color:red">统一使用别名：from 'fish'（禁止混合使用fish和@sdp.nd/fish，否则会整包引入fish所有组件）</div>

  ```js
   // .babelrc or babel-loader option
   {
     "plugins": [
       ["import", {"libraryName": "fish", "libraryDirectory": "lib", "style": true}] // `style: true` 会加载 less 文件
     ]
   }
  ```

  然后只需从 fish 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

  ```jsx
  // babel-plugin-import 会帮助你加载 JS 和 CSS
  import { DatePicker } from 'fish';
  ```

- 手动引入

  ```jsx
  import DatePicker from 'fish/lib/date-picker'; // 加载 JS
  import 'fish/lib/date-picker/style'; // 加载 LESS
  ```

### 自定义 fish 样式

fish 的样式满足不了业务需求的时候，需要覆盖样式时，可以采用如下两个方案。

#### 方案一

1. 项目增加 less 变量文件，[参见脚手架 less 文件](http://git.sdp.nd/fed/react-boilerplate/blob/master/src/theme/styles/theme-green.less)。
1. 修改 style-loader，[参见脚手架构建代码](http://git.sdp.nd/fed/react-boilerplate/blob/master/cfg/defaults.js#L186)。

#### 方案二

1. html 入口文件[最外层增加 id](http://git.sdp.nd/fed/react-boilerplate/blob/master/src/index.html#L15)
1. style 采用如下方式提升优先级，增加权重：

```less
#app {
  .fish-row {
    margin-left: 10px;
  }
}
```
npm package: @fish-kit/md-tools-plugin-antd
Description: To support ant.design-like websites.
Author: pengxing
Latest version: 0.1.14

# md-tools-plugin-antd

ant.design类文档增强能力：包括demo示例合并，文档拆分，视频，超链接国际化，demo目录。

## 用法

1. 安装依赖:

```bash
npm i -D md-tools-plugin-antd
```

2. 在主题index配置 plugins 中增加`md-tools-plugin-antd`.

  ```js
  module.exports = {
    plugins: ["md-tools-plugin-antd"]
  };
  ```

3. 在主题的模板文件中的使用方法:

  ```jsx
  <div>{utils.toReactComponent(pageData.content)}</div>
  ```

## API

无

## License

MIT
npm package: @fish-kit/md-tools-plugin-component-react
Description: md-tools的一个插件，用于支持React组件文档系统编译
Author: pengxing
Latest version: 0.1.6

# md-tools-plugin-component-react

把 Markdown 里的 jsx 代码块转换成 React.Element.

## 用法

1. 安装依赖:

```bash
npm i -D md-tools-plugin-component-react
```

2. 在主题index配置 plugins 中增加`md-tools-plugin-component-react`.

```js
module.exports = {
  plugins: ["md-tools-plugin-component-react?lang=jsx"]
};
```

3. 在Makdown文件中:

<pre>
...

This is a button:

```jsx
import { Button } from 'antd';
ReactDOM.render(&lt;Button&gt;Click!&lt;/Button&gt;, mountNode);
```

...
</pre>

如上代码可以渲染成:

![screenshot](https://raw.githubusercontent.com/benjycui/md-tools/master/packages/md-tools-plugin-component-react/screenshot.png)

```jsx
import { Button } from 'antd';
ReactDOM.render(&lt;Button&gt;Click!&lt;/Button&gt;, mountNode);
```

## API

### lang: String

> default: 'jsx'

代码块标识

### babelConfig: Object

> default:
> {
>   presets: [
>     'react',
>     ['env', {
>       targets: {
>         browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
>       },
>     }],
>   ],
>   plugins: [
>     'transform-class-properties',
>     'transform-object-rest-spread',
>   ],
> }

babel 配置

### noreact: Boolean

> default: false

是否自动引入 `React` 和 `ReactDOM` .

## License

MIT
npm package: @fish-kit/md-tools-plugin-description
Description: To extract description from Markdown.
Author: pengxing
Latest version: 0.1.4

# md-tools-plugin-description

处理文档中meta下的以“---”开头的描述文本

## 用法

1. 安装依赖:

```bash
npm i -D md-tools-plugin-description
```

1. 在主题index配置 plugins 中增加`md-tools-plugin-description`.

  ```js
  module.exports = {
    plugins: ["md-tools-plugin-description"]
  };
  ```

1. 在主题的模板文件中的使用方法:

  ```jsx
  <div>{utils.toReactComponent(pageData.description)}</div>
  ```

## API

无

## License

MIT
npm package: @fish-kit/md-tools-plugin-highlight-react
Description: Markdown代码块高亮
Author: pengxing
Latest version: 0.1.4

# md-tools-plugin-highlight-react

Markdown 代码块高亮

## 用法

1. 安装依赖:

```bash
npm i -D md-tools-plugin-highlight-react
```

1. 在主题index配置 plugins 中增加`md-tools-plugin-highlight-react`.

  ```js
  module.exports = {
    plugins: ["md-tools-plugin-highlight-react"]
  };
  ```

1. 在主题的模板文件中的使用方法:

  ```jsx
  <div>{utils.toReactComponent(pageData.highlightedCode)}</div>
  ```

## API

无

## License

MIT
npm package: @fish-kit/md-tools-plugin-image
Description: To support image preview by fish.
Author: pengxing
Latest version: 0.1.4

# md-tools-plugin-image

使用fish解析`<img class="preview-img" />`,提供图片预览功能

## 用法

1. 安装依赖:

```bash
npm i -D md-tools-plugin-image
```

2. 在主题index配置 plugins 中增加`md-tools-plugin-image`.

  ```js
  module.exports = {
    plugins: ["md-tools-plugin-image"]
  };
  ```

3. 在主题的模板文件中的使用方法:

  ```jsx
  <div>{utils.toReactComponent(pageData.content)}</div>
  ```

## API

无

## License

MIT
npm package: @fish-kit/md-tools-plugin-react
Description: To convert JSX which is written in Markdown to React.Element.
Author: pengxing
Latest version: 0.1.10

# md-tools-plugin-react

把 Markdown 里的 __react 代码块转换成 React.Element.

## 用法

1. 安装依赖:

```bash
npm i -D md-tools-plugin-react
```

2. 在主题index配置 plugins 中增加`md-tools-plugin-react`.

```js
module.exports = {
  plugins: ["md-tools-plugin-react?lang=__react"]
};
```

3. 在Makdown文件中:

<pre>
...

This is a button:

```__react
import { Button } from 'antd';
ReactDOM.render(&lt;Button&gt;Click!&lt;/Button&gt;, mountNode);
```

...
</pre>

如上代码可以渲染成:

![screenshot](https://raw.githubusercontent.com/benjycui/md-tools/master/packages/md-tools-plugin-react/screenshot.png)

## API

### lang: String

> default: '__react'

代码块标识

### babelConfig: Object

> default:
> {
>   presets: [
>     'react',
>     ['env', {
>       targets: {
>         browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
>       },
>     }],
>   ],
>   plugins: [
>     'transform-class-properties',
>     'transform-object-rest-spread',
>   ],
> }

babel 配置

### noreact: Boolean

> default: false

是否自动引入 `React` 和 `ReactDOM` .

## License

MIT
npm package: @fish-kit/md-tools-plugin-toc
Description: 生成markdown内容目录
Author: pengxing
Latest version: 0.1.13

# md-tools-plugin-toc

内容目录生成

## 用法

1. 安装依赖:

```bash
npm i -D md-tools-plugin-toc
```

1. 在主题index配置 plugins 中增加`md-tools-plugin-toc`.

  ```js
  module.exports = {
    plugins: ["md-tools-plugin-toc?maxDepth=2&keepElem"]
  };
  ```

1. 在主题的模板文件中的使用方法:

  ```jsx
  <div>{utils.toReactComponent(pageData.toc)}</div>
  ```

## API

### maxDepth: Number

> default: 2

目录深度，最大6级。

### keepElem: Boolean

> default: true

是否保留目录Dom元素，默认false，只取文本。

## License

MIT
npm package: @fish-kit/md-tools-theme-component-react
Description: md-tools的一个React组件文档系统
Author: pengxing
Latest version: 0.1.35

# md-tools-theme-component-react

不依赖任何UI库开发的[md-tools](http://git.sdp.nd/component-h5/md-tools)的一个主题，用于展示组件文档和示例

## Usage

1. 安装依赖:

```bash
npm i -D md-tools-theme-component-react
```

2. 在`md-tools.config.js`中配置主题:

```js
{
  theme: 'md-tools-theme-component-react',
  ...
}
```
3. 使用此主题构建文档的项目，需注意事项
  * 必须有README.md和CHANGELOG.MD两个md文件
  * 源码必须放src目录下

## Liscense

MIT
npm package: @fish-kit/md-tools-theme-multi-component-react
Description: md-tools的一个React组件库文档系统
Author: pengxing
Latest version: 1.0.18

# md-tools-theme-multi-component-react

依赖 fish 库开发的[md-tools](http://git.sdp.nd/component-h5/md-tools)的一个主题，用于展示组件库文档和示例

## Usage

1. 安装依赖:

```bash
npm i -D md-tools-theme-multi-component-react
```

2. 在`md-tools.config.js`中配置主题:

```js
{
  theme: 'md-tools-theme-multi-component-react',
  ...
}
```

3. 使用此主题构建文档的项目，需注意事项

- 必须有 README.md 和 CHANGELOG.MD 两个 md 文件
- 源码必须放 components 目录下

4.使用方提供主题配置文件 theme.config.js

## Liscense

MIT
npm package: @fish-render/carousel
Description: Fish Render carousel component for Vue 3
Author: fish-render
Latest version: 0.1.9

# Fish Render Carousel

一个功能丰富的 Vue 3 轮播图组件，支持自动播放、指示器、导航按钮和响应式高度。

## 特性

- 🎯 **自动播放** - 支持自动轮播，可配置播放间隔
- 🎮 **交互控制** - 支持点击指示器和导航按钮
- 🔄 **无限循环** - 支持无限循环模式
- 📱 **响应式设计** - 支持响应式高度配置
- 🎨 **自定义样式** - 灵活的样式定制选项
- ⚡ **高性能** - 使用 CSS 变量和媒体查询，支持 SSR

## 安装

```bash
npm install @fish-render/carousel
```

## 基础用法

```vue
<template>
  <Carousel :autoplay="true" :interval="3000" indicator-position="outside">
    <CarouselItem>
      <div class="slide">
        <h3>第一张幻灯片</h3>
        <p>这是第一张幻灯片的内容</p>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="slide">
        <h3>第二张幻灯片</h3>
        <p>这是第二张幻灯片的内容</p>
      </div>
    </CarouselItem>
  </Carousel>
</template>

<script setup>
import { Carousel, CarouselItem } from '@fish-render/carousel'
</script>
```

## 高度配置

### 固定高度

```vue
<Carousel :height="300">
  <!-- 轮播项 -->
</Carousel>
```

### 字符串高度

```vue
<Carousel height="50vh">
  <!-- 轮播项 -->
</Carousel>
```

### 响应式高度

```vue
<Carousel
  :height="{
    xs: 200, // < 640px
    sm: 300, // ≥ 640px
    md: 400, // ≥ 768px
    lg: 500, // ≥ 1024px
    xl: 600, // ≥ 1280px
  }"
>
  <!-- 轮播项 -->
</Carousel>
```

## API

### Carousel Props

| 参数              | 说明                                       | 类型                            | 默认值   |
| ----------------- | ------------------------------------------ | ------------------------------- | -------- |
| autoplay          | 是否自动播放                               | boolean                         | true     |
| interval          | 自动播放间隔时间（毫秒）                   | number                          | 3000     |
| indicatorPosition | 指示器位置                                 | 'outside' \| 'inside' \| 'none' | 'inside' |
| loop              | 是否启用无限循环模式                       | boolean                         | true     |
| height            | 轮播图高度，支持固定值、字符串或响应式对象 | string \| number \| object      | -        |

### 响应式断点

- **xs**: < 640px
- **sm**: ≥ 640px
- **md**: ≥ 768px
- **lg**: ≥ 1024px
- **xl**: ≥ 1280px

## 服务端渲染支持

组件使用 CSS 变量和媒体查询实现响应式高度，完全支持服务端渲染（SSR）。无需 JavaScript 计算，性能优异。

### SSR 兼容性

组件已针对 SSR 环境进行了优化，支持在 Nuxt 3/4 项目中使用：

```vue
<template>
  <ClientOnly>
    <Carousel :autoplay="true" :interval="3000">
      <CarouselItem>
        <div>内容 1</div>
      </CarouselItem>
      <CarouselItem>
        <div>内容 2</div>
      </CarouselItem>
    </Carousel>
  </ClientOnly>
</template>
```

**注意：** 建议使用 `<ClientOnly>` 包装组件，以确保自动播放功能正常工作。

## 样式定制

组件提供了丰富的 CSS 类名，方便自定义样式：

```css
.fish-carousel {
  /* 轮播容器 */
}

.fish-carousel__container {
  /* 轮播内容容器 */
}

.fish-carousel-item-wrapper {
  /* 轮播项包装器 */
}

.fish-carousel-item {
  /* 轮播项 */
}

.fish-carousel__nav-button {
  /* 导航按钮 */
}

.fish-carousel__indicators {
  /* 指示器容器 */
}

.fish-carousel__indicator {
  /* 指示器 */
}
```

## 许可证

MIT
npm package: @fish-render/count-to
Description: Fish Render countTo component for Vue 3
Author: fish-render
Latest version: 0.0.4

# CountTo 数字滚动组件

一个支持 SSR 和 SEO 的数字滚动动画组件。

## 特性

- ✅ 支持服务端渲染 (SSR)
- ✅ SEO 友好
- ✅ 客户端水合兼容
- ✅ 可配置的初始显示值
- ✅ 平滑的数字滚动动画
- ✅ 支持前缀和后缀
- ✅ 可控制自动播放

## 安装

```bash
npm install @fish-render/count-to
```

## 基础用法

```vue
<template>
  <CountTo :end-value="1000" />
</template>

<script setup>
import { CountTo } from '@fish-render/count-to'
</script>
```

## 高级用法

### SSR 和 SEO 配置

```vue
<template>
  <!-- 默认模式：SSR 时显示最终值，客户端水合后开始动画（SEO 友好） -->
  <CountTo :end-value="1000" />

  <!-- 强制显示最终值（适合静态展示） -->
  <CountTo :end-value="1000" initial-display="end" />

  <!-- 强制显示起始值（适合动画展示） -->
  <CountTo :end-value="1000" initial-display="start" />

  <!-- 禁用 SSR 模式（仅在客户端渲染） -->
  <CountTo :end-value="1000" :ssr="false" />
</template>
```

### 自定义动画

```vue
<template>
  <CountTo
    :start-value="0"
    :end-value="1000"
    :duration="5000"
    prefix="¥"
    suffix="元"
    :autoplay="true"
  />
</template>
```

### 手动控制

```vue
<template>
  <div>
    <CountTo ref="countToRef" :end-value="1000" :autoplay="false" />
    <button @click="startAnimation">开始动画</button>
    <button @click="resetAnimation">重置</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { CountTo } from '@fish-render/count-to'

const countToRef = ref()

const startAnimation = () => {
  countToRef.value?.startAnimation()
}

const resetAnimation = () => {
  countToRef.value?.resetToStart()
}
</script>
```

## Props

| 属性             | 类型                         | 默认值   | 说明                 |
| ---------------- | ---------------------------- | -------- | -------------------- |
| `startValue`     | `number`                     | `0`      | 起始值               |
| `endValue`       | `number`                     | -        | 结束值（必需）       |
| `duration`       | `number`                     | `3000`   | 动画持续时间（毫秒） |
| `prefix`         | `string`                     | `''`     | 前缀文本             |
| `suffix`         | `string`                     | `''`     | 后缀文本             |
| `autoplay`       | `boolean`                    | `true`   | 是否自动播放         |
| `ssr`            | `boolean`                    | `true`   | 是否启用 SSR 模式    |
| `initialDisplay` | `'start' \| 'end' \| 'auto'` | `'auto'` | 初始显示值           |

## 方法

| 方法               | 说明         |
| ------------------ | ------------ |
| `startAnimation()` | 手动开始动画 |
| `resetToStart()`   | 重置到起始值 |
| `jumpToEnd()`      | 跳转到最终值 |

## SSR 和 SEO 说明

### 服务端渲染 (SSR)

组件完全支持服务端渲染，在服务端会渲染最终值，在客户端水合后开始动画。

### SEO 友好

- **默认情况下，SSR 时会显示最终值**，确保搜索引擎能够索引到正确的数值
- 可以通过 `initialDisplay` 属性控制初始显示的内容
- 支持 `prefix` 和 `suffix` 属性，提供更丰富的上下文信息

### 水合兼容

组件确保服务端和客户端渲染结果一致，避免水合不匹配的问题。

## 注意事项

1. 在 SSR 环境下，动画只会在客户端水合后开始
2. 如果禁用 `autoplay`，组件会直接显示最终值
3. 使用 `initialDisplay="end"` 时，SSR 和客户端都会显示最终值，适合静态展示场景
4. 使用 `initialDisplay="start"` 时，始终显示起始值，适合需要动画效果的场景
5. **默认情况下，SSR 时显示最终值以优化 SEO，客户端水合后开始动画**
npm package: @fish-render/gantt
Description: Fish Render gantt component for Vue 3
Author: fish-render
Latest version: 0.1.7

# @fish-render/gantt

Vue 3 gantt 组件，提供现代化的用户界面体验。

## 安装

```bash
npm install @fish-render/gantt
# 或
yarn add @fish-render/gantt
# 或
pnpm add @fish-render/gantt
```

## 使用方法

### 方式一：自动引入样式（推荐）

当你引入组件时，样式会自动加载：

```vue
<template>
  <Gantt>
    <!-- 组件内容 -->
  </Gantt>
</template>

<script setup>
import { Gantt } from '@fish-render/gantt'
// 样式会自动加载，无需额外引入
</script>
```

### 方式二：手动引入样式

如果你想要手动控制样式的引入时机：

```vue
<template>
  <Gantt>
    <!-- 组件内容 -->
  </Gantt>
</template>

<script setup>
import { Gantt } from '@fish-render/gantt'
</script>

<style lang="scss">
/* 手动引入样式（SCSS） */
@import '@fish-render/gantt/styles';
</style>
```

### 方式三：在 main.js 中全局引入

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { Gantt } from '@fish-render/gantt'
import '@fish-render/gantt/styles'

const app = createApp(App)

app.component('Gantt', Gantt)

app.mount('#app')
```

### 方式四：使用插件方式

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import GanttPlugin from '@fish-render/gantt'

const app = createApp(App)
app.use(GanttPlugin)
app.mount('#app')
```

## 示例

### 基础用法

```vue
<template>
  <Gantt>
    <!-- 组件内容 -->
  </Gantt>
</template>
```

# Gantt

甘特图组件。

## 基本用法

```vue
<Gantt :tasks="tasks" view="hour" :unitWidth="80" :rowHeight="32" :barHeightRatio="0.7" :height="360" />
```

## Props

- `tasks: Task[]` 任务数据
- `groups?: Group[]` 分组数据（可选）
- `groupField?: string | ((task: Task) => string | number)` 分组字段或函数
- `start?: Date | number` 开始时间（不传则从任务中推断）
- `end?: Date | number` 结束时间（不传则从任务中推断）
- `view?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'` 视图类型，默认 `hour`
- `scale?: number` 缩放比例，默认 `1`
- `viewConfig?: { unitWidth?: { hour?: number }, minTickInterval?: { hour?: string | number } }` 视图配置
- `unitWidth?: number` 单位宽度（优先级高于 `viewConfig.unitWidth.hour`）
- `minTickInterval?: string | number` 最小刻度间隔（优先级高于 `viewConfig.minTickInterval.hour`）
- `tickFormat?: (date: Date, view: string) => string` 刻度文本格式化
- `rowHeight?: number` 行高，默认 `32`
- `barHeightRatio?: number` 任务条高度比例，默认 `0.7`
- `height?: string | number` 组件高度（例如 `360` 或 `'360px'`）。若不设置，则使用默认高度并可通过 `style` 覆盖。
- `class?: string` 额外类名
- `style?: Record<string, string | number>` 行内样式

## 说明

- 当设置了 `height` 时，组件会将其应用到根容器上，并保持内部 `header` 置顶、`viewport` 可滚动。
- 网格与表头均为 Canvas 绘制，纵向滚动由容器控制。

### 类型定义

```typescript
// Gantt 组件 Props
interface GanttProps {
  // 组件属性类型定义
}
```

## 样式自定义

组件使用 CSS 类名，你可以通过覆盖这些类名来自定义样式：

```css
/* gantt 组件样式 */
.fish-gantt {
  /* 自定义组件样式 */
}
```

## 注意事项

1. **浏览器兼容性**：组件使用了现代 CSS 特性，确保在现代浏览器中使用
2. **样式加载**：样式是全局的，会在应用启动时自动加载
3. **Tree Shaking**：如果你使用 Tree Shaking，建议使用手动引入样式的方式
4. **TypeScript 支持**：组件完全支持 TypeScript，提供完整的类型定义

## 许可证

MIT License
npm package: @fish-render/icons
Description: Fish Render icon library for Vue 3
Author: fish-render
Latest version: 0.1.13

# @fish-render/icons

Fish Render 图标库，支持 Vue 3 和按需导入。

## 安装

```bash
npm install @fish-render/icons
```

## 使用方法

### 完整导入

```javascript
import { Left, Right, Add, Delete } from '@fish-render/icons'
```

### 按需导入（推荐）

```javascript
// 从主包按需导入
import { Left, Right, Add, Delete } from '@fish-render/icons'

// 或者直接从具体图标文件导入（更小的打包体积）
import { Left } from '@fish-render/icons/icons/Left'
import { Right } from '@fish-render/icons/icons/Right'
import { Add } from '@fish-render/icons/icons/Add'
import { Delete } from '@fish-render/icons/icons/Delete'
```

### 在 Vue 组件中使用

```vue
<template>
  <div>
    <Left />
    <Right />
    <Add />
    <Delete />
  </div>
</template>

<script setup>
import { Left, Right, Add, Delete } from '@fish-render/icons'
</script>
```

## 可用的图标

- `Left` - 左箭头
- `Right` - 右箭头
- `Add` - 添加
- `Delete` - 删除
- `Selected` - 选中
- `Fillin` - 填充
- `InformationAdd` - 信息添加
- `More` - 更多
- `More1` - 更多 1
- `Refresh` - 刷新
- `Search` - 搜索
- `Trash` - 垃圾桶
- `Under` - 下箭头
- `Up` - 上箭头

## 按需导入的优势

1. **更小的打包体积**: 只导入需要的图标，减少最终打包大小
2. **更好的性能**: 减少不必要的代码加载
3. **更灵活的导入方式**: 支持从主包或具体文件导入

## 构建配置

本包支持以下构建格式：

- ES Module (`.mjs`)
- UMD (`.umd.js`)
- TypeScript 声明文件 (`.d.ts`)

## 开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 生成图标
npm run generate
```
npm package: @fish-render/table
Description: Fish Render table component for Vue 3
Author: fish-render
Latest version: 0.1.5

# @fish-render/table

Vue 3 table 组件，提供现代化的用户界面体验。

## 安装

```bash
npm install @fish-render/table
# 或
yarn add @fish-render/table
# 或
pnpm add @fish-render/table
```

## 使用方法

### 方式一：自动引入样式（推荐）

当你引入组件时，样式会自动加载：

```vue
<template>
  <Table>
    <!-- 组件内容 -->
  </Table>
</template>

<script setup>
import { Table } from '@fish-render/table'
// 样式会自动加载，无需额外引入
</script>
```

### 方式二：手动引入样式

如果你想要手动控制样式的引入时机：

```vue
<template>
  <Table>
    <!-- 组件内容 -->
  </Table>
</template>

<script setup>
import { Table } from '@fish-render/table'
</script>

<style>
/* 手动引入样式 */
@import '@fish-render/table/style.css';
</style>
```

### 方式三：在 main.js 中全局引入

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { Table } from '@fish-render/table'
import '@fish-render/table/style.css'

const app = createApp(App)

app.component('Table', Table)

app.mount('#app')
```

### 方式四：使用插件方式

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import TablePlugin from '@fish-render/table'

const app = createApp(App)
app.use(TablePlugin)
app.mount('#app')
```

## 示例

### 基础用法

```vue
<template>
  <Table>
    <!-- 组件内容 -->
  </Table>
</template>
```

## API

### Table Props

| 参数 | 类型 | 默认值 | 说明 |
| ---- | ---- | ------ | ---- |
| - | - | - | - |

### 类型定义

```typescript
// Table 组件 Props
interface TableProps {
  // 组件属性类型定义
}
```

## 样式自定义

组件使用 CSS 类名，你可以通过覆盖这些类名来自定义样式：

```css
/* table 组件样式 */
.fish-table {
  /* 自定义组件样式 */
}
```

## 注意事项

1. **浏览器兼容性**：组件使用了现代 CSS 特性，确保在现代浏览器中使用
2. **样式加载**：样式是全局的，会在应用启动时自动加载
3. **Tree Shaking**：如果你使用 Tree Shaking，建议使用手动引入样式的方式
4. **TypeScript 支持**：组件完全支持 TypeScript，提供完整的类型定义

## 许可证

MIT License
npm package: @fish-render/table-gantt
Description: Fish Render table-gantt component for Vue 3
Author: fish-render
Latest version: 0.1.8

# @fish-render/table-gantt

TableGantt 组件是一个将表格和甘特图结合在一起的复合组件，左侧显示表格数据，右侧显示对应的甘特图任务，支持两者之间的数据联动和同步滚动。

> 注意：该组件依赖于以下组件，请确保已安装：
> - @fish-render/table
> - @fish-render/gantt
> - @fish-render/separator

## 安装

```bash
npm install @fish-render/table-gantt
# 或
yarn add @fish-render/table-gantt
# 或
pnpm add @fish-render/table-gantt
```

## 使用方法

### 基础用法

```vue
<template>
  <TableGantt
    height="500px"
    tableWidth="300px"
    :data="taskData"
    :columns="columns"
    @sync-scroll="handleSyncScroll"
    @update:data="handleDataUpdate"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 样式会自动加载，无需额外引入
import { TableGantt } from '@fish-render/table-gantt'

// 统一数据源
const taskData = ref([
  { 
    id: 1, 
    name: '任务1', 
    assignee: '张三',
    start: new Date('2023-06-01'),
    end: new Date('2023-06-05'),
    groupId: 'group1',
    progress: 0.5
  },
  { 
    id: 2, 
    name: '任务2', 
    assignee: '李四',
    start: new Date('2023-06-03'),
    end: new Date('2023-06-08'),
    groupId: 'group1',
    progress: 0.3
  },
  { 
    id: 3, 
    name: '任务3', 
    assignee: '王五',
    start: new Date('2023-06-06'),
    end: new Date('2023-06-10'),
    groupId: 'group2',
    progress: 0.8
  },
])

// 表格列配置
const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '任务名称', dataIndex: 'name', key: 'name' },
  { title: '负责人', dataIndex: 'assignee', key: 'assignee' },
  { title: '进度', dataIndex: 'progress', key: 'progress', render: (text) => `${Math.round(text * 100)}%` },
]

// 处理同步滚动
const handleSyncScroll = (scrollTop: number) => {
  console.log('同步滚动位置:', scrollTop)
}

// 处理数据更新
const handleDataUpdate = (updatedData: any[]) => {
  console.log('数据已更新:', updatedData)
  taskData.value = updatedData
}
</script>
```

### 全局引入方式

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import TableGanttPlugin from '@fish-render/table-gantt'

const app = createApp(App)
app.use(TableGanttPlugin)
app.mount('#app')
```

## 特性

1. **统一数据源**：表格和甘特图共用一个数据源，简化数据管理
2. **左右联动**：表格与甘特图同步滚动，提升用户体验
3. **灵活的字段映射**：通过taskFieldMap配置项可以灵活映射数据源中的字段
4. **双向数据绑定**：支持从甘特图更新回原始数据源
5. **完整的类型支持**：提供TypeScript类型定义

## 注意事项

1. 确保数据源中包含甘特图所需的必要字段（至少包含id、start、end字段）
2. 推荐设置统一的行高，以确保滚动同步效果最佳
3. 当数据量大时，可能需要考虑性能优化策略
4. 如果数据源字段名与甘特图默认字段名不同，需要通过taskFieldMap进行映射配置

## 许可证

MIT License
npm package: @fish1024/utils
Description: 一个 JavaScript 公用方法集合
Author: afish1024
Latest version: 0.0.3

# `@fish1024/utils`

A collection of small JavaScript utilities.

使用：

```bash
npm install @fish1024/utils

```

```ts
import { getIntegers } from "@fish1024/utils"

// 按需引入
import getIntegers from "@fish1024/utils/get-integers"
```
npm package: @fishback/adapter-lambda
Description: An adapter for [SvelteKit](https://kit.svelte.dev/) for AWS Lambda via Lambda Proxy and API Gateway.  [Serverless](https://www.serverless.com/) deployment.
Author: James Bray
Latest version: 1.1.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# adapter-lambda for SvelteKit

An adapter to build a [SvelteKit](https://kit.svelte.dev/) app into a lambda ready for deployment with lambda proxy via the Serverless framework.

## Installation
```
npm install --save-dev @yarbsemaj/adapter-lambda
```
## Usage

In your `svelte.config.js` configure the adapter as bellow;

```js
import preprocess from 'svelte-preprocess'; //Optional
import serverless from '@yarbsemaj/adapter-lambda';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess(), //Optional

  kit: {
    adapter: serverless(),
  },

};

export default config;
```
Copy `serverless.yml` from the root of this repo to the root of your project, make sure to change the service name.

After building your app run `sls deploy` to deploy code to AWS using the build tool [serverless](https://www.serverless.com/).

Your app can then be accessed via the CloudFront distribution created as a part of the stack.

## Static Assets and precompiled pages
To server static assets and precompiled pages this adapter makes use of S3. In order to route traffic the correct destination a Lambda@edge fuction is used to perfrom a origin rewrite to redirect traffic to the S3 Bucket.

## Infrastructure Diagram
![Infra](https://github.com/yarbsemaj/sveltekit-adapter-lambda/blob/master/docs/assets/diagram.png?raw=true)


## Help! I'm getting an error while building or serving my app.
Please raise an issue on [Github](https://github.com/yarbsemaj/sveltekit-adapter-lambda/issues), and I will be happy to issue a fix.

## Versions
| Adapter Version| Sveltekit Version |
| ---------------| ----------------- |
| 1.1.x          | 1.22.0 (Official) |
| 1.x.x          | 1.0.0 (Official)  |
| 0.12.x         | 1.0.0-next.433    |
| 0.11.x         | 1.0.0-next.401    |
| 0.10.x         | 1.0.0-next.380    |
| 0.9.x          | 1.0.0-next.348    |
| 0.6.x - 0.8.x  | 1.0.0-next.301    |
| 0.5.x          | 1.0.0-next.286    |
| 0.3.x - 0.4.x  | 1.0.0-next.286    |
| 0.2.x          | 1.0.0-next.239    |
| 0.1.x          | 1.0.0-next.169    |
npm package: @fishbird/core
Description: Fishbird is a simple, lightweight, and fast Promise utility library
Author: Igor Suvorov
Latest version: 0.0.2

# Fishbird

[![NPM version](https://badgen.net/npm/v/fishbird)](https://www.npmjs.com/package/fishbird)
[![Have TypeScript types](https://badgen.net/npm/types/fishbird)](https://www.npmjs.com/package/fishbird)
[![Tests](https://github.com/isuvorov/fishbird/actions/workflows/npm-test-publish.yml/badge.svg)](https://github.com/isuvorov/fishbird/actions/workflows/npm-publish.yml)
[![NPM Package size](https://badgen.net/bundlephobia/minzip/fishbird)](https://bundlephobia.com/result?p=fishbird)
[![License](https://badgen.net//github/license/isuvorov/fishbird)](https://github.com/isuvorov/fishbird/blob/master/LICENSE)
[![Ask me in Telegram](https://img.shields.io/badge/Ask%20me%20in-Telegram-brightblue.svg)](https://t.me/isuvorov)

<img src="https://isuvorov.github.io/fishbird/fishbird.png" align="right" 
     alt="Fishbird placeholder image by shutterstock" width="120" height="120">

Fishbird is a simple, lightweight, and fast *Promise* utility library.

- **Small**. Less 1Kb (minified and gzipped). No dependencies.
- **Fast**. Its 2 times faster than Bluebird by benchmarkes.
- **ES modules** and **tree-shaking** support.
- **TypeScript** friendly.
- **Portable** Supports modern browsers, IE with Babel, Node.js and React Native.
- **Compatible** with Bluebird API.

```js
import { map } from 'fishbird';

const res = map([1 ,2 , 3], async (id) => {
    const res = await fetch(id);
    return res.json();
});
```

## Installation

```bash
npm i fishbird
```

```bash
yarn i fishbird
```

```bash
pnpm i fishbird
```

## Usage

## Inspired by  

- [Bluebird](https://github.com/petkaantonov/bluebird)
- Lodash

## Reading for developers

- https://dev.to/orabazu/how-to-bundle-a-tree-shakable-typescript-library-with-tsup-and-publish-with-npm-3c46
- https://tsup.egoist.dev/
- https://blog.theodo.com/2021/04/library-tree-shaking/#:~:text=ESM%20is%20a%20requirement%20for,them%20both%20through%20the%20package.