@opentiny/vue-search-box 0.0.1

package/lib/utils/validate.cjs.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tag = require("./tag.cjs.js");
+const type = require("./type.cjs.js");
+const clone = require("./clone.cjs.js");
+const getVerifyTag = async (instance, state, props) => {
+  const { prevItem, inputEditValue } = state;
+  const { operators } = prevItem;
+  const rest = clone.omitObj(prevItem);
+  let newTag = null;
+  let isPass = true;
+  await instance.refs.formRef.validateField(["inputEditValue"], (errMsg) => {
+    if (errMsg) {
+      isPass = false;
+    }
+  });
+  if (isPass) {
+    let id = null;
+    const operator = state.operatorValue && operators ? { operator: state.operatorValue } : null;
+    let value = inputEditValue;
+    const otherAttr = {};
+    if (Array.isArray(inputEditValue)) {
+      otherAttr.options = [];
+      value = "";
+      inputEditValue.forEach((editValue) => {
+        const item = state.currentEditValue.find((item2) => item2.label === editValue);
+        const label = (item == null ? void 0 : item.label) || editValue;
+        value = !value ? label : `${value} | ${label}`;
+        if (item) {
+          const itemId = tag.getTagId(props, prevItem, item);
+          otherAttr.options.push({ label, ...itemId });
+        } else {
+          otherAttr.options.push({ label });
+        }
+      });
+    } else if (Array.isArray(state.currentEditValue)) {
+      const item = state.currentEditValue.find((item2) => item2.label === value);
+      id = tag.getTagId(props, prevItem, item);
+    }
+    newTag = tag.createNewTag({ ...rest, label: state.selectValue, ...operator, value, ...id, ...otherAttr });
+  }
+  return newTag;
+};
+const getVerifyNumTag = async (instance, state, props) => {
+  const { prevItem } = state;
+  const minNum = `min${prevItem.field}`;
+  const maxNum = `max${prevItem.field}`;
+  const start = state[minNum];
+  const end = state[maxNum];
+  const verifyProps = [minNum, maxNum];
+  let isPass = true;
+  let newTag = null;
+  await instance.refs.formRef.validateField(verifyProps, (errMsg) => {
+    if (errMsg) {
+      isPass = false;
+    }
+  });
+  if (isPass) {
+    const { field, label: prevLabel, unit, type: type2, operators } = prevItem;
+    const label = unit ? `${prevLabel}(${unit})` : prevLabel;
+    let value = "";
+    if (start && end) {
+      value = `${start}-${end}`;
+    } else {
+      value = start ? `≥${start}` : `≤${end}`;
+    }
+    const id = tag.getTagId(props, prevItem, prevItem);
+    const operator = state.operatorValue && operators ? { operator: state.operatorValue } : null;
+    newTag = tag.createNewTag({ type: type2, field, label, value, ...id, start, end, ...operator });
+  }
+  return newTag;
+};
+const getVerifyDateTag = async (instance, state, props, isDateTimeType) => {
+  const { prevItem, startDate, endDate, startDateTime, endDateTime } = state;
+  let start = null;
+  let end = null;
+  let isPass = true;
+  let newTag = null;
+  let verifyProps = null;
+  if (isDateTimeType) {
+    start = startDateTime;
+    end = endDateTime;
+    verifyProps = ["startDateTime", "endDateTime"];
+  } else {
+    start = startDate;
+    end = endDate;
+    verifyProps = ["startDate", "endDate"];
+  }
+  await instance.refs.formRef.validateField(verifyProps, (errMsg) => {
+    if (errMsg) {
+      isPass = false;
+    }
+  });
+  if (isPass) {
+    const { field, label, type: type2, operators } = prevItem;
+    let value = "";
+    if (start && end) {
+      if (start > end) {
+        return;
+      } else if (start === end) {
+        value = start;
+      } else {
+        value = `${start}-${end}`;
+      }
+    } else {
+      value = start ? `≥${start}` : `≤${end}`;
+    }
+    const id = tag.getTagId(props, prevItem, prevItem);
+    const operator = state.operatorValue && operators ? { operator: state.operatorValue } : null;
+    newTag = tag.createNewTag({ type: type2, field, label, value, start, end, ...id, ...operator });
+  }
+  return newTag;
+};
+const setStateNumRange = (state, item, t) => {
+  const { prevItem } = state;
+  const { field, start, end, min = prevItem.min, max = prevItem.max } = item;
+  const nextMinNum = `min${field}`;
+  const nextMaxNum = `max${field}`;
+  if (state.curMinNumVar !== nextMinNum || state.curMaxNumVar !== nextMaxNum) {
+    delete state[state.curMinNumVar];
+    delete state[state.curMaxNumVar];
+    delete state.formRules[state.curMinNumVar];
+    delete state.formRules[state.curMaxNumVar];
+    state.curMinNumVar = nextMinNum;
+    state.curMaxNumVar = nextMaxNum;
+  }
+  state[state.curMinNumVar] = start;
+  state[state.curMaxNumVar] = end;
+  const { curMinNumVar, curMaxNumVar } = state;
+  const minIsNumber = type.isNumber(min);
+  const maxIsNumber = type.isNumber(max);
+  if (minIsNumber || maxIsNumber) {
+    state.formRules[curMinNumVar] = {
+      validator: (rule, value, cb) => {
+        const valueIsNumber = type.isNumber(value);
+        if (!valueIsNumber && type.isNumber(state[curMaxNumVar]) || valueIsNumber && (minIsNumber && !maxIsNumber && value >= min || !minIsNumber && maxIsNumber && value <= max || value >= min && value <= max)) {
+          cb();
+        } else {
+          state.numberShowMessage = Boolean(value || state[curMaxNumVar]);
+          cb(new Error(t("tvp.tvpSearchbox.rangeMinErr", [min, max])));
+        }
+      }
+    };
+    state.formRules[curMaxNumVar] = {
+      validator: (rule, value, cb) => {
+        const MinValueIsNumber = type.isNumber(state[curMinNumVar]);
+        const curMin = MinValueIsNumber && min < state[curMinNumVar] ? Number(state[curMinNumVar]) : min;
+        const curMinIsNumber = type.isNumber(curMin);
+        const valueIsNumber = type.isNumber(value);
+        if (!valueIsNumber && MinValueIsNumber || valueIsNumber && (curMinIsNumber && !maxIsNumber && value >= curMin || !curMinIsNumber && maxIsNumber && value <= max || value >= curMin && value <= max)) {
+          cb();
+        } else if (!valueIsNumber && !MinValueIsNumber) {
+          cb(new Error(t("tvp.tvpSearchbox.rangeNumberTitle")));
+        } else {
+          cb(new Error(t("tvp.tvpSearchbox.rangeMaxErr")));
+        }
+      }
+    };
+  } else {
+    state.formRules[curMaxNumVar] = {
+      validator: (rule, value, cb) => {
+        const curMin = state[curMinNumVar];
+        const valueIsNumber = type.isNumber(value);
+        const curMinIsNumber = type.isNumber(curMin);
+        if (valueIsNumber && !curMinIsNumber || !valueIsNumber && curMinIsNumber || valueIsNumber && curMinIsNumber && value >= Number(curMin)) {
+          cb();
+        } else if (!valueIsNumber && !curMinIsNumber) {
+          cb(new Error(t("tvp.tvpSearchbox.rangeNumberTitle")));
+        } else {
+          cb(new Error(t("tvp.tvpSearchbox.rangeMaxErr")));
+        }
+      }
+    };
+  }
+};
+exports.getVerifyDateTag = getVerifyDateTag;
+exports.getVerifyNumTag = getVerifyNumTag;
+exports.getVerifyTag = getVerifyTag;
+exports.setStateNumRange = setStateNumRange;

package/lib/utils/zh_CN.cjs.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const zhCN = {
+  tvp: {
+    tvpSearchbox: {
+      defaultPlaceholder: "请选择属性筛选，或输入关键字",
+      addPlaceholder: "添加筛选条件",
+      tagPlaceholder: "请选择标签键/值搜索，或输入“键=值”搜索",
+      dynamicPlaceholder: "请选择{newValue}搜索",
+      attributeType: "属性类型",
+      propertyValue: "{0}的值",
+      matched: "潜在匹配项",
+      allValues: "所有值",
+      allProperty: "全部属性",
+      operator: "运算符",
+      clearAll: "清空",
+      emptyValue: "空 值",
+      help: "点击查看帮助",
+      switchText: "切换到默认搜索项",
+      tagKey: "键",
+      tagValue: "值",
+      minValueText: "最小值",
+      maxValueText: "最大值",
+      rangeMinArr: "输入值必须在{0}~{1}之间",
+      rangeMaxArr: "最大值必须大于等于最小值，或者为空",
+      rangeNumberTitle: "请至少输入一个值",
+      rangeDateTitle: "请至少输入一个日期",
+      timeLengthTitle: "可选时间跨度为{value}天内",
+      rangeBeginLabel: "开始日期",
+      rangeEndLabel: "结束日期",
+      rulekeyword1: "关键字",
+      notBeNull: "值不能为空",
+      noData: "暂无匹配数据...",
+      selectAll: "全选",
+      confirm: "确定",
+      cancel: "取消",
+      equal: "等于",
+      notEqual: "不等于",
+      contain: "包含",
+      notContain: "不包含"
+    }
+  }
+};
+exports.zhCN = zhCN;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@opentiny/vue-search-box",
+  "version": "0.0.1",
+  "description": "",
+  "homepage": "https://github.com/opentiny/tiny-search-box#readme",
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-search-box/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opentiny/tiny-search-box.git"
+  },
+  "license": "MIT",
+  "author": "",
+  "type": "module",
+  "main": "lib/index.cjs.js",
+  "module": "es/index.es.js",
+  "types": "types/index.d.ts",
+  "style": "src/index.less",
+  "keywords": [
+    "search",
+    "comprehensive search",
+    "opentiny"
+  ],
+  "scripts": {
+    "build": "pnpm build:theme && vite build && node scripts/pre-release.cjs",
+    "build:theme": "vite build --config vite.config.theme.ts",
+    "prepublish": "pnpm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@opentiny/vue-button": "^3.21.0",
+    "@opentiny/vue-checkbox": "^3.21.0",
+    "@opentiny/vue-checkbox-group": "^3.21.0",
+    "@opentiny/vue-date-picker": "^3.21.0",
+    "@opentiny/vue-dropdown": "^3.21.0",
+    "@opentiny/vue-dropdown-item": "^3.21.0",
+    "@opentiny/vue-dropdown-menu": "^3.21.0",
+    "@opentiny/vue-form": "^3.21.0",
+    "@opentiny/vue-form-item": "^3.21.0",
+    "@opentiny/vue-icon": "^3.21.0",
+    "@opentiny/vue-input": "^3.21.0",
+    "@opentiny/vue-loading": "^3.21.0",
+    "@opentiny/vue-locale": "^3.21.0",
+    "@opentiny/vue-option": "^3.21.0",
+    "@opentiny/vue-popover": "^3.21.0",
+    "@opentiny/vue-select": "^3.21.0",
+    "@opentiny/vue-tag": "^3.21.0",
+    "@opentiny/vue-tooltip": "^3.21.0",
+    "vue": "^3.0.0",
+    "vue-i18n": "^11.1.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "commander": "^6.2.0",
+    "glob": "^11.0.0",
+    "less": "^4.2.2",
+    "shelljs": "^0.8.4",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2",
+    "vite-plugin-dts": "^4.3.0"
+  }
+}

package/types/composables/use-checkbox.d.ts

@@ -0,0 +1,10 @@
+export declare function useCheckbox({ props, state, emits }: {
+    props: any;
+    state: any;
+    emits: any;
+}): {
+    selectCheckbox: (confirm: boolean) => void;
+    isIndeterminate: any;
+    checkAll: any;
+    isShowClose: any;
+};

package/types/composables/use-custom.d.ts

@@ -0,0 +1,7 @@
+export declare function useCustom({ state, emits }: {
+    state: any;
+    emits: any;
+}): {
+    handleConfirm: (customTag: any) => void;
+    handleEditConfirm: (customTag: any) => void;
+};

package/types/composables/use-datepicker.d.ts

@@ -0,0 +1,11 @@
+export declare function useDatePicker({ props, state, emits }: {
+    props: any;
+    state: any;
+    emits: any;
+}): {
+    onConfirmDate: (confirm: boolean, isDateTimeType?: boolean) => Promise<void>;
+    handleDateShow: () => void;
+    pickerOptions: (startDate: any, endName?: string) => {
+        disabledDate(time: any): boolean;
+    };
+};

package/types/composables/use-dropdown.d.ts

@@ -0,0 +1,13 @@
+export declare function useDropdown({ props, emits, state, t, format }: {
+    props: any;
+    emits: any;
+    state: any;
+    t: any;
+    format: any;
+}): {
+    selectPropItem: (item: any) => void;
+    selectRadioItem: (item: any, isPotential?: boolean) => void;
+    createTag: () => void;
+    helpClick: () => void;
+    setOperator: (operator: any) => void;
+};

package/types/composables/use-edit.d.ts

@@ -0,0 +1,13 @@
+export declare function useEdit({ props, state, t, nextTick, format, emits }: {
+    props: any;
+    state: any;
+    t: any;
+    nextTick: any;
+    format: any;
+    emits: any;
+}): {
+    editTag: (tag: any, index: any, e: any) => void;
+    confirmEditTag: (isConfirm: any) => Promise<void>;
+    selectPropChange: (item: any, disabled: any) => void;
+    selectItemIsDisable: (item: any) => boolean;
+};

package/types/composables/use-init.d.ts

@@ -0,0 +1,10 @@
+export declare function useInit({ props, state }: {
+    props: any;
+    state: any;
+}): {
+    initItems: () => void;
+    watchOutsideClick: () => void;
+    watchMouseDown: () => void;
+    watchMouseMove: () => void;
+    handleClick: (e: any) => void;
+};

package/types/composables/use-match.d.ts

@@ -0,0 +1,8 @@
+export declare function useMatch({ props, state, emits }: {
+    props: any;
+    state: any;
+    emits: any;
+}): {
+    handleInput: (this: any, ...args: any) => void;
+    selectFirstMap: (item: any, isFirst: any) => void;
+};

package/types/composables/use-num-range.d.ts

@@ -0,0 +1,9 @@
+export declare function useNumRange({ props, state, t, emits }: {
+    props: any;
+    state: any;
+    t: any;
+    emits: any;
+}): {
+    initFormRule: () => void;
+    sizeChange: (confirm: boolean) => Promise<void>;
+};

package/types/composables/use-placeholder.d.ts

@@ -0,0 +1,8 @@
+export declare function usePlaceholder({ props, state, t }: {
+    props: any;
+    state: any;
+    t: any;
+}): {
+    placeholder: any;
+    setPlaceholder: (placeholderValue: string) => void;
+};

package/types/composables/use-tag.d.ts

@@ -0,0 +1,9 @@
+export declare function useTag({ props, state, emits }: {
+    props: any;
+    state: any;
+    emits: any;
+}): {
+    deleteTag: (tag: any) => void;
+    clearTag: () => void;
+    backspaceDeleteTag: () => void;
+};

package/types/index.type.d.ts

@@ -0,0 +1,189 @@
+/**
+ * tag类型, radio-默认单选， noValue-非正常tag，tag值为空，  checkbox-多选，map-键值tag, numRange-数字范围tag,
+ * dateRange-日期范围tag。tag 的分类是根据键值的结果划分
+ */
+export type ISearchBoxTagType = 'radio' | 'noValue' | 'checkbox' | 'map' | 'numRange' | 'dateRange' | 'dateTimeRange';
+/**
+ * 候选tag数据配置项
+ */
+export interface ISearchBoxItem {
+    /**
+     * 搜索字段，tag的键，'keyword' 作为组件内部保留字，请勿传入该值
+     */
+    field: string;
+    /**
+     * tag 键的显示值，实际结果是field
+     */
+    label: string;
+    /**
+     * 配置项可生产的tag类型
+     */
+    type?: ISearchBoxTagType;
+    /**
+     * tag 值的选择项数据
+     */
+    options?: Array<ISearchBoxOption>;
+    /**
+     * 自动识别匹配正则
+     * 10.0.2 新增
+     */
+    regexp?: RegExp;
+    /**
+     * radio 单选类型可设置, 设置为false时,单选属性可以多次选择
+     */
+    replace?: boolean;
+    /**
+     * 单选或多选值的选中项键值
+     * 10.0.2 新增
+     */
+    optionValueKey?: string;
+    /**
+     * dateRange 类型日期显示和结果格式，dateRange时必选
+     */
+    format?: string;
+    /**
+     * numRange 最小值，类型为number
+     * dateRange开始日期，类型为Date
+     */
+    start?: number | Date;
+    /**
+     * numRange 最大值，类型为number
+     * dateRange起始日期，类型为Date
+     */
+    end?: number | Date;
+    /**
+     * numRange 可填最小值，用于校验
+     * dateRange可选最小值，用于校验
+     */
+    min?: number | Date;
+    /**
+     * numRange 可填最大值，用于校验
+     * dateRange可选最大值，用于校验
+     */
+    max?: number | Date;
+    /**
+     * 每个item对应的提示文本
+     */
+    placeholder?: string;
+    /**
+     * 搜索的字段范围
+     */
+    searchKeys?: Array<string>;
+    /**
+     * 标识字段映射，3.13.0新增
+     */
+    idMapKey?: string;
+    /**
+     * 标签分隔符[3.14.0新增]
+     */
+    operator?: string;
+    /**
+     * type=checkbox时，设置是否合并成一个标签[3.16.0新增]
+     */
+    mergeTag?: boolean;
+    [propName: string]: any;
+}
+export interface ISearchBoxOption {
+    /**
+     * 选项显示值
+     */
+    label: string;
+    /**
+     * 搜索目标字段，只有‘label’才需要
+     */
+    field?: string;
+    /**
+     * 控制map类型二级选项是否出现内置所有值，map类型需要
+     */
+    allValues?: boolean;
+    /**
+     * 控制map类型二级选项是否出现内置空值，map类型需要
+     */
+    emptyValue?: boolean;
+    /**
+     * map类型二级选项数据
+     */
+    options?: Array<any>;
+    [propName: string]: any;
+}
+/**
+ * 每个选中tag的类型
+ */
+export interface ISearchBoxTag {
+    /**
+     * 搜索目标搜字段
+     */
+    field: string;
+    /**
+     * tag键，field的显示值
+     */
+    label: string;
+    /**
+     * tag值
+     */
+    value: string;
+    /**
+     * 类型
+     */
+    type: ISearchBoxTagType;
+    /**
+     * 数字范围和日期范围tag 开始值
+     */
+    start?: number | string;
+    /**
+     * 数字范围和日期范围tag 结束值
+     */
+    end?: number | string;
+    [propName: string]: any;
+}
+/**
+ * 潜在匹配项的函数返回值类型
+ */
+interface ISearchBoxMatchItem {
+    label: string;
+    field: string;
+    value: string;
+    type?: string;
+}
+export interface ISearchBoxMatchOptions {
+    getMatchList: (arg1: string) => ISearchBoxMatchItem[];
+}
+export interface ISearchBoxNewTag {
+    /**
+     * type 新标签所属第一层元素的type类型值
+     */
+    type: string;
+    /**
+     * field 新标签所属第一层元素的field值
+     */
+    field: string;
+    /**
+     * label 新标签label值，即标签左侧值
+     */
+    label: string;
+    /**
+     * value 新标签的value值，即标签右侧值
+     */
+    value: string;
+    /**
+     * start 日期标签或大小标签的起始值，可选参数
+     */
+    start?: string | number;
+    /**
+     * end 日期标签或大小标签的结束值，可选参数
+     */
+    end?: string | number;
+    /**
+     * id 新标签的idMapKey对应的属性值，可用来识别标签，可以是id也可以是idMapKey指定的值，可选参数
+     */
+    id?: string | number;
+    /**
+     * operator标签分隔符，可选参数
+     */
+    operator?: string;
+    /**
+     * checkbox类型下使用mergeTag为true时，合并的标签信息，
+     */
+    options?: ISearchBoxTag[];
+}
+export {};

package/types/smb-theme.d.ts

@@ -0,0 +1,15 @@
+export declare const tvpSearchBoxSmbTheme: {
+    'tvp-search-box-right-search-icon-display': string;
+    'tvp-search-box-left-icon-display': string;
+    'tvp-search-box-help-icon-margin-right': string;
+    'tvp-search-box-padding-left': string;
+    'tvp-search-box-close-icon-margin-right': string;
+    'tvp-search-box-separator-icon-margin-right': string;
+    'tvp-search-box-dropdown-btn-group-margin-top': string;
+    'tvp-search-box-dropdown-btn-group-padding-top': string;
+    'tvp-search-box-dropdown-btn-group-padding-bottom': string;
+    'tvp-search-box-dropdown-btn-min-width': string;
+    'tvp-search-box-dropdown-padding-vertical': string;
+    'tvp-search-box-input-padding-left': string;
+    'tvp-search-box-dropdown-header-text-color': string;
+};

package/types/utils/clone.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 深拷贝方法
+ * @param obj 元数据
+ * @returns
+ */
+export declare const deepClone: (obj: any) => any;
+/**
+ * 过滤复制对象的key值
+ * @param obj 复制对象
+ * @param keysToOmit key值
+ */
+export declare const omitObj: (obj: any, keysToOmit?: string[]) => any;