open-index/open-npm huggingface dataset:
npm package: @qyhever/reset.css
Description: Reset browser default style
Author: qyhever
Latest version: 1.0.2

# basic.css

Reset browser default style.

## Installation

```
npm install @qyhever/reset.css --save
```

## Example

When using with webpack:
In Entry file
``` js
import '@qyhever/reset.css';
```

## License

None (public domain)
npm package: @qynpm/hooks
Description: 起印公共 hooks 包。
Latest version: 0.0.2

# @qynpm/hooks

`@qiyin` 公共 hooks 的 npm 拆包目录。

## 当前状态

目前这个包还在迁移初期，不是把老的 `@qiyin/hooks` 一次性整体搬过来，而是按“先公共、再解耦、最后替换”的方式逐步迁移。

当前已经迁入的能力：

- `useCreateInstance`
- `useInstanceView`

## 当前职责

这个包主要承接适合做成 npm 公共能力的 hooks。

当前这批能力的边界是：

- `useCreateInstance`
  - 负责动态创建实例
  - 支持普通挂载
  - 支持 `asComponent` 模式
- `useInstanceView`
  - 负责渲染 `useCreateInstance` 创建出来的实例视图

## 当前联调方式

根目录 [vite.config.ts](/vite.config.ts) 里有统一联调开关：

- `ENABLE_LOCAL_QIYIN_DEBUG = true`
  - `@qynpm/hooks` 走本地 [@qiyin/hooks/index.ts](/@qiyin/hooks/index.ts)
- `ENABLE_LOCAL_QIYIN_DEBUG = false`
  - `@qynpm/hooks` 走包正常入口

注意：

- 当前联调只接管 `@qynpm/hooks`
- 老的 `@qiyin/hooks` 仍然保留原有实现
- 不要把 `@qiyin/hooks` 直接整体 alias 到这个新包，否则会影响现有业务

## 当前使用建议

如果是新拆出来、准备发布 npm 的能力：

- 优先从 `@qynpm/hooks` 增加和引用

如果是老业务还在跑的历史能力：

- 继续走原来的 `@qiyin/hooks`

## 后续迁移原则

后面其他 hooks 迁移时，按下面的顺序处理：

1. 先判断是不是公共能力
2. 如果依赖业务 store / router / 页面上下文，先解耦
3. 解耦完成后再迁到 `@qynpm/hooks`
4. 验证稳定后，再逐步把业务引用切到 npm 包

当前不建议原样直接迁移的，通常是这类：

- 强依赖 `@/store`
- 强依赖具体业务模块
- 只在单一业务场景内使用的 hooks

## 已迁移说明

这次迁移里：

- `@qynpm/form` 内部的 `useSave` 已改为依赖 `@qynpm/hooks` 的 `useCreateInstance`
- `erp` 根应用已经接入 `useInstanceView`，可用于验证新实例池链路

## 构建

```bash
npm run build
```
npm package: @qynpm/ui
Description: 起印公共 UI 组件包。
Author: qy
Latest version: 0.0.2

# @qynpm/ui

起印体系内抽离出来的 Vue 3 UI 组件包，当前主要包含上传组件和弹窗组件。

## 安装

```bash
pnpm add @qynpm/ui
```

Peer Dependencies：

- `vue >= 3.4`
- `element-plus >= 2.0`
- `@element-plus/icons-vue >= 2.0`
- `@vueuse/core >= 10.0`
- `clsx >= 2.0`

## 注册

```ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import QyUI from '@qynpm/ui'

const app = createApp(App)

app.use(ElementPlus)
app.use(QyUI)
```

也可以按需引入：

```ts
import { Upload, QyDialog } from '@qynpm/ui'
```

## 组件说明

### `Upload`

上传组件，支持：

- 图片上传
- 视频上传
- 粘贴上传
- 拖拽上传
- 文本备注
- 预览

当前可配置项里，和宿主耦合最强的是上传配置：

- `api`
- `tokenKey`
- `name`

其中：

- `api` 为必填
- `tokenKey` 不传时默认使用 `Admin-Token`
- `name` 不传时默认使用 `file`

### `QyDialog`

弹窗组件，支持：

- 默认头部/底部布局
- 全屏切换
- 最小化
- 自定义 footer
- 移动端自动全屏

## 样式说明

- 包内样式会跟随构建产物一起注入
- 宿主仍然需要自行引入 `element-plus/dist/index.css`
- 当前组件内部仍然依赖宿主提供的 Tailwind / Iconify 体系能力

## 使用示例

### Upload

```vue
<template>
  <Upload
    api="/permission-api/common/uploads"
    token-key="Admin-Token"
    @change="handleChange"
  />
</template>
```

### QyDialog

```vue
<template>
  <QyDialog title="标题" @confirm="handleConfirm">
    内容区域
  </QyDialog>
</template>
```

## 说明

- 当前版本更适合体系内拆包复用
- 上传默认值仍然保留了现有项目约定，后续如果完全独立对外，可以再继续抽离

## 当前联调说明

当前 workspace 联调由顶层 Vite 开关统一控制，不再要求在 `UI` 或 `form` 内手动切换 import。

开关位置：

- [vite.config.ts](/vite.config.ts)

当前配置：

```ts
const ENABLE_LOCAL_QIYIN_DEBUG = true
```

规则如下：

1. 当值为 `true` 时
- `@qynpm/ui` 映射到本地 [@qiyin/UI/lib/index.js](/@qiyin/UI/lib/index.js)
- `@qynpm/form` / `@qiyin/form` 映射到本地 [@qiyin/form/index.ts](/@qiyin/form/index.ts)
- 消费项目开发时可以直接联调 `UI` 与 `form`

2. 当值为 `false` 时
- 走各自包的正常入口
- 行为更接近线上

如果切换开关后页面报 `Outdated Optimize Dep`：

1. 停掉当前 dev 服务
2. 清理消费项目的 `node_modules/.vite`
3. 重新启动
npm package: @qyu/reactcmp-flow-control
Description: Flow Control components for react
Latest version: 1.2.0

# @qyu/reactcmp-flow-control

General react flow control components

## Usage

### If

Render conditionally - fallback on undefined | false | null and children otherwise

```typescriptreact
function App() {
    return <CmpIf 
        value={Math.random() > 0.5 ? true : false}
        
        fallback={() => {
            return <>
                Fallback
            </>
        }}
    >
        Render
    </CmpIf>
}
```

### Require

Render conditionally depending on values - renders fallback if any value is undefined | false | null and children otherwise

```typescriptreact
function App() {
    declare const value: null | string

    return <CmpRequire
        value={[value] as const}
        // force fallback render
        state_empty={false}
        
        fallback={() => {
            return <>
                Fallback
            </>
        }}
    >
        {([value]) => {
            return <>
                Render {value}
            </>
        }}
    </CmpRequire>
}
```

### Loop

Basic array.map wrapper

```typescriptreact
function App() {
    return <CmpLoop data={["string"]}>
        {(value, i, data) => {
            return <div key={i}>
                {value}
            </div>
        }}
    </CmpLoop>
}
```

### Repeat

Repeats element number of times

```typescriptreact
function App() {
    return <CmpRepeat repeat={4}>
        {(i) => {
            return <div key={i}>
                Hello World
            </div>
        }}
    </CmpRepeat>
}
```
npm package: @qyu/signal-react
Description: React hooks for @qyu/signal-core
Latest version: 2.1.0

# @qyu/signal-core

Utility react hooks for @qyu/signal-core

## List of hooks

### useSignalValue

Creates OSignal, updates it's value after render

```tsx
const App = () => {
    const param = 10
    const root = useSignalValue(
        0,
        // dependencies, optional
        [10]
    )
}
```

### useSignalOutput

Extracts Signal output value to state, rerender when it updates

```tsx
const App = () => {
    const root_output = useSignalOutput(root)
}
```

### useSignalConnect

Same as useSignalOutput, but does not initialise value immediately and instead waits for effect.
Prevents unnecesary updates for memorized signals

```tsx
const App = () => {
    const root_connection = useSignalConnect(root)

    if (root_connection.active) {
        // prints root output
        console.log("active", root_connection.value)
    } else {
        // prints null
        console.log("active", root_connection.value)
    }
}
```

### useSignalEventDeps

Will fire event on deps change

```tsx
const App = () => {
    // config is optional
    // will schedule all updates to a microtask to properly batch them
    // if instant: true - will emit immediately
    const esignal_deps = useSignalEventDeps([1, ""], { instant: false })
}
```

### useSignalEffect

Will attach listener to target

```tsx
const App = () => {
    const root = useSignalValue(0)

    useSignalEffect({
        target: root,
        listener: target => console.log(target.output()),

        config: {
            // emit on initial effect
            emit: true
        }
    })
}
```

### useDOMStyle

```tsx
const App = (props) => {
    const root = useSignalValue(0)
    const ref = useRef<HTMLElement | null>()

    // will update left when root updates
    useDOMStyle(() => ref.current, "left", osignal_new_pipe(root, v => `${v}px`))

    // will update left and background
    useDOMStyles(
        () => ref.current,
        osignal_new_mergemap({
            backgroundColor: props.background,
            left: osignal_new_pipe(root, v => `${v}px`)
        })
    )
}
```

### useDOMAttribute

```tsx
const App = (props) => {
    const root = useSignalValue(0)
    const ref = useRef<HTMLElement | null>()

    // will update data-left when root updates
    useDOMAttribute(() => ref.current, "data-left", osignal_new_pipe(root, v => `${v}px`))

    // will update data-left and data-background
    useDOMAttributes(
        () => ref.current,
        osignal_new_mergemap({
            "data-background": props.background,
            "data-left": osignal_new_pipe(root, v => `${v}px`)
        })
    )
}
```
npm package: @qyu/spring
Description: Math for springs
Latest version: 1.0.1

# @qyu/spring

Math for building simple spring-based simulations

## Functions Provided
```typescript
const config: SpringConfig = {
    // initial drive
    // in this case graph will initially go up, before going down because initial drive is positive 
    drive: 50,
    // frequency of animation. Higher = faster
    natfreq: 0.5,
    // dampting ration
    // to see how graphs look like - go to harmonic oscillator wiki
    // when >= 0 && < 1 - will be declining sine-like wave (considering drive is 0)
    // when < 0 - will be rising sine-like wave (considering drive is 0)
    // when >= 1 will be a declining graph (considering drive is 0)
    dampratio: 0.5,
    // initial displacement from axis
    // displacement goes towards 0
    displacement: 100
}

// change for better precision
const step = 3
const trail: { timepassed: number, velocity: number, displacement: number }[] = []

for (let i = 0; i <= 30; i += step) {
    // get velocity after 15 time units
    const next_velocity = velocity(config, i)
    // get displacement after 15 time units
    const next_displacement = displacement(config, i)

    trail.push({
        timepassed: i,
        velocity: next_velocity,
        displacement: next_displacement,
    })
}

console.dir(trail, { depth: Infinity })
```