@opentiny/vue-search-box 0.0.2 → 0.1.1-alpha.1

package/README.md

@@ -1,30 +1,39 @@
-# TinySearchBox comprehensive search
+# TinySearchBox
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+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, time, time range and so on.
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
+English | [简体中文](README.zh-CN.md)
 
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
+## Advantages
 
-TinySearchBox is a powerful and easy-to-use comprehensive search component developed based on tiny Vue. Support multiple criteria filtering such as single choice, multiple choice, time, and time interval.
+TinySearchBox has the following advantages:
 
-[English](README.md) | 简体中文
+- 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, time, time interval, number size, and number interval
+- Powerful search functions, supporting fuzzy search, custom search, etc.
 
-## Project advantages
+![TinySearchBox](TinySearchBox.png)
 
-TinySearchBox has the following characteristics and advantages:
+## Quick Start
 
--Contains multiple types of conditional filtering, ready to use out of the box.
--Powerful search function, supporting fuzzy search, single choice, multiple choice, time, time interval, number size, number interval, as well as custom search, etc.
-
-## quick start
-
-install TinySearchBox
+Install TinySearchBox:
 
 ```shell
 npm i @opentiny/vue-search-box
 ```
 
+Import TinySearchBox:
+
+```javascript
+import TinySearchBox from '@opentiny/vue-search-box';
+```
+
+Import styles:
+
+```css
+@import '@opentiny/vue-search-box/index.css';
+```
+
 html：
 
 ```html
@@ -81,19 +90,7 @@ html：
 </template>
 ```
 
-import styles:
-
-```css
-@import '@opentiny/vue-search-box/index.css';
-```
-
-Initialize TinySearchBox:
-
-```javascript
-import TinySearchBox from '@opentiny/vue-search-box';
-```
-
-## Local development
+## Development
 
 ```shell
 git clone git@github.com:opentiny/tiny-search-box.git
@@ -102,7 +99,7 @@ pnpm i
 pnpm dev
 ```
 
-Open a browser to access：[http://localhost:5173/](http://localhost:5173/)
+Open a browser to access：[http://localhost:5173/tiny-search-box/](http://localhost:5173/tiny-search-box/)
 
 ## License
 

package/README.zh-CN.md

@@ -0,0 +1,107 @@
+# TinySearchBox 综合搜索组件
+
+TinySearchBox 是一个基于 Vue3 的综合搜索组件，使用 TinyVue 组件库，遵循 OpenTiny 设计规范，简单易用、功能强大，支持单选、多选、时间、时间区间等多条件筛选。
+
+[English](README.md) | 简体中文
+
+## 项目优势
+
+TinySearchBox 主要有以下特点和优势：
+
+- 将筛选条件聚拢在一个输入框中，筛选效率更高、用户体验更好
+- 支持单选、多选、时间、时间区间、数字大小、数字区间等多种类型条件筛选
+- 强大的搜索功能，支持模糊搜索、自定义搜索等
+
+![TinySearchBox](TinySearchBox.png)
+
+## 快速上手
+
+安装 TinySearchBox
+
+```shell
+npm i @opentiny/vue-search-box
+```
+```
+
+导入 TinySearchBox 综合搜索：
+
+```javascript
+import TinySearchBox from '@opentiny/vue-search-box';
+```
+
+引入样式：
+
+```css
+@import '@opentiny/vue-search-box/index.css';
+```
+
+在模板中使用：
+
+```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>
+  <tiny-search-box v-model="tags" :items="items"></tiny-search-box>
+</template>
+```
+
+## 本地开发
+
+```shell
+git clone git@github.com:opentiny/tiny-search-box.git
+cd tiny-search-box
+pnpm i
+pnpm dev
+```
+
+打开浏览器访问：[http://localhost:5173/tiny-search-box/](http://localhost:5173/tiny-search-box/)
+
+## License
+
+[MIT](LICENSE)

package/{es → dist/es}/index.es.js

@@ -1,4 +1,6 @@
 import "./index.vue.es.js";
+import { zhCN } from "./utils/zh_CN.es.js";
+import { enUS } from "./utils/en_US.es.js";
 /* empty css              */
 import "./index.type.es.js";
 import _sfc_main from "./index.vue.es2.js";
@@ -6,5 +8,7 @@ _sfc_main.install = function(app) {
   app.component(_sfc_main.name, _sfc_main);
 };
 export {
-  _sfc_main as default
+  _sfc_main as default,
+  enUS,
+  zhCN
 };

package/{es → dist/es}/index.vue.es2.js

@@ -15,7 +15,7 @@ import TinyPopover from "@opentiny/vue-popover";
 import TinySelect from "@opentiny/vue-select";
 import TinyOption from "@opentiny/vue-option";
 import { iconSearch, iconClose, iconHelpQuery } from "@opentiny/vue-icon";
-import locale, { t } from "@opentiny/vue-locale";
+import { t } from "@opentiny/vue-locale";
 import { useTag } from "./composables/use-tag.es.js";
 import { useDropdown } from "./composables/use-dropdown.es.js";
 import { useMatch } from "./composables/use-match.es.js";
@@ -30,9 +30,6 @@ import { showPopover, showDropdown } from "./utils/dropdown.es.js";
 /* empty css              */
 import { deepClone } from "./utils/clone.es.js";
 import { format } from "./utils/date.es.js";
-import { zhCN } from "./utils/zh_CN.es.js";
-import { enUS } from "./utils/en_US.es.js";
-import { createI18n } from "vue-i18n";
 const _hoisted_1 = { class: "tvp-search-box__tag-value" };
 const _hoisted_2 = {
   key: 0,
@@ -223,14 +220,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "first-level-select"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
-    locale.initI18n({
-      i18n: "zhCN",
-      createI18n,
-      messages: {
-        zhCN: { ...zhCN },
-        enUS: { ...enUS }
-      }
-    });
     const props = __props;
     const emits = __emit;
     const state = reactive({

package/{lib → dist/lib}/index.cjs.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 require("./index.vue.cjs.js");
+const zh_CN = require("./utils/zh_CN.cjs.js");
+const en_US = require("./utils/en_US.cjs.js");
 ;/* empty css                */
 require("./index.type.cjs.js");
 const index_vue_vue_type_script_setup_true_lang = require("./index.vue.cjs2.js");
 index_vue_vue_type_script_setup_true_lang.default.install = function(app) {
   app.component(index_vue_vue_type_script_setup_true_lang.default.name, index_vue_vue_type_script_setup_true_lang.default);
 };
+exports.zhCN = zh_CN.zhCN;
+exports.enUS = en_US.enUS;
 exports.default = index_vue_vue_type_script_setup_true_lang.default;