open-index/open-npm huggingface dataset:
npm package: @shirleyzeng/datav-lib
Description: Vue3 large screen library
Author: Shirley Zeng
Latest version: 0.0.1

# @shirleyzeng/datav-lib

基于 Vue 3 的大屏数据可视化动效组件库，提供丰富的可视化组件和动画效果，专为数据大屏、监控看板等场景设计。

## ✨ 特性
🚀 基于 Vue 3 - 完全使用 Vue 3 Composition API 开发
🎨 现代化动效 - 精心设计的 SVG 动画和 CSS 动效
📊 ECharts 深度集成 - 开箱即用的图表组件封装
🎯 高度可定制 - 丰富的配置选项和样式定制能力
📦 TypeScript 支持 - 完整的类型定义
🎪 响应式设计 - 适配各种屏幕尺寸

## 📦 安装
```bash
# 安装组件库和 ECharts（必需依赖）
npm install @shirleyzeng/datav-lib echarts -S
```

## 🚀 快速开始

### 全局引入（推荐）

```js
import { createApp } from 'vue'
import App from './App.vue'
import DatavLib from '@shirleyzeng/datav-lib'
import '@shirleyzeng/datav-lib/dist/index.css'

const app = createApp(App)
app.use(DatavLib) // 注册所有组件
app.mount('#app')
```

### 按需引入

```js
import { 
  SvgLoading, 
  ScreenContainer, 
  FlyBox, 
  ECharts 
} from '@shirleyzeng/datav-lib'
```

## 🎯 组件使用

### SvgLoading - SVG 加载动画组件
一个优雅的双环旋转加载动画，适用于数据加载状态。
```vue
<template>
  <SvgLoading 
    :width="80"
    :height="80"
    outside-color="#1890ff"
    inside-color="#52c41a"
    :duration="2"
  />
</template>
```
Props 配置：

参数	类型	默认值	说明
width	number	80	加载器宽度（像素）
height	number	80	加载器高度（像素）
outside-color	string	'#1890ff'	外环颜色
inside-color	string	'#52c41a'	内环颜色
duration	number	2	旋转一周的秒数

### ScreenContainer - 大屏容器组件
为大屏内容提供自适应容器，支持自定义尺寸和响应式布局。
```vue
<template>
  <ScreenContainer 
    :width="1920"
    :height="1080"
  >
    <!-- 你的大屏内容 -->
    <div class="dashboard-content">
      <ECharts :option="chartOption" />
      <FlyBox />
    </div>
  </ScreenContainer>
</template>
```
Props 配置：

参数	类型	默认值	说明
width	number	1920	容器设计宽度（像素）
height	number	1080	容器设计高度（像素）

### FlyBox - 流光边框组件
炫酷的流光边框效果，带有动态星星点缀，适合作为卡片或区域装饰。
``` vue
<template>
  <FlyBox 
    line-color="rgba(24, 144, 255, 0.8)"
    :line-width="2"
    star-color="#ffeb3b"
    :star-length="20"
    :star-width="3"
    :duration="3"
  >
    <div class="content">
      <h3>数据面板</h3>
      <!-- 内容区域 -->
    </div>
  </FlyBox>
</template>
```
Props 配置：

参数	类型	默认值	说明
line-color	string	'rgba(24, 144, 255, 0.8)'	流光线条颜色
line-width	number	2	线条宽度（像素）
star-color	string	'#ffeb3b'	星星颜色
star-length	number	20	星星长度（像素）
star-width	number	3	星星宽度（像素）
duration	number	3	动画周期（秒）

### ECharts - 图表组件
基于 ECharts 的高度封装图表组件，支持完整的 ECharts 配置和地图功能。
```vue
<script setup>
import { ref } from 'vue'

const chartOption = ref({
  title: { text: '销售额统计' },
  xAxis: { data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [820, 932, 901, 934, 1290, 1330]
  }]
})
</script>

<template>
  <ECharts 
    :width="600"
    :height="400"
    :option="chartOption"
    :loading="false"
    theme="light"
    :maps="mapData"
  />
</template>
```
Props 配置：

参数	类型	默认值	说明
width	string	'100%'	图表宽度（支持像素或百分比）
height	string	'400px'	图表高度
option	object	{}	ECharts 配置项（完整文档）
loading	boolean	false	是否显示加载状态
theme	string	'light'	主题风格（'light' / 'dark' 或自定义主题名）
maps	Array	[]	地图数据，用于注册自定义地图

地图功能示例：
```js
// 使用地图功能
import chinaGeoJson from './china.json'

const mapData = [{
  name: 'china',
  geoJson: chinaGeoJson,
  specialAreas: {
    '台湾省': { color: '#ff0000' }
  }
}]
```
npm package: @shirleyzeng/z-element
Description: Vue3 components library
Author: Shirley Zeng
Latest version: 1.0.1

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
npm package: @shirohana/bulma-stylus
Description: Pure Stylus implementation of Bulma.css with a little changes
Author: Hana Shiro
Latest version: 0.7.1

# Bulma Stylus
> Pure Stylus implementation of [Bulma.css](https://github.com/jgthms/bulma)

#### Notice! This package is used to integrate Bulma with Stylus, it does NOT includes builded css files.

![Bulma-Stylus banner](docs/images/bulma-stylus-banner.png)

## Install
_This package version is synchronous with Bulma, every difference between the same version of Bulma
will be logged in [Changelog](CHANGELOG.md)._

### NPM
```sh
npm install @shirohana/bulma-stylus
```

__or__

### Yarn
```sh
yarn add @shirohana/bulma-stylus
```

## Links
- [📚 Offical documentation](https://bulma.io/documentation/overview/start)
- [📜 Changelog](CHANGELOG.md)

## Difference between Bulma
- Support 4k container (Disable: `$4k-enabled = false`)
- All possible floating numbers are round to 4 digits after the period

#### New Feature
- Dynamic `rem` for better user experience on high-resolution screens

  [![high resolution comparation](docs/images/responsiveness-compare.png)](https://raw.githubusercontent.com/shirohana/bulma.stylus/dev/docs/images/responsiveness-compare.png)

  If enabled, the page will be scale in ratio when device width exceeds `$body-auto-scale` (default: `$fullhd`).

  You can try a higher value and find out the best in your situation like `$body-auto-scale = $fullhd + 20*16px`.

  Set `$body-auto-scale` to any falsy value to disable this feature.

#### Internal
- Use `em/rem` instead `px` in every elements, components and helpers
- Replace `lighten()` function with `sass-lighten()` which implements sass-like `lighten`
- Replace `darken()` function with `sass-darken()` which implements sass-like `darken`
- Remove `powerNumber()` function (Use Stylus [`exponent-operator`][stylus-operator-exponent] instead)
- Remove `colorLuminance()` function (Use Stylus built-in function [`luminosity()`][stylus-bifs-luminosity] instead)

[stylus-operator-exponent]: http://stylus-lang.com/docs/operators.html#exponent-
[stylus-bifs-luminosity]: http://stylus-lang.com/docs/bifs.html#luminositycolor

## Contributing

_Bug fix or improvement only, or you can create an [Issue][issue] for any problem :)_

#### Install dependencies
```sh
yarn; cd docs && yarn
```

#### Test your code
Ensure there's no error reported
```sh
yarn dev
```

Start documentation server and ensure the page looks in expected
```sh
cd docs && docker-compose up
```

#### Before committing
```sh
yarn clean
```

[issue]: https://github.com/shirohana/bulma.stylus/issues/new

## Inherited copyright and license
© 2018 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
npm package: @shiroi-shi/techstack
Description: List of programming languages, frameworks, libraries and other tools used by developers and companies with the name, logo, description and type.
Author: Aurélien Toussaint
Latest version: 1.1.4

<p align="center"><img src="https://raw.githubusercontent.com/Shiroi-shi/techstack/master/data/logos/techstack.svg" alt="techstack logo" data-canonical-src="https://raw.githubusercontent.com/Shiroi-shi/techstack/master/data/logos/techstack.svg" width="200" height="100" /></p>

# Techstack
List of programming languages, frameworks, libraries and other tools used by developers and companies with the name, logo, description and type.

### Work in progress
The list is still a work in progress, it is subject to many changes, you can open an issue or a pull request if you have any suggestion about something to add or modify.

## How to install
```
npm i @shiroi-shi/techstack
```

## Usage
```javascript
import techstack from '@shiroi-shi/techstack';

console.log(techstack.all) // list all technologies
console.log(techstack.languages) // list all languages
...
```

## Options
| Option | Description |
| ------------ | ----------- |
| `all`   | List all technologies |
| `languages`  | List all languages |
| `libraries` | List all libraries |
| `databases` | List all databases |
| `frameworks` | List all frameworks |
| `tools` | List all tools |
| `os` | List all operating systems |

## Object content
```json
  {
    "name": "techstack",
    "website": "https://github.com/Shiroi-shi/techstack",
    "logo": "https://cdn.jsdelivr.net/npm/@shiroi-shi/techstack/data/logos/techstack.svg",
    "slug": "techstack",
    "description": "List of programming languages, frameworks, libraries and other tools used by developers and companies with the name, logo, description and type.",
    "type": "Library"
  }
```

## Contributing
Help would be greatly appreciated, and I would be happy to discuss about what to add, delete or modify in the list. 

## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @shiron4710/eslint-config
Description: Config of ESLint for me.
Author: shiron4710
Latest version: 1.3.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# shiron's ESLint Config

This is shiron's personal ESLint configuration for TypeScript projects.

## Installation

To use this configuration, you can install it via npm:

```bash
npm install --save-dev @shiron4710/eslint-config
```

## Usage

Once installed, you can extend this configuration in your `.eslintrc.js` file:

```js
module.exports = {
  extends: ["@shiron4710"],
};
```

## License

MIT License
npm package: @shironeko1052/autoimg
Description: Web component for content-aware image resizing and focusing
Author: Liyi Zhang
Latest version: 0.1.1

# Autoimg Webcomponent

[![npm](https://img.shields.io/npm/v/@shironeko1052/autoimg)](https://www.npmjs.com/package/@shironeko1052/autoimg)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@shironeko1052/autoimg?label=size%20(minified%20%2B%20gzipped))](https://bundlephobia.com/package/@shironeko1052/autoimg)

## Description

Web component implementation of AutoImg - provides the `<auto-img>` custom element for content-aware image resizing and focusing. This package allows you to use AutoImg as a standard HTML custom element that automatically adjusts image positioning based on container size and defined focus areas.

## Installation

```bash
npm install @shironeko1052/autoimg
```
## Usage

```html
<auto-img
  src="https://example.com/image.jpg"
  width="200"
  height="200"
  focus="100,200;300,400"
  padding="10"
  placeholder="data:image/...">
</auto-img>
```

For more details and examples, see the [main repository](https://github.com/shironeko1337/auto-img).
npm package: @shironeko1052/autoimg-core
Description: Core library for resizing and shifting images to keep content focused
Author: Liyi Zhang
Latest version: 0.1.1

# AutoImg Core

[![npm](https://img.shields.io/npm/v/@shironeko1052/autoimg-core)](https://www.npmjs.com/package/@shironeko1052/autoimg-core)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@shironeko1052/autoimg-core?label=core%2Fapi%20size&color=blue)](https://bundlephobia.com/package/@shironeko1052/autoimg-core)

## Description

Core library for AutoImg - provides the fundamental algorithms and models for content-aware image resizing and focusing. This package contains the core logic for calculating optimal image positioning based on defined focus areas, enabling images to maintain visual focus when displayed in containers of varying dimensions.

## Installation

```bash
npm install @shironeko1052/autoimg-core
```

## Usage

```javascript
import { AutoImgModel } from '@shironeko1052/autoimg-core';
import { autoImgAPI } from '@shironeko1052/autoimg-core/api';

// Use the API to load and render images
autoImgAPI.loadAll('[data-auto-img]');
```

For more details and examples, see the [main repository](https://github.com/shironeko1337/auto-img).
npm package: @shironeko1052/autoimg-demo
Description: Demo application for AutoImg library
Author: Liyi Zhang
Latest version: 1.0.0

# AutoImg Demo

## Description

Demo application showcasing AutoImg library features and usage examples. This package contains interactive examples demonstrating various AutoImg capabilities including web components, React integration, Vue integration, focus areas, placeholders, lazy loading, and responsive behavior.

## Installation

This is a demo package and not published to npm. To run the demo locally:

```bash
# From the demo directory
npm install
npm run build
npm run demo
```

Or for development with hot reload:

```bash
npm run dev
```

The demo will be available at `http://localhost:3000` (or the port shown in the terminal).

For more details and examples, see the [main repository](https://github.com/shironeko1337/auto-img).
npm package: @shironeko1052/autoimg-react
Description: React component wrapper for AutoImg - content-aware image resizing
Author: Liyi Zhang
Latest version: 0.1.0

# Autoimg React

## Description

React component wrapper for AutoImg - provides a React component for content-aware image resizing and focusing. This package wraps the AutoImg web component with proper React integration, TypeScript support, and React-friendly props.

## Installation

```bash
npm install @shironeko1052/autoimg-react
```

## Usage

```tsx
import { AutoImg } from '@shironeko1052/autoimg-react';

function App() {
  return (
    <AutoImg
      src="https://example.com/image.jpg"
      width="400"
      height="300"
      focus="100,200;300,400"
      padding="10"
      placeholder="data:image/..."
      imgAlt="Description"
      onClick={() => console.log('Clicked!')}
    />
  );
}
```

For more details and examples, see the [main repository](https://github.com/shironeko1337/auto-img).
npm package: @shironeko1052/autoimg-vue
Description: Vue component wrapper for AutoImg - content-aware image resizing
Author: Liyi Zhang
Latest version: 0.1.0

# Autoimg Vue

## Description

Vue component wrapper for AutoImg - provides a Vue component for content-aware image resizing and focusing. This package wraps the AutoImg web component with proper Vue 3 integration, TypeScript support, and Vue-friendly props. Vue 3 has excellent native support for web components, making integration seamless.

## Installation

```bash
npm install @shironeko1052/autoimg-vue
```

## Usage

```vue
<template>
  <AutoImg
    src="https://example.com/image.jpg"
    width="400"
    height="300"
    focus="100,200;300,400"
    padding="10"
    placeholder="data:image/..."
    img-alt="Description"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
import { AutoImg } from '@shironeko1052/autoimg-vue';

const handleClick = () => {
  console.log('Clicked!');
};
</script>
```

For more details and examples, see the [main repository](https://github.com/shironeko1337/auto-img).
npm package: @shiroyasha9/axios-fetch-adapter
Description: Compatible with axios v1+ fetch adapter
Author: mubinansari910@gmail.com
Latest version: 1.0.3

# Why

I had been using [@vespaiach/axios-fetch-adapter](https://github.com/vespaiach/axios-fetch-adapter) for a while and it worked well. However, it's not maintained anymore and I needed it to be compatible with the latest version of Axios. So I decided to fork it and make it work with axios@1+.

Axios doesn't have an adapter for fetch API for now. So you can use this adapter for services that require fetch API (looking at you `contentful` 😒).

# Installation and Usage

You can install the adapter directly from this repository URL or feel free to copy its source code to your project. Can use npm/yarn/bun/whatever you like.

```sh
npm install axios
npm install @shiroyasha9/axios-fetch-adapter
```

There are two ways to use it:

1.  Create a new instance of Axios and pass this adapter in configuration

```js
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  adapter: fetchAdapter
  ....
});
```

2.  Pass this adapter in each of request

```js
axios.request({
  url: '/user',
  method: 'get',
  adapter: fetchAdapter
  ...
})
```

3.  Use with FormData

```js
axios.request({
  url: '/user',
  method: 'post',
  adapter: fetchAdapter
  data: new FormData(formId)
  ...
})
```

# Note

- Since, this adapter relies on fetch API so it won't work in Node environment
- Feel free to report any issues and I'll try to fix them!
npm package: @shirtiny/esbuild-plugin-svg-element
Description: esbuild-plugin-svg-element desc
Author: shirtiny
Latest version: 0.0.1

# ts-lib-template

> [Ts-lib-template](https://github.com/Shirtiny/ts-lib-template) A starter template for typescript library.

```shell
# init project
yarn
# build
yarn build

# tag and version
make version
# publish to npm
make publish

# dev
yarn start
```

## Introduction

This is a template for typescript library base on esbuild. This template includes followings:

- TypeScript

- Esbuild

- Makefile

- Dev server

- Env

- Prettier

- Eslint

- Jest

- Sass/scss & Autoprefixer

- Github action

## Usage

Create your repository by clicking 'Use this template' top of the page. Then, check the package.json file.

## Config

```js
// .sh.js
const { MY_ENV, PORT, NODE_ENV, npm_package_name } = process.env;

// the customized ENV， just pick what you need
const env = {
  MY_ENV,
  PORT,
  NODE_ENV,
  npm_package_name,
};

module.exports = {
  // your lib global name
  globalName: "tsLibTemplate",
  // the output prefix name， default is 'main', please check your package.json after this option changed.
  outputFileName: "main",
  // devServer option
  devServer: {
    host: HOST || "localhost",
    port: PORT || 2021,
    proxy: {
      "^/api": {
        target: "http://192.168.0.123:1234",
        pathRewrite: { "^/api": "" },
      },
    },
  },
  // jsx options direct set to esbuild
  jsxFactory: "React.createElement",
  jsxFragment: "React.Fragment",
  // if env is false, default is all process env
  env,
};
```

## Acknowledgment

[raulanatol / template-ts-package](https://github.com/raulanatol/template-ts-package)

## License

The MIT License (MIT)
npm package: @shirtiny/logger_ts
Description: TS console logger
Author: shirtiny
Latest version: 1.0.10

<!--
 * @Author: Shirtiny
 * @Date: 2021-06-11 10:01:14
 * @LastEditTime: 2021-06-18 21:31:33
 * @Description:
-->

# logger_ts

[关于CRLF](https://segmentfault.com/a/1190000021803437)
npm package: @shirtiny/mira
Description: mira desc
Author: shirtiny
Latest version: 0.0.3

# ts-lib-template

> A starter template for typescript library.

```shell
# init project
yarn
# build
yarn build

# tag and version
make version
# publish to npm
make publish

# dev
yarn start
```

## Introduction

This is a template for typescript library base on esbuild. This template includes followings:

- TypeScript

- Esbuild

- Makefile

- Dev server

- Env

- Prettier

- Eslint

- Jest

- Sass/scss & Autoprefixer

- Github action

## Usage

Create your repository by clicking 'Use this template' top of the page.

## Config

```js
// .sh.js
module.exports = {
  // your lib global name
  globalName: "tsLibTemplate",
  // devServer option
  devServer: {
    host: "localhost",
    port: 2021,
    proxy: {
      "^/api": {
        target: "http://192.168.6.111:9780",
        pathRewrite: { "^/api": "" },
      },
    },
  },
};
```

## Acknowledgment

[raulanatol / template-ts-package](https://github.com/raulanatol/template-ts-package)

## License

The MIT License (MIT)
npm package: @shirtiny/ts-lib-template
Description: ts-lib-template desc
Author: shirtiny
Latest version: 1.4.17

# ts-lib-template

> [Ts-lib-template](https://github.com/Shirtiny/ts-lib-template) A starter template for typescript library.

```shell
# init project
yarn
# build
yarn build

# tag and version
make version
# publish to npm
make publish

# dev
yarn start
```

## Introduction

This is a template for typescript library base on esbuild. This template includes followings:

- TypeScript

- Esbuild

- Makefile

- Dev server

- Env

- Prettier

- Eslint

- Jest

- Sass/scss & Autoprefixer

- Github action

## Usage

Create your repository by clicking 'Use this template' top of the page. Then, check the package.json file.

## Config

```js
// .sh.js
const { MY_ENV, PORT, NODE_ENV, npm_package_name } = process.env;

// the customized ENV， just pick what you need
const env = {
  MY_ENV,
  PORT,
  NODE_ENV,
  npm_package_name,
};

module.exports = {
  // your lib global name
  globalName: "tsLibTemplate",
  // the output prefix name， default is 'main', please check your package.json after this option changed.
  outputFileName: "main",
  // devServer option
  devServer: {
    host: HOST || "localhost",
    port: PORT || 2021,
    proxy: {
      "^/api": {
        target: "http://192.168.0.123:1234",
        pathRewrite: { "^/api": "" },
      },
    },
  },
  // jsx options direct set to esbuild
  jsxFactory: "React.createElement",
  jsxFragment: "React.Fragment",
  // if env is false, default is all process env
  env,
};
```

## Acknowledgment

[raulanatol / template-ts-package](https://github.com/raulanatol/template-ts-package)

## License

The MIT License (MIT)
npm package: @shirtiny/utils
Description: utils desc
Author: shirtiny
Latest version: 3.4.4

# ts-lib-template

> A starter template for typescript library.

```shell
# init project
yarn
# build
yarn build

# tag and version
make version
# publish to npm
make publish

# dev
yarn start
```

## Introduction

This is a template for typescript library base on esbuild. This template includes followings:

- TypeScript

- Esbuild

- Makefile

- Dev server

- Env

- Prettier

- Eslint

- Jest

- Sass/scss & Autoprefixer

- Github action

## Usage

Create your repository by clicking 'Use this template' top of the page.

## Config

```js
// .sh.js
module.exports = {
  // your lib global name
  globalName: "tsLibTemplate",
  // the output prefix name， default is 'main', please check your package.json after this option changed.
  outputFileName: "main",
  // devServer option
  devServer: {
    host: "localhost",
    port: 2021,
    proxy: {
      "^/api": {
        target: "http://192.168.6.111:9780",
        pathRewrite: { "^/api": "" },
      },
    },
  },
  // jsx options direct set to esbuild
  jsxFactory: "React.createElement",
  jsxFragment: "React.Fragment",
};
```

## Acknowledgment

[raulanatol / template-ts-package](https://github.com/raulanatol/template-ts-package)

## License

The MIT License (MIT)