open-index/open-npm huggingface dataset:
npm package: @lil-el/vue3-number-scroller
Description: A Vue 3 component for scrolling numbers with customizable options.
Author: Mino
Latest version: 0.0.1

# @lil-el/vue3-number-scroller

数字滚动组件

![npm version](https://img.shields.io/npm/v/@lil-el/vue3-number-scroller?color=green) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

---

## export

```ts
Vue3NumberScroller.install = () => {};

export default Vue3NumberScroller;

export Vue3NumberScroller;
```

## install

```bash
pnpm i @lil-el/vue3-number-scroller
```

## usage

### basic

**main.ts**

```ts
import "@lil-el/vue3-number-scroller/css";
import Vue3NumberScroller from "@lil-el/vue3-number-scroller";

// ...

// 全局注册
createApp(App).use(Vue3NumberScroller).mount("#app");
```

**vue**

```html
<template>
  <h2>Number</h2>
  <vue3-number-scroller :num="value" />
  <el-input v-model="value" />

  <h2>String</h2>
  <vue3-number-scroller :num="'0097.11'" />
</template>

<script setup>
  // 局部注册
  // import { Vue3NumberScroller } from "@lil-el/vue3-number-scroller";

  const value = ref(0);
</script>
```

### custom

```html
<template>
  <vue3-number-scroller :num="value" :duration="1200" :height="32" :back-style="style" />
  <el-input v-model="value" />
</template>

<script setup>
  import { Vue3NumberScroller } from "@lil-el/vue3-number-scroller";

  const value = ref(0);

  const style = {
    width: "20px",
    color: "white",
    fontSize: "20px",
    backgroundColor: "white",
    borderRight: "1px solid white",
  };
</script>
```

## props

| name      | type             | default | description  |
| --------- | ---------------- | ------- | ------------ |
| num       | number \| string | 0       | 数字         |
| duration  | number           | 1000    | 滚动时长     |
| height    | number           | 16      | 高度、行高   |
| backStyle | CSSProperties    | { }     | 单个数字样式 |
npm package: @lil-icons/react
Description: SVG icons components for React
Author: Anton Svetenkov
Latest version: 1.0.1
Deprecated: owner

# lil-icons

[Demo](https://extenss.github.io/lil-icons-gh/)

### Installation

```sh
npm install @lil-icons/react
```

or

```sh
yarn add @lil-icons/react
```

### Usage

Use icon as a common component:

```js
import { IconSuccess } from '@lil-icons/react';

const MyComponent = () => (
  <div>
    <IconSuccess />
  </div>
);
```

You can use LilIconsContext to declare props once in the root component, they will be passed down to all the icons. It uses Context API:

```js
import { LilIconsContext, IconSuccess } from '@lil-icons/react';

const App = () => (
  <div>
    <LilIconsContext.Provider value={{ color: 'green', width: 64, height: 64 }}>
      <IconSuccess /> // green 64x64
    </LilIconsContext.Provider>
  </div>
);
```

Icon props have a higher priority than provider props:

```js
<LilIconsContext.Provider value={{ color: 'green' }}>
  <IconSuccess color="red" /> // red
</LilIconsContext.Provider>
```

You can get props from context in your custom components using withLilIconsContext:

```js
import { withLilIconsContext } from '@lil-icons/react';

const SomeIcon = ({ width, height, color }) => (
  <svg width={width} height={height} color={color}>
    ...
  </svg>
);

const MyCustomIcon = withLilIconsContext(SomeIcon);
```

### Props

| Prop   | Type             | Required |
| :----- | :--------------- | :------: |
| color  | String           |    No    |
| width  | String or Number |    No    |
| height | String or Number |    No    |
npm package: @lil-icons/svelte
Description: SVG icons components for Svelte
Author: Anton Svetenkov
Latest version: 1.0.1
Deprecated: owner

# lil-icons

[Demo](https://extenss.github.io/lil-icons-gh/)

### Installation

```sh
npm install @lil-icons/svelte
```

or

```sh
yarn add @lil-icons/svelte
```

### Usage

1. Wrap your app in LilIconsContext:

```js
<script>
    import { LilIconsContext } from '@lil-icons/svelte';
</script>

<LilIconsContext>
    ...
</LilIconsContext>
```

2. Use icon as a common component:

```js
<script>
    import { IconSuccess } from '@lil-icons/svelte';
</script>

<div>
    <IconSuccess />
</div>
```

You can declare props once in LilIconsContext and they will be passed down to all the icons. It uses Context API:

```js
<LilIconsContext color="green" width="64" height="64">
  <IconSuccess /> // green 64x64
</LilIconsContext>
```

Icon props have a higher priority than context props:

```js
<LilIconsContext color="green">
  <IconSuccess color="red" /> // red
</LilIconsContext>
```

You can get values from context in your custom components:

```js
<script>
  import { getContext } from 'svelte';
  const { color, width, height } = getContext('lilIconsContext');
</script>

<svg color={color} width={width} height={height}>
    ...
</svg>
```

### Props

| Prop   | Type             | Required |
| :----- | :--------------- | :------: |
| color  | String           |    No    |
| width  | String or Number |    No    |
| height | String or Number |    No    |
npm package: @lil-icons/vue
Description: SVG icons components for Vue
Author: Anton Svetenkov
Latest version: 1.0.1
Deprecated: owner

# lil-icons

[Demo](https://extenss.github.io/lil-icons-gh/)

### Installation

```sh
npm install @lil-icons/vue
```

or

```sh
yarn add @lil-icons/vue
```

### Usage

1. Wrap your app in LilIconsProvider:

```js
<template>
  <div id="app">
    <LilIconsProvider>
        ...
    </LilIconsProvider>
  </div>
</template>

<script>
    import { LilIconsProvider } from '@lil-icons/vue';
    export default {
        name: 'app',
        components: {
            LilIconsProvider,
        },
    };
</script>
```

2. Use icon as a common component:

```js
<template>
    <div>
        <IconSuccess />
        ...
    </div>
</template>

<script>
    import { IconSuccess } from '@lil-icons/vue';
    export default {
        name: 'MyComponent',
        components: {
            IconSuccess,
        },
    };
</script>
```

You can declare props once in LilIconsProvider and they will be passed down to all the icons. It uses provide/inject API:

```js
<LilIconsProvider color="green" width={64} height={64}>
  <IconSuccess /> // green 64x64
</LilIconsProvider>
```

Icon props have a higher priority than provider props:

```js
<LilIconsProvider color="green">
  <IconSuccess color="red" /> // red
</LilIconsProvider>
```

You can inject values from provider in your custom components:

```js
<script>
  export default {
    name: 'MyCustomIcon',
    inject: ['lilIconsColor', 'lilIconsWidth', 'lilIconsHeight'],
  };
</script>
);
```

### Props

| Prop   | Type             | Required |
| :----- | :--------------- | :------: |
| color  | String           |    No    |
| width  | String or Number |    No    |
| height | String or Number |    No    |
npm package: @lil-lily/ui-database
Description: ### ※現在このパッケージは自分自身のみで使用することを想定しています。
Author: shimon
Latest version: 1.0.0

# @lil-shimon/ui-database

### ※現在このパッケージは自分自身のみで使用することを想定しています。


### インストール方法
```
npm i @lil-lily/ui-database
```

### npm Website
https://www.npmjs.com/package/@lil-lily/ui-database