TinySearchBox

TinySearchBox is a comprehensive search component based on Vue3. It uses the TinyVue component library and follows the OpenTiny design specifications. It is easy to use and powerful. It supports single selection, multiple selection, no value, date range, datetime range, number range, key-value, custom types and more.

English | 简体中文

Advantages

TinySearchBox has the following advantages:

• Gather the filtering criteria into one input box for higher filtering efficiency and a better user experience
• Supports multiple types of conditional filtering such as single selection, multiple selection, date range, datetime range, number range, key-value, custom, and more
• Powerful search functions, supporting fuzzy search, custom search, etc.

Quick Start

Install TinySearchBox:

npm i @opentiny/vue-search-box

Import TinySearchBox:

import TinySearchBox from '@opentiny/vue-search-box';

Styles are built-in and automatically loaded when you import the component. No need to manually import styles.

Usage:

<script setup>
  const tags = ref([]);
  const items = ref([
    {
      label: '名称',
      field: 'testName',
      replace: true,
      placeholder: '我是自定义名称的占位符',
      options: [
        {
          label: 'test-1'
        },
        {
          label: 'test-2'
        }
      ]
    },
    {
      label: '可用地区',
      field: 'testRegion',
      type: 'checkbox',
      mergeTag: true,
      placeholder: '我是自定义可选地区的占位符',
      editAttrDisabled: true, // 编辑状态此属性禁用，不可变更
      options: [
        {
          label: '华南区',
          id: '2-1'
        },
        {
          label: '华北区',
          id: '2-2'
        }
      ]
    },
    {
      label: '大小',
      field: 'size',
      type: 'numRange',
      placeholder: '我是自定义大小的占位符',
      unit: 'GB',
      start: -1,
      min: -1,
      max: 20
    }
  ]);
</script>

<template>
  <TinySearchBox v-model="tags" :items="items"></TinySearchBox>
</template>

Development

git clone git@github.com:opentiny/tiny-search-box.git
cd tiny-search-box
pnpm install:all
pnpm dev

Open a browser to access：http://localhost:5173/tiny-search-box/

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):

chenxi-20 💻

Kagol 💻

ajaxzheng 💻

liukun 💻

LiangGuanhui 💻

murphy 💻

This project follows the all-contributors specification. Contributions of any kind welcome!