open-index/open-npm huggingface dataset:
npm package: @fengsi/vue-image
Description: A vue component for lazy loading and zooming of images
Latest version: 1.3.2

# @fengsi/vue-image

A vue component for lazy loading and zooming of images

### NPM
```
npm install @fengsi/vue-image
```

### Yarn
```
yarn add @fengsi/vue-image
```

### Styling

Import the CSS from your `node_modules` directory using:

```javascript
import '@fengsi/vue-image/lib/vue-image.css';
```

## Usage

Import the component and include in your template:
```javascript
import image from '@fengsi/vue-image';

...

export default {
  components: {
    'v-image': image
  }
}

...

<v-image src="/path/to/image.jpg" lazy-src="/path/to/lazy-image.jpg" zoom-src="/path/to/zoom-image.jpg" />
```

## Props

Prop | Type | Default | Description
--- | --- | --- | ---
src | String | | 图片原始链接
lazySrc | String | | 图片懒加载链接
sizes | String | | 与 srcset 一起使用的 sizes, 用于 img 和 source 标签
sourceSrcset | String | | source 标签的 srcset 属性
type | String | image/webp | source 标签的 type 属性
imgSrcset | String | | img 标签的 srcset 属性
imgStyle | Object | | img 标签的 style 属性
width | Number, String | 0 | img 标签的 width 属性
height | Number, String | 0 | img 标签的 height 属性
alt | String | | img 标签的 alt 属性
| | | 以下是放大功能选项
zoomSrc | String | | 可放大图片链接
moveType | String | pan | pan or drag
zoomType | String | click | click or hover
zoomScale | Number | 1 | 放大倍数
mobileBreakpoint | Number | 600 | 移动端节点
fullscreenOnMobile | Boolean | false | 在移动端全屏放大
hideCloseButton | Boolean | false | 隐藏取消按钮
afterZoomIn | Function | | Function to be called after zoom in.
afterZoomOut | Function | | Function to be called after zoom out.
| | | 以下是自己项目需求选项
imgproxy | Function | | 图片代理
isProductImage | Boolean | false | 是否为产品详情图片
lazy | Boolean | true | 是否懒加载
zoom | Boolean | false | 是否启用放大功能
widths | Array | | 响应式图片尺寸(number)
npm package: @fengsi/vue-lazy-img
Description: ```bash
Latest version: 0.1.5

# @fengsi/vue-lazy-img

## Installation

```bash

$ npm i @fengsi/vue-lazy-img

```

## Usage

```javascript

  import Vue from 'vue'
  import lazyImage from '@fengsi/vue-lazy-img'
  import '@fengsi/vue-lazy-img/lib/lazy-image.css'
  Vue.component('lazyImage', lazyImage)

  // or component
  import lazyImage from '@fengsi/vue-lazy-img'
  import '@fengsi/vue-lazy-img/lib/lazy-image.css'
  export default {
    components: {
      lazyImage,
    },
  }

```
## props

|key|description|default|options|
|:---|---|---|---|
|`sources`|赋值给<source>元素指定多个媒体资源,适用响应式加载不同尺寸的图片，列如：sources="[{ srcset: 'src/example.jpg', media: '(min-width: 800px)' }]"|`[]`|`Array`|
|`src`|图片路径|`null`|`String`|
|`lazySrc`|懒加载图片路径|`null`|`String`|
|`alt`|图片alt属性|`null`|`String`|
|`title`|图片title属性|`null`|`String`|
|`asBackground`|是否作为背景图模式|`false`|`Boolean`|
|`gradient`|只有asBackground为true时起作用；图片遮罩层,应用linear-gradient值, 列如：gradient="to top,rgba(0,0,0,1),rgba(0,0,0,0)"|`null`|`String`|
|`imgAttributeWidth`|<img>元素自身的width属性|`null`|`Number,String`
|`imgAttributeHeight`|<img>元素自身的height属性|`null`|`Number,String`
|`height`|图片高度|`null`|`Number,String`
|`maxHeight`|图片最大高度|`null`|`Number,String`
|`minHeight`|图片最小高度|`null`|`Number,String`
|`width`|图片宽度|`null`|`Number,String`
|`maxWidth`|图片最大宽度|`null`|`Number,String`
|`minWidth`|图片最小宽度|`null`|`Number,String`

# example

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### git commit -m
提交的时候遵守[约定式提交 Conventional Commits规范](https://www.conventionalcommits.org/zh-hans)


### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @fengsoft/auth-access
Description: Authorization helpers and access-control primitives for Fengsoft auth flows.
Latest version: 0.1.1

# @fengsoft/auth-access

Authorization helpers and access-control primitives for Fengsoft auth flows.

## Install

```bash
pnpm add @fengsoft/auth-access
```

## Use When

- you need reusable permission checks above auth session primitives
- you want shared access-control helpers without product-specific RBAC code

## Related Packages

- `@fengsoft/auth-contracts`
- `@fengsoft/auth-organizations`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-api-keys
Description: User-owned and organization-owned API key workflows on top of Better Auth.
Latest version: 0.1.1

# @fengsoft/auth-api-keys

User-owned and organization-owned API key workflows on top of Better Auth.

## Install

```bash
pnpm add @fengsoft/auth-api-keys better-auth
```

## Use When

- you need machine credentials next to browser sessions
- you want organization-scoped credentials for integrations or agents

## Related Packages

- `@fengsoft/auth-core`
- `@fengsoft/auth-organizations`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-contracts
Description: Public auth-facing contracts for sessions, users, organizations, memberships, invites, and API keys.
Latest version: 0.1.1

# @fengsoft/auth-contracts

Public auth-facing contracts for sessions, users, organizations, memberships, invites, and API keys.

## Install

```bash
pnpm add @fengsoft/auth-contracts
```

## Use When

- you want app code to depend on stable Fengsoft auth types
- you do not want Better Auth payload shapes leaking through your app

## Related Packages

- `@fengsoft/auth-core`
- `@fengsoft/auth-next`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-core
Description: Better Auth bootstrap and session-oriented service facade for Fengsoft-style apps.
Latest version: 0.1.1

# @fengsoft/auth-core

Better Auth bootstrap and session-oriented service facade for Fengsoft-style apps.

## Install

```bash
pnpm add @fengsoft/auth-core better-auth @better-auth/api-key
```

## Use When

- you want Better Auth behind your own package boundary
- you need sign-up, sign-in, sign-out, email verification, and password reset flows

## Related Packages

- `@fengsoft/auth-next`
- `@fengsoft/auth-react`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-db
Description: Drizzle and memory-backed auth persistence helpers for sessions, organizations, invites, and API keys.
Latest version: 0.1.1

# @fengsoft/auth-db

Drizzle and memory-backed auth persistence helpers for sessions, organizations, invites, and API keys.

## Install

```bash
pnpm add @fengsoft/auth-db drizzle-orm pg better-auth
```

## Use When

- you need Postgres-backed Better Auth persistence
- you want a memory fallback for tests and examples

## Related Packages

- `@fengsoft/auth-core`
- `@fengsoft/foundation-db`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-fastify
Description: Fastify adapter surface for Better Auth routes, session loading, and request guards.
Latest version: 0.1.1

# @fengsoft/auth-fastify

Fastify adapter surface for Better Auth routes, session loading, and request guards.

## Install

```bash
pnpm add @fengsoft/auth-fastify fastify better-auth
```

## Use When

- you are wiring Better Auth into a Fastify app
- you want reusable route plugins and session hydration helpers

## Related Packages

- `@fengsoft/auth-core`
- `@fengsoft/auth-organizations`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-next
Description: Next.js App Router helpers for Better Auth route handlers and session loading.
Latest version: 0.1.1

# @fengsoft/auth-next

Next.js App Router helpers for Better Auth route handlers and session loading.

## Install

```bash
pnpm add @fengsoft/auth-next better-auth
```

## Use When

- you are wiring authentication into a Next.js App Router app
- you want server-side session loading behind Fengsoft auth helpers

## Related Packages

- `@fengsoft/auth-core`
- `@fengsoft/auth-react`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-organizations
Description: Organization, invitation, membership, and active-organization workflows built on Better Auth.
Latest version: 0.1.1

# @fengsoft/auth-organizations

Organization, invitation, membership, and active-organization workflows built on Better Auth.

## Install

```bash
pnpm add @fengsoft/auth-organizations better-auth
```

## Use When

- your product is multi-tenant and needs organization-aware auth behavior
- you need reusable invite and membership flows before product-specific workspace rules

## Related Packages

- `@fengsoft/auth-core`
- `@fengsoft/auth-contracts`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-react
Description: React client and session context primitives for app-facing auth surfaces.
Latest version: 0.1.1

# @fengsoft/auth-react

React client and session context primitives for app-facing auth surfaces.

## Install

```bash
pnpm add @fengsoft/auth-react better-auth @better-auth/api-key
```

## Use When

- you want a shared session context in a React app
- you want Better Auth client plugin wiring centralized

## Related Packages

- `@fengsoft/auth-next`
- `@fengsoft/auth-contracts`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/auth-testing
Description: Reusable test harnesses and fixtures for Fengsoft auth integrations.
Latest version: 0.1.1

# @fengsoft/auth-testing

Reusable test harnesses and fixtures for Fengsoft auth integrations.

## Install

```bash
pnpm add -D @fengsoft/auth-testing
```

## Use When

- you want auth-oriented fixtures in unit or integration tests
- you need a repeatable Better Auth test harness for Fengsoft packages

## Related Packages

- `@fengsoft/auth-core`
- `@fengsoft/foundation-testing`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/foundation-config
Description: Typed environment and configuration helpers used across Fengsoft packages.
Latest version: 0.1.0

# @fengsoft/foundation-config

Typed environment and configuration helpers used across Fengsoft packages.

## Install

```bash
pnpm add @fengsoft/foundation-config zod
```

## Use When

- you want minimal typed env parsing helpers
- you need small reusable config primitives below product domains

## Related Packages

- `@fengsoft/foundation-contracts`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/foundation-contracts
Description: Shared primitive contracts for ids, timestamps, metadata, and error envelopes.
Latest version: 0.1.0

# @fengsoft/foundation-contracts

Shared primitive contracts for ids, timestamps, metadata, and error envelopes.

## Install

```bash
pnpm add @fengsoft/foundation-contracts
```

## Use When

- you need a minimal shared contract layer across Fengsoft packages
- you want generic ids and metadata types without pulling domain packages

## Related Packages

- `@fengsoft/auth-contracts`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/foundation-db
Description: Low-level Drizzle and Postgres helpers shared by Fengsoft persistence packages.
Latest version: 0.1.0

# @fengsoft/foundation-db

Low-level Drizzle and Postgres helpers shared by Fengsoft persistence packages.

## Install

```bash
pnpm add @fengsoft/foundation-db drizzle-orm pg
```

## Use When

- you need a small shared DB runtime without product semantics
- you want common Drizzle/Postgres helpers reused across packages

## Related Packages

- `@fengsoft/auth-db`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/foundation-observability
Description: Minimal logging and health helpers shared by Fengsoft packages.
Latest version: 0.1.0

# @fengsoft/foundation-observability

Minimal logging and health helpers shared by Fengsoft packages.

## Install

```bash
pnpm add @fengsoft/foundation-observability
```

## Use When

- you need lightweight structured logging helpers
- you want health payload helpers without full observability infrastructure

## Related Packages

- `@fengsoft/auth-core`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides
npm package: @fengsoft/foundation-testing
Description: Small reusable testing helpers shared by Fengsoft package suites.
Latest version: 0.1.0

# @fengsoft/foundation-testing

Small reusable testing helpers shared by Fengsoft package suites.

## Install

```bash
pnpm add -D @fengsoft/foundation-testing
```

## Use When

- you want tiny shared testing utilities below product-specific fixtures
- you need common helpers reused across Fengsoft package tests

## Related Packages

- `@fengsoft/auth-testing`

## Source

- Repo: `fengsoft/auth-core`
- Docs: see the root repository README and docs app for architecture and adoption guides