# tino-design-ui

> Tino Design UI: A Vue.js 3 UI Library

Latest version **0.2.10** (published 2023-12-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install tino-design-ui
pnpm add tino-design-ui
yarn add tino-design-ui
bun add tino-design-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.10 |
| Published | 2023-12-09 |
| First published | 2023-11-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 218.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 冯子健 |
| Maintainers | jaques-tino |
| Keywords | tino-design-ui, ui |

## Links

- npm: https://www.npmjs.com/package/tino-design-ui
- Repository: https://github.com/jaques-tino/tino-design-ui
- Homepage: https://github.com/jaques-tino/tino-design-ui#readme
- Issues: https://github.com/jaques-tino/tino-design-ui/issues
- npm.io page: https://npm.io/package/tino-design-ui

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.2.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.2.10 (latest) — 2023-12-09
- 0.2.9 — 2023-12-09
- 0.2.8 — 2023-12-06
- 0.2.7 — 2023-11-29
- 0.2.6 — 2023-11-29
- 0.2.5 — 2023-11-23
- 0.2.4 — 2023-11-16
- 0.2.3 — 2023-11-16
- 0.2.2 — 2023-11-16
- 0.2.1 — 2023-11-16
- 0.2.0 — 2023-11-14
- 0.1.15 — 2023-11-13
- 0.1.14 — 2023-11-10
- 0.1.13 — 2023-11-10
- 0.1.12 — 2023-11-10
- … 29 more at https://npm.io/package/tino-design-ui/versions

## README

# Tino-Design-UI

这是一个vue3的UI框架，官网在努力制作中。

目前，已经上线的组件已经有四个：`Space`、`AdaptiveInput`、`AdaptiveTextarea`、`Upload`。
官方文档暂定：[文档链接](https://design.pengjianst.com)，目前此文档仅支持可以适配ipv6的设备使用。

### 一、安装
```bash
# npm
npm install tino-design-ui

# yarn
yarn add tino-design-ui
```

### 二、使用
```js
// 加载所有组件
import UiComponents from 'tino-design-ui'
app.use(UiComponents)

// 按需加载 【推荐】
import { Upload } from 'tino-design-ui'
app.component(Upload.name, Upload)
```

### 三、版本更新内容

#### v0.2.1
`Upload` 完整版上传控件正式上线

1、基本使用

```vue
<script lang="ts" setup>
import { Upload as TUpload } from 'tino-design-ui'
</script>

<template>
  <t-upload :files="[]" url="http://localhost:3000/upload" />
</template>
```

2、自定义上传
```vue
<script lang="ts" setup>
import axios from 'axios'
import { Upload as TUpload } from 'tino-design-ui'

const customRequest = async (options: UploadRequestOptions) => {
  const { name, file, progressEvent, successEvent, errorEvent } = options

  const formData = new FormData()
  formData.append(name, file)
  try {
    const response = await axios.post('http://localhost/upload', formData, { onUploadProgress: (event) => progressEvent(event as any) })
    successEvent(response.data)
  } catch (err) {
    errorEvent({ status: (err as any).response.status, errmsg: (err as any).response.statusText })
  }
}

</script>

<template>
  <t-upload
    :files="[]"
    :customRequest="customRequest"
  />
</template>
```

3、手动上传
```vue
<script lang="ts" setup>
import { ref } from 'vue'

const Upload = ref()
</script>

<template>
  <t-upload
    :files="[]"
    :auto-upload="false"
    ref="Upload"
    url="http://localhost:3000/upload"
  />
  <button @click="Upload!.upload()">点击上传</button>
</template>
```

4、更多api
```ts
export interface Upload {
  /**
   * 自定义类名前缀
   */
  customClassPrefix?: string
  /**
   * 限制上传的文件数量
   */
  limit?: number
  /**
   * 上传之前的钩子函数
   */
  beforeUpload?: (files: FileList) => boolean
  /**
   * 上传地址
   */
  url?: string
  /**
   * 自定义上传
   */
  customRequest?: (options: UploadRequestOptions) => { abort: () => void }
  /**
   * 文件列表
   */
  files: UploadFile[]
  /**
   * 上传的字段名
   */
  name?: string
  /**
   * 上传按钮以何种形式展示
   */
  type?: 'button' | 'card'
  /**
   * 限制上传的文件格式
   */
   accept?: string
   /**
    * 是否允许拖拽上传，仅在type值为card时有效
    */
   draggable?: boolean
   /**
   * 是否显示文件列表
   */
  showFileList?: boolean
  /**
   * 是否在文件准备就绪后立即上传
   */
   autoUpload?: boolean
   /**
    * 上传按钮文本，仅type类型为button生效
    */
  btnText?: string
  /**
   * 卡片面板提示词，仅type类型为card生效
   */
  cardDescription?: string
}
```

---
_Source: https://npm.io/package/tino-design-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._