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

package/README.md

@@ -1,106 +1 @@
-# 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, time, time range and so on.
-
-English | [简体中文](README.zh-CN.md)
-
-## 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, time, time interval, number size, and number interval
-- Powerful search functions, supporting fuzzy search, custom search, etc.
-
-![TinySearchBox](TinySearchBox.png)
-
-## Quick Start
-
-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
-<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
-
-```shell
-git clone git@github.com:opentiny/tiny-search-box.git
-cd tiny-search-box
-pnpm i
-pnpm dev
-```
-
-Open a browser to access：[http://localhost:5173/tiny-search-box/](http://localhost:5173/tiny-search-box/)
-
-## License
-
-[MIT](LICENSE)
+# SearchBox 综合搜索组件

package/dist/es/index.es.js

@@ -1,14 +1,22 @@
 import "./index.vue.es.js";
-import { zhCN } from "./utils/zh_CN.es.js";
-import { enUS } from "./utils/en_US.es.js";
+import zhCN from "./utils/zh_CN.es.js";
+import { default as default2 } from "./utils/en_US.es.js";
 /* empty css              */
 import "./index.type.es.js";
 import _sfc_main from "./index.vue.es2.js";
+let apps;
 _sfc_main.install = function(app) {
+  apps = app;
   app.component(_sfc_main.name, _sfc_main);
 };
+const t = (key) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const array = key.split(".");
+  return ((_b = (_a = apps == null ? void 0 : apps.config) == null ? void 0 : _a.globalProperties) == null ? void 0 : _b.$t) ? (_d = (_c = apps == null ? void 0 : apps.config) == null ? void 0 : _c.globalProperties) == null ? void 0 : _d.$t(key) : (_g = (_f = (_e = zhCN) == null ? void 0 : _e[array == null ? void 0 : array[0]]) == null ? void 0 : _f[array == null ? void 0 : array[1]]) == null ? void 0 : _g[array == null ? void 0 : array[2]];
+};
 export {
   _sfc_main as default,
-  enUS,
+  default2 as enUS,
+  t,
   zhCN
 };

package/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 { t } from "@opentiny/vue-locale";
+import { t } from "./index.es.js";
 import { useTag } from "./composables/use-tag.es.js";
 import { useDropdown } from "./composables/use-dropdown.es.js";
 import { useMatch } from "./composables/use-match.es.js";
@@ -166,7 +166,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     },
     emptyPlaceholder: {
       type: String,
-      default: t("tvp.tvpSearchbox.defaultPlaceholder")
+      default: ""
     },
     potentialOptions: {
       type: Object,
@@ -212,13 +212,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       default: true
     }
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "search",
-    "exceed",
-    "first-level-select"
-  ],
+  emits: ["update:modelValue", "change", "search", "exceed", "first-level-select"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
@@ -329,13 +323,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits
     });
     const { handleConfirm, handleEditConfirm } = useCustom({ state, emits });
-    const {
-      initItems,
-      watchOutsideClick,
-      watchMouseDown,
-      watchMouseMove,
-      handleClick
-    } = useInit({
+    const { initItems, watchOutsideClick, watchMouseDown, watchMouseMove, handleClick } = useInit({
       props,
       state
     });
@@ -382,7 +370,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           });
           showPopover(state, false);
           if (newVal.length === 0) {
-            setPlaceholder(props.emptyPlaceholder);
+            setPlaceholder(props.emptyPlaceholder || t("tvp.tvpSearchbox.defaultPlaceholder"));
           }
           if (props.editable && !state.inputEditValue.length && newVal[0]) {
             state.inputEditValue = newVal[0].value;
@@ -418,10 +406,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return openBlock(), createBlock(unref(TinyTag), {
             key: tag.field + index,
             closable: "",
-            class: normalizeClass([
-              "tvp-search-box__tag",
-              __props.editable && tag.type !== "map" ? "tvp-search-box__tag-editor" : ""
-            ]),
+            class: normalizeClass(["tvp-search-box__tag", __props.editable && tag.type !== "map" ? "tvp-search-box__tag-editor" : ""]),
             title: `${tag.label} ${tag.operator || ":"} ${tag.value}`,
             onClose: ($event) => unref(deleteTag)(tag),
             onClick: withModifiers(($event) => unref(editTag)(tag, index, $event), ["stop"])
@@ -498,9 +483,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 }), 128))
                               ], 64)) : createCommentVNode("", true),
                               value["attrValue"].length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                                createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("tvp.tvpSearchbox.propertyValue", [
-                                  key === "0" ? unref(t)("tvp.tvpSearchbox.attributeType") : key
-                                ])), 1),
+                                createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("tvp.tvpSearchbox.propertyValue", [key === "0" ? unref(t)("tvp.tvpSearchbox.attributeType") : key])), 1),
                                 (openBlock(true), createElementBlock(Fragment, null, renderList(value["attrValue"], (item, index) => {
                                   return openBlock(), createBlock(unref(TinyDropdownItem), {
                                     key: item.label + index,
@@ -554,10 +537,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             [vShow, props.potentialOptions]
                           ])
                         ], 512), [
-                          [
-                            vShow,
-                            state.isResetFlag && !state.propItem.label && state.inputValue.trim()
-                          ]
+                          [vShow, state.isResetFlag && !state.propItem.label && state.inputValue.trim()]
                         ]),
                         withDirectives(createElementVNode("div", _hoisted_14, [
                           (openBlock(true), createElementBlock(Fragment, null, renderList(state.groupItems, (group, key) => {
@@ -580,10 +560,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             ], 64);
                           }), 128))
                         ], 512), [
-                          [
-                            vShow,
-                            state.isResetFlag && !state.propItem.label && !state.inputValue.trim()
-                          ]
+                          [vShow, state.isResetFlag && !state.propItem.label && !state.inputValue.trim()]
                         ]),
                         withDirectives(createElementVNode("div", null, [
                           ((_a = state.currentOperators) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_17, [
@@ -1025,10 +1002,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               label: unref(t)("tvp.tvpSearchbox.allProperty"),
                               value: state.allTypeAttri.label,
                               disabled: unref(selectItemIsDisable)(state.allTypeAttri),
-                              onClick: _cache[21] || (_cache[21] = ($event) => unref(selectPropChange)(
-                                state.allTypeAttri,
-                                unref(selectItemIsDisable)(state.allTypeAttri)
-                              ))
+                              onClick: _cache[21] || (_cache[21] = ($event) => unref(selectPropChange)(state.allTypeAttri, unref(selectItemIsDisable)(state.allTypeAttri)))
                             }, null, 8, ["label", "value", "disabled"])),
                             (openBlock(true), createElementBlock(Fragment, null, renderList(state.recordItems, (item) => {
                               return openBlock(), createBlock(unref(TinyOption), {
@@ -1070,12 +1044,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       _: 1
                     })) : createCommentVNode("", true),
                     state.prevItem.type !== "numRange" ? (openBlock(), createElementBlock("div", _hoisted_51, toDisplayString(unref(t)("tvp.tvpSearchbox.tagValue")), 1)) : createCommentVNode("", true),
-                    ![
-                      "numRange",
-                      "dateRange",
-                      "datetimeRange",
-                      "custom"
-                    ].includes(state.prevItem.type) ? (openBlock(), createBlock(unref(TinyFormItem), {
+                    !["numRange", "dateRange", "datetimeRange", "custom"].includes(state.prevItem.type) ? (openBlock(), createBlock(unref(TinyFormItem), {
                       key: 3,
                       prop: "inputEditValue",
                       class: "tvp-search-box__number-item"

package/dist/es/utils/en_US.es.js

@@ -1,44 +1,44 @@
-const enUS = {
+const en_US = {
   tvp: {
     tvpSearchbox: {
-      defaultPlaceholder: "请选择属性筛选，或输入关键字",
-      addPlaceholder: "添加筛选条件",
-      tagPlaceholder: "请选择标签键/值搜索，或输入“键=值”搜索",
-      dynamicPlaceholder: "请选择{newValue}搜索",
-      attributeType: "属性类型",
-      propertyValue: "{0}的值",
-      matched: "潜在匹配项",
-      allValues: "所有值",
-      allProperty: "全部属性",
-      operator: "运算符",
-      clearAll: "清空",
-      emptyValue: "空 值",
-      help: "点击查看帮助",
-      switchText: "切换到默认搜索项",
-      tagKey: "键",
-      tagValue: "值",
-      minValueText: "最小值",
-      maxValueText: "最大值",
-      rangeMinErr: "输入值必须在{0}~{1}之间",
-      rangeMaxErr: "最大值必须大于等于最小值，或者为空",
-      rangeNumberTitle: "请至少输入一个值",
-      rangeDateTitle: "请至少输入一个日期",
-      timeLengthTitle: "可选时间跨度为{value}天内",
-      rangeBeginLabel: "开始日期",
-      rangeEndLabel: "结束日期",
-      rulekeyword1: "关键字",
-      notBeNull: "值不能为空",
-      noData: "暂无匹配数据...",
-      selectAll: "全选",
-      confirm: "确定",
-      cancel: "取消",
-      equal: "等于",
-      notEqual: "不等于",
-      contain: "包含",
-      notContain: "不包含"
+      defaultPlaceholder: "Select attribute filtering or enter keywords",
+      addPlaceholder: "Add filtering criteria",
+      tagPlaceholder: 'Please select tag key/value search, or enter "key=value" to search',
+      dynamicPlaceholder: "Please select {newValue} to search",
+      attributeType: "Attribute Type",
+      propertyValue: "The value of {0}",
+      matched: "Potential matching items",
+      allValues: "All values",
+      allProperty: "All Properties",
+      operator: "Operator",
+      clearAll: "Clear",
+      emptyValue: "Empty value",
+      help: "Click to view help",
+      switchText: "Switch to default search terms",
+      tagKey: "Key",
+      tagValue: "Value",
+      minValueText: "Minimum value",
+      maxValueText: "Maximum value",
+      rangeMinErr: "The input value must be between {0} and {1}",
+      rangeMaxErr: "The maximum value must be greater than or equal to the minimum value, or empty",
+      rangeNumberTitle: "Please enter at least one value",
+      rangeDateTitle: "Please enter at least one date",
+      timeLengthTitle: "The optional time span is within {value} days",
+      rangeBeginLabel: "Start date",
+      rangeEndLabel: "End date",
+      rulekeyword1: "Keywords",
+      notBeNull: "The value cannot be empty",
+      noData: "There is currently no matching data available ..",
+      selectAll: "Select All",
+      confirm: "Confirm",
+      cancel: "Cancel",
+      equal: "Equal",
+      notEqual: "Not equal",
+      contain: "Contain",
+      notContain: "Does not contain"
     }
   }
 };
 export {
-  enUS
+  en_US as default
 };

package/dist/es/utils/zh_CN.es.js

@@ -40,5 +40,5 @@ const zhCN = {
   }
 };
 export {
-  zhCN
+  zhCN as default
 };

package/dist/lib/index.cjs.js

@@ -6,9 +6,17 @@ 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");
+let apps;
 index_vue_vue_type_script_setup_true_lang.default.install = function(app) {
+  apps = 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;
+const t = (key) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const array = key.split(".");
+  return ((_b = (_a = apps == null ? void 0 : apps.config) == null ? void 0 : _a.globalProperties) == null ? void 0 : _b.$t) ? (_d = (_c = apps == null ? void 0 : apps.config) == null ? void 0 : _c.globalProperties) == null ? void 0 : _d.$t(key) : (_g = (_f = (_e = zh_CN.default) == null ? void 0 : _e[array == null ? void 0 : array[0]]) == null ? void 0 : _f[array == null ? void 0 : array[1]]) == null ? void 0 : _g[array == null ? void 0 : array[2]];
+};
+exports.zhCN = zh_CN.default;
+exports.enUS = en_US.default;
 exports.default = index_vue_vue_type_script_setup_true_lang.default;
+exports.t = t;