open-index/open-npm huggingface dataset:
npm package: @ggc12319/datav-vue3
Description: Datav for vue3+vite
Latest version: 0.0.3

# DataV Vue3+TS+Vite版

[![Author](https://img.shields.io/badge/Author-kjgl77-red.svg "Author")](https://github.com/vaemusic "Author")       [![LICENSE](https://img.shields.io/github/license/vaemusic/datav-vue3 "LICENSE")](https://github.com/vaemusic/datav-vue3/blob/master/LICENSE "LICENSE")

[![NPM](https://nodei.co/npm/@kjgl77/datav-vue3.png?mini=true)](https://www.npmjs.com/package/@kjgl77/datav-vue3)

由于之前大佬写的 [DataV](http://datav.jiaminghi.com/) 不支持Vue3 Vite2.x，现部分代码用Vue3+TS重构。

[文档地址](https://datav-vue3.netlify.app)：https://datav-vue3.netlify.app

[Gitee地址](https://gitee.com/kjgl77/datav-vue3)：https://gitee.com/kjgl77/datav-vue3

[Github地址](https://github.com/vaemusic/datav-vue3)：https://github.com/vaemusic/datav-vue3

[Demo预览地址](https://datav-vue3-demo.netlify.app/)：https://datav-vue3-demo.netlify.app/

[Demo Gitee地址](https://gitee.com/kjgl77/electronic-file)：https://gitee.com/kjgl77/electronic-file

[Demo Github地址](https://github.com/vaemusic/electronic-file)：https://github.com/vaemusic/electronic-file

## 使用方法
- 安装，此处使用pnpm工具，也可以yarn,npm等
```shell
pnpm install @kjgl77/datav-vue3
```
### 全局引入

```ts
// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'

const app = createApp(App)

app.use(DataVVue3)
app.mount('#app')
```
引入后在.vue文件中可以直接使用
```html
<dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
```

### 局部引入
```html
<!-- 在.vue文件的script中import部分组件 -->
<script lang="ts" setup>
import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
</script>
<template>
  <!-- 引入之后就可以在vue的template中直接使用 -->
  <decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
  <decoration-2 :reverse="true" style="width:5px;height:150px;" />
</template>
```

新的组件库开发根据大佬的 [MY-Kit](https://github.com/jrainlau/MY-Kit) 开发。支持脚本生成基础文件，文档，可使用Markdown一边开发源码一边写文档。详情可见MY-Kit文档。
npm package: @ggc12319/react-scroll-number
Description: A react digital scroll up and down animation component
Latest version: 0.0.2

# react-scroll-number

A react digital scroll up and down animation component

## install

```sh
pnpm add @ggc12319/react-scroll-number
```

## Used in components

```js
import { useState } from "react";
import "./App.css";
import ScrollNumber from "@ggc12319/react-scroll-number";
import "@ggc12319/react-scroll-number/style.css";
function App() {
  const [count, setCount] = useState(4.4);
  const addCount = () => {
    setCount(count + 1.7);
  };

  const subtractCount = () => {
    setCount(count - 1.7);
  };
  return (
    <div className="card">
      <div>
        <ScrollNumber value={count} fractionDigits={1} />
      </div>
      <button onClick={addCount}>count is {count}</button>
      <button onClick={subtractCount}>count is {count}</button>
    </div>
  );
}

export default App;

```

## props

| Attribute         | Description                        | Type   | Default |
| ----------------- | ---------------------------------- | ------ | ------- |
| value             | figure                             | number | -       |
| transformDuration | transform duration                 | number | 1500    |
| fractionDigits    | fraction digits                    | number | 0       |
| prefix            | prefix                             | string | ''      |
| infix             | prefix but after the negative sign | string | ''      |
| suffix            | suffix                             | string | ''      |
| thousandSeparator | the thousand separator             | string | ,       |
npm package: @ggc12319/vue3-scroll-number
Description: A vue3 digital scroll up and down animation component
Latest version: 0.0.7

# vue3-scroll-number

A vue3 digital scroll up and down animation component

## install

```sh
pnpm add @ggc12319/vue3-scroll-number
```

### configuration

```js
import { createApp } from 'vue'
import App from './App.vue'
import ScrollNumber from '@ggc12319/vue3-scroll-number'
import '@ggc12319/vue3-scroll-number/style.css'

createApp(App)
  .use(ScrollNumber, {
    transformDuration: 1500,
    fractionDigits: 3,
    prefix: '^_^',
    infix: '$',
    suffix: '@_@',
    thousandSeparator: ','
  })
  .mount('#app')
```

### Used in components

```vue
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(-123.45)
const add = () => {
  value.value += 20
}
const sub = () => {
  value.value -= 20
}

const percentage = ref(24.8)
const addPercentage = () => {
  percentage.value += 2.4
}
const subPercentage = () => {
  percentage.value -= 2.4
}
</script>

<template>
  <div>
    <ScrollNumber :value="value" />
    <span style="margin-left: 50px">
      <button @click="add">add</button>
      <button @click="sub">sub</button>
    </span>
  </div>
  <div>
    <ScrollNumber :value="percentage" :fractionDigits="1" prefix="" infix="" suffix="%" />
    <span style="margin-left: 50px">
      <button @click="addPercentage">add</button>
      <button @click="subPercentage">sub</button>
    </span>
  </div>
</template>
```

## props

| Attribute         | Description                        | Type   | Default |
| ----------------- | ---------------------------------- | ------ | ------- |
| value             | figure                             | number | -       |
| transformDuration | transform duration                 | number | 1500    |
| fractionDigits    | fraction digits                    | number | 0       |
| prefix            | prefix                             | string | ''      |
| infix             | prefix but after the negative sign | string | ''      |
| suffix            | suffix                             | string | ''      |
| thousandSeparator | the thousand separator             | string | ,       |
npm package: @ggcode-cli/ggcode
Description: Thin npm wrapper that installs the ggcode GitHub Release binary
Latest version: 1.1.14

# @ggcode-cli/ggcode

`@ggcode-cli/ggcode` installs the native `ggcode` binary from GitHub Releases.

During package installation it downloads the matching release archive, verifies it, and places the
real `ggcode` executable in a stable CLI location:

- macOS / Linux: prefers `/usr/local/bin`, falls back to `~/.local/bin`
- Windows: prefers `%USERPROFILE%\\AppData\\Local\\Programs\\ggcode\\bin`, falls back to `%USERPROFILE%\\.local\\bin`

If that directory is not on `PATH`, the installer updates your shell/user PATH and asks you to
reopen the terminal. The npm package keeps a separate `ggcode-bootstrap` helper command for manual
repair, but normal usage should be the real `ggcode` binary.

This package is just the release-backed installer layer. Product usage, harness workflows, and TUI
behavior are documented in the main repository README.

## Install

For normal CLI usage, install it globally:

```bash
npm install -g @ggcode-cli/ggcode
```

Then run:

```bash
ggcode
```

If the native install needs to be retried manually, run:

```bash
ggcode-bootstrap
```

## What it does

- Detects your platform and architecture
- Downloads the latest matching `ggcode` binary from GitHub Releases
- Verifies the downloaded archive with `checksums.txt`
- Installs the real binary into a stable PATH location
- Updates `PATH` when needed so future `ggcode` launches bypass the wrapper

## Pin a specific ggcode release

By default, the wrapper always resolves the latest `ggcode` release.

If you need to pin a specific release, set `GGCODE_INSTALL_VERSION`:

```bash
GGCODE_INSTALL_VERSION=vX.Y.Z ggcode
```

or:

```bash
GGCODE_INSTALL_VERSION=X.Y.Z ggcode
```

## Supported platforms

- macOS
- Linux
- Windows

Supported architectures:

- x86_64 / amd64
- arm64

## Project links

- Repository: https://github.com/topcheer/ggcode
- Issues: https://github.com/topcheer/ggcode/issues