### Development Setup for TinySearchBox

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.md

These shell commands outline the steps to clone the TinySearchBox repository, install dependencies using pnpm, and start the development server.

```shell
git clone git@github.com:opentiny/tiny-search-box.git
cd tiny-search-box
pnpm i
pnpm dev
```

--------------------------------

### Local Development Setup

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.zh-CN.md

Provides commands to clone the repository, install dependencies, and start the local development server for TinySearchBox. This allows for testing and development of the component.

```shell
git clone git@github.com:opentiny/tiny-search-box.git
cd tiny-search-box
pnpm i
pnpm dev
```

--------------------------------

### Local Development Setup for TinySearchBox

Source: https://github.com/opentiny/tiny-search-box/blob/main/packages/docs/usage.md

Provides commands to clone the TinySearchBox repository, install dependencies using pnpm, and start the local development server.

```shell
git clone git@github.com:opentiny/tiny-search-box.git
cd tiny-search-box
pnpm i
pnpm dev
```

--------------------------------

### Install TinySearchBox Component

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.zh-CN.md

Installs the TinySearchBox component using npm. This is the first step to integrate the component into your Vue project.

```shell
npm i @opentiny/vue-search-box
```

--------------------------------

### Install TinySearchBox using npm

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.md

This command installs the TinySearchBox component from npm, making it available for use in your Vue3 project.

```shell
npm i @opentiny/vue-search-box
```

--------------------------------

### Install TinySearchBox using npm

Source: https://github.com/opentiny/tiny-search-box/blob/main/packages/docs/usage.md

Installs the TinySearchBox component package using npm. This is the first step to integrate the component into your Vue project.

```shell
npm i @opentiny/vue-search-box
```

--------------------------------

### Vue3 HTML Template with TinySearchBox

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.md

This HTML template shows a practical example of using the TinySearchBox component in a Vue3 application. It configures the component with various filter types, including text, checkbox, and number range, and binds it to a data model.

```html
<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>
```

--------------------------------

### Import TinySearchBox CSS

Source: https://github.com/opentiny/tiny-search-box/blob/main/packages/docs/usage.md

Imports the necessary CSS styles for the TinySearchBox component. Ensure this is imported to apply the correct styling.

```css
@import '@opentiny/vue-search-box/dist/index.css';
```

--------------------------------

### Import TinySearchBox and Styles

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.zh-CN.md

Imports the TinySearchBox component and its necessary CSS styles for use in a Vue application. Ensure these imports are done before using the component in your templates.

```javascript
import TinySearchBox from '@opentiny/vue-search-box';
@import '@opentiny/vue-search-box/dist/index.css';
```

--------------------------------

### Import TinySearchBox CSS

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.md

This CSS import statement includes the necessary styles for the TinySearchBox component to render correctly.

```css
@import '@opentiny/vue-search-box/dist/index.css';
```

--------------------------------

### Use TinySearchBox in Vue Template

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.zh-CN.md

Demonstrates how to use the TinySearchBox component within a Vue 3 template. It shows how to bind data using v-model and pass configuration options via the 'items' prop.

```javascript
import { ref } from 'vue';

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
  }
]);
```

```html
<template>
  <tiny-search-box v-model="tags" :items="items"></tiny-search-box>
</template>
```

--------------------------------

### Use TinySearchBox in Vue Template

Source: https://github.com/opentiny/tiny-search-box/blob/main/packages/docs/usage.md

Demonstrates how to use the TinySearchBox component within a Vue 3 template. It shows binding the component's value to a data property and passing configuration items.

```javascript
import { ref } from 'vue';

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>
  <tiny-search-box v-model="tags" :items="items"></tiny-search-box>
</template>
```

--------------------------------

### Import TinySearchBox in Vue3

Source: https://github.com/opentiny/tiny-search-box/blob/main/README.md

This JavaScript code demonstrates how to import the TinySearchBox component into your Vue3 application.

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

--------------------------------

### Define ISearchBoxItem Interface

Source: https://github.com/opentiny/tiny-search-box/blob/main/packages/docs/apis/types.md

Defines the structure for an individual item within the search box, specifying properties like field, label, type, options, and various configuration settings for different data types and behaviors.

```typescript
interface ISearchBoxItem {
  field: string; // 搜索标签的label
  label: string; // tag 键的显示值
  type?: ISearchBoxTagType; // tag类型
  options?: ISearchBoxOption[]; // 选项数据
  regexp?: RegExp; // 此标签项的正则匹配
  replace?: boolean; // 单选或多选设置
  optionValueKey?: string; // 选中项键值
  format?: string; // 日期类型显示格式
  start?: number | Date; // 最小值或开始日期
  end?: number | Date; // 最大值或结束日期
  min?: number | Date; // 用于校验的最小值
  max?: number | Date; // 用于校验的最大值
  placeholder?: string; // 占位文本
  editAttrDisabled: boolean; // 编辑状态此属性禁用状态，常用以设置不可变更
  searchKeys?: Array<string>; // 搜索的字段范围
  idMapKey?: string; // 标识字段映射
  operators?: Array<string>; // 分隔符数组
  mergeTag?: boolean; // type=checkbox时生效，设置是否合并成一个标签
  maxTimeLength?: number; // type=dateRange/datetimeRange时生效，设置用户只能选择某个时间跨度，只接受毫秒数
  slotName?: string; // type=custom时生效，用于指定二级面板的插槽名，对应的编辑态自定义面板插槽名为item.slotName + '-edit'
  groupKey?: string; // 自定义分组名，默认为：属性类型
  [propName: string]: any;
}

type ISearchBoxTagType =
  | 'radio'
  | 'noValue'
  | 'checkbox'
  | 'map'
  | 'numRange'
  | 'dateRange'
  | 'dateTimeRange'
  | 'custom'
```

--------------------------------

### Import TinySearchBox in Vue

Source: https://github.com/opentiny/tiny-search-box/blob/main/packages/docs/usage.md

Imports the TinySearchBox component into your Vue JavaScript file. This makes the component available for use in your templates.

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

--------------------------------

### Define ISearchBoxMatchItem Interface

Source: https://github.com/opentiny/tiny-search-box/blob/main/packages/docs/apis/types.md

Defines the structure for an item that matches a search query, containing its label, field, value, and type.

```javascript
interface ISearchBoxMatchItem {
  label: string;
  field: string;
  value: string;
  type?: string;
}
```

--------------------------------

### Define ISearchBoxTag Interface

Source: https://github.com/opentiny/tiny-search-box/blob/main/packages/docs/apis/types.md

Defines the structure for a tag displayed in the search box, including its field, label, value, type, and optional start/end values for range types.

```javascript
interface ISearchBoxTag {
  field: string;
  label: string;
  value: string;
  type: ISearchBoxTagType;
  start?: number | string;
  end?: number | string;
  operator?: string; // 分隔符[3.14.0新增]
  [propName: string]: any;
}

type ISearchBoxTagType = 'radio' | 'noValue' | 'checkbox' | 'map' | 'numRange' | 'dateRange' | 'dateTimeRange'
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.