@opentiny/vue-search-box 0.0.1

package/es/utils/validate.es.js

@@ -0,0 +1,179 @@
+import { getTagId, createNewTag } from "./tag.es.js";
+import { isNumber } from "./type.es.js";
+import { omitObj } from "./clone.es.js";
+const getVerifyTag = async (instance, state, props) => {
+  const { prevItem, inputEditValue } = state;
+  const { operators } = prevItem;
+  const rest = 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 = 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 = getTagId(props, prevItem, item);
+    }
+    newTag = 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, operators } = prevItem;
+    const label = unit ? `${prevLabel}(${unit})` : prevLabel;
+    let value = "";
+    if (start && end) {
+      value = `${start}-${end}`;
+    } else {
+      value = start ? `≥${start}` : `≤${end}`;
+    }
+    const id = getTagId(props, prevItem, prevItem);
+    const operator = state.operatorValue && operators ? { operator: state.operatorValue } : null;
+    newTag = createNewTag({ type, 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, 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 = getTagId(props, prevItem, prevItem);
+    const operator = state.operatorValue && operators ? { operator: state.operatorValue } : null;
+    newTag = createNewTag({ type, 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 = isNumber(min);
+  const maxIsNumber = isNumber(max);
+  if (minIsNumber || maxIsNumber) {
+    state.formRules[curMinNumVar] = {
+      validator: (rule, value, cb) => {
+        const valueIsNumber = isNumber(value);
+        if (!valueIsNumber && 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 = isNumber(state[curMinNumVar]);
+        const curMin = MinValueIsNumber && min < state[curMinNumVar] ? Number(state[curMinNumVar]) : min;
+        const curMinIsNumber = isNumber(curMin);
+        const valueIsNumber = 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 = isNumber(value);
+        const curMinIsNumber = 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")));
+        }
+      }
+    };
+  }
+};
+export {
+  getVerifyDateTag,
+  getVerifyNumTag,
+  getVerifyTag,
+  setStateNumRange
+};

package/es/utils/zh_CN.es.js

@@ -0,0 +1,44 @@
+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: "不包含"
+    }
+  }
+};
+export {
+  zhCN
+};

package/index.css

@@ -0,0 +1,337 @@
+.tvp-search-box__dropdown-menu,
+.tvp-search-box__popover {
+  --tvp-SearchBox-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  --tvp-SearchBox-border-color: var(--tv-color-bg-control-unactive, #c2c2c2);
+  --tvp-SearchBox-focus-border-color: var(--tv-color-bg-active-primary, #191919);
+  --tvp-SearchBox-border-radius: var(--tv-border-radius-md, 6px);
+  --tvp-SearchBox-tag-hover-text-color: var(--tv-color-icon-hover, #191919);
+  --tvp-SearchBox-tag-hover-fill-color: var(--tvp-SearchBox-tag-hover-text-color);
+  --tvp-SearchBox-dropdown-header-text-color: var(--tv-color-text-weaken, #808080);
+  --tvp-SearchBox-search-filter-text-color: var(--tv-color-info-text-primary, #191919);
+  --tvp-SearchBox-close-icon-margin-right: var(--tv-space-sm, 4px);
+  --tvp-SearchBox-separator-icon-margin-right: var(--tv-space-sm, 4px);
+  --tvp-SearchBox-right-icon-color: var(--tv-color-icon, #808080);
+  --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
+  --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
+  --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
+  --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
+  --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
+  --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
+  --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
+  --tvp-SearchBox-dropdown-btn-group-padding-top: var(--tv-space-xl, 16px);
+  --tvp-SearchBox-dropdown-btn-group-padding-bottom: var(--tv-space-md, 8px);
+  --tvp-SearchBox-dropdown-num-title-text-color: var(--tv-color-text-weaken, #808080);
+  --tvp-SearchBox-tag-margin-right: var(--tv-space-sm, 4px);
+  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
+  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
+  --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
+  --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
+  --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
+  width: 232px;
+  overflow: auto;
+}
+.tvp-search-box__dropdown-menu .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group,
+.tvp-search-box__popover .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group {
+  border-color: #f23030;
+}
+.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select .tiny-svg,
+.tvp-search-box__popover .tvp-search-box-select .tiny-select .tiny-svg {
+  z-index: 1000;
+}
+.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags-group,
+.tvp-search-box__popover .tvp-search-box-select .tiny-select__tags-group {
+  min-height: 32px;
+  max-height: 82px;
+  padding: 2px;
+  width: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 6px;
+}
+.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags.is-show-tag,
+.tvp-search-box__popover .tvp-search-box-select .tiny-select__tags.is-show-tag {
+  max-width: 276px !important;
+  width: calc(100% - 8px) !important;
+  min-height: 30px;
+  padding-right: 20px;
+  max-height: 76px;
+  overflow: auto;
+}
+.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__suffix,
+.tvp-search-box__popover .tvp-search-box-select .tiny-input__suffix {
+  z-index: 1000;
+}
+.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__inner,
+.tvp-search-box__popover .tvp-search-box-select .tiny-input__inner {
+  border: 0px;
+  overflow: hidden;
+}
+.tvp-search-box__dropdown-menu input[type='number'],
+.tvp-search-box__popover input[type='number'] {
+  -moz-appearance: textfield;
+  /* Firefox */
+  appearance: textfield;
+}
+.tvp-search-box__dropdown-menu input[type='number']::-webkit-inner-spin-button,
+.tvp-search-box__popover input[type='number']::-webkit-inner-spin-button,
+.tvp-search-box__dropdown-menu input[type='number']::-webkit-outer-spin-button,
+.tvp-search-box__popover input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  /* Safari */
+  margin: 0;
+}
+.tvp-search-box__popover.tiny-popover[x-placement^='bottom'] {
+  margin-top: 0;
+}
+.tvp-search-box {
+  --tvp-SearchBox-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  --tvp-SearchBox-border-color: var(--tv-color-bg-control-unactive, #c2c2c2);
+  --tvp-SearchBox-focus-border-color: var(--tv-color-bg-active-primary, #191919);
+  --tvp-SearchBox-border-radius: var(--tv-border-radius-md, 6px);
+  --tvp-SearchBox-tag-hover-text-color: var(--tv-color-icon-hover, #191919);
+  --tvp-SearchBox-tag-hover-fill-color: var(--tvp-SearchBox-tag-hover-text-color);
+  --tvp-SearchBox-dropdown-header-text-color: var(--tv-color-text-weaken, #808080);
+  --tvp-SearchBox-search-filter-text-color: var(--tv-color-info-text-primary, #191919);
+  --tvp-SearchBox-close-icon-margin-right: var(--tv-space-sm, 4px);
+  --tvp-SearchBox-separator-icon-margin-right: var(--tv-space-sm, 4px);
+  --tvp-SearchBox-right-icon-color: var(--tv-color-icon, #808080);
+  --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
+  --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
+  --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
+  --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
+  --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
+  --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
+  --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
+  --tvp-SearchBox-dropdown-btn-group-padding-top: var(--tv-space-xl, 16px);
+  --tvp-SearchBox-dropdown-btn-group-padding-bottom: var(--tv-space-md, 8px);
+  --tvp-SearchBox-dropdown-num-title-text-color: var(--tv-color-text-weaken, #808080);
+  --tvp-SearchBox-tag-margin-right: var(--tv-space-sm, 4px);
+  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
+  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
+  --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
+  --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
+  --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid var(--tvp-SearchBox-border-color);
+  border-radius: var(--tvp-SearchBox-border-radius);
+  min-height: var(--tvp-SearchBox-min-height);
+  padding-left: var(--tvp-SearchBox-padding-left);
+  background-color: var(--tvp-SearchBox-bg-color);
+}
+.tvp-search-box__form {
+  width: auto;
+  flex: 1;
+  min-width: 200px;
+}
+.tvp-search-box__form-popover {
+  position: absolute;
+}
+.tvp-search-box:focus-within {
+  border-color: var(--tvp-SearchBox-focus-border-color);
+}
+.tvp-search-box > .tvp-search-box__prefix {
+  position: absolute;
+  top: calc((var(--tvp-SearchBox-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px);
+  left: 12px;
+  display: inline;
+  font-size: var(--tvp-SearchBox-left-icon-font-size);
+  fill: #808080;
+}
+.tvp-search-box__text-highlight {
+  color: var(--tvp-SearchBox-dropdown-keyword-text-color);
+}
+.tvp-search-box__placeholder {
+  padding-right: var(--tvp-SearchBox-place-padding-right);
+}
+.tvp-search-box__tag {
+  margin: 1px var(--tvp-SearchBox-tag-margin-right) 1px 0;
+  max-width: 100%;
+}
+.tvp-search-box__tag > .tvp-search-box__tag-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tvp-search-box__tag:hover {
+  cursor: pointer;
+  color: var(--tvp-SearchBox-tag-hover-text-color);
+  fill: var(--tvp-SearchBox-tag-hover-fill-color);
+}
+.tvp-search-box__tag-editor span {
+  border-bottom: 1px dashed var(--tvp-SearchBox-tag-bottom-border-color);
+  line-height: 1;
+}
+.tvp-search-box__input .tiny-input-display-only {
+  width: calc(100% - var(--tv-Input-suffix-right) - 63px);
+}
+.tvp-search-box__input .tiny-svg {
+  margin-left: 0;
+}
+.tvp-search-box__input-close {
+  margin-right: var(--tvp-SearchBox-close-icon-margin-right);
+}
+.tvp-search-box__input-separator {
+  display: inline-block;
+  margin-right: var(--tvp-SearchBox-separator-icon-margin-right);
+  height: 14px;
+  width: 1px;
+  background-color: #dfe1e6;
+}
+.tvp-search-box__input-help {
+  margin-right: 0px;
+}
+.tvp-search-box__input .tvp-search-box__input-search {
+  display: none;
+  margin-right: 2px;
+}
+.tvp-search-box__input-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix .tiny-svg {
+  font-size: 16px;
+  margin-top: 0;
+  fill: var(--tvp-SearchBox-right-icon-color);
+}
+.tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix .tiny-svg:hover {
+  fill: var(--tvp-SearchBox-right-icon-color-hover);
+}
+.tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix-inner {
+  display: flex;
+  align-items: center;
+}
+.tvp-search-box__prop {
+  white-space: nowrap;
+  vertical-align: middle;
+  font-size: var(--tvp-SearchBox-tag-font-size);
+}
+.tvp-search-box__prop span {
+  padding-left: 8px;
+}
+.tvp-search-box .tiny-dropdown__trigger {
+  display: block;
+}
+.tvp-search-box .tiny-dropdown__trigger .tiny-dropdown__title {
+  width: 100%;
+}
+.tvp-search-box__dropdown {
+  display: block;
+  flex: 1;
+}
+.tvp-search-box__radio-wrap {
+  max-height: 240px;
+  overflow: auto;
+}
+.tvp-search-box__checkbox-wrap {
+  max-height: 186px;
+  overflow: auto;
+}
+.tvp-search-box__checkbox {
+  flex-direction: column;
+}
+.tvp-search-box__bottom-btn,
+.tvp-search-box__checkbox-btn {
+  display: flex;
+  width: 100%;
+  border-top: 1px solid var(--tvp-SearchBox-dropdown-btn-group-border-color);
+  margin-top: var(--tvp-SearchBox-dropdown-btn-group-margin-top);
+  padding-top: var(--tvp-SearchBox-dropdown-btn-group-padding-top);
+  padding-right: 10px;
+  padding-bottom: var(--tvp-SearchBox-dropdown-btn-group-padding-bottom);
+}
+.tvp-search-box__bottom-btn .tiny-button,
+.tvp-search-box__checkbox-btn .tiny-button {
+  min-width: 72px;
+}
+.tvp-search-box__checkbox-btn {
+  padding-left: 10px;
+}
+.tvp-search-box__filter-type {
+  display: inline-block;
+  padding: 0 16px;
+  margin-top: 12px;
+  height: 18px;
+  line-height: 18px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--tvp-SearchBox-dropdown-header-text-color);
+}
+.tvp-search-box__potential-box {
+  min-height: 30px;
+}
+.tvp-search-box__filter-item {
+  color: var(--tvp-SearchBox-search-filter-text-color);
+  border-bottom: 1px solid #fff;
+}
+.tvp-search-box__dropdown-item.tiny-dropdown-item {
+  width: 100%;
+  max-width: 100%;
+}
+.tvp-search-box__dropdown-item.tiny-dropdown-item > div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tvp-search-box__dropdown-item.tiny-dropdown-item.tvp-search-box__checkbox-item .tiny-checkbox__inner > .tiny-svg {
+  margin-right: 0;
+}
+.tvp-search-box__checkbox-item .tvp-search-box__checkbox-item-label,
+.tvp-search-box__checkbox-item .tiny-checkbox,
+.tvp-search-box__checkbox-item .tiny-dropdown-item__label {
+  width: 100%;
+}
+.tvp-search-box__checkbox-item-label .tiny-checkbox__label {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tvp-search-box__checkbox-item .tiny-dropdown-item__wrap {
+  padding: 0;
+}
+.tvp-search-box__checkbox-item .tiny-checkbox {
+  padding: 6px 10px;
+}
+.tvp-search-box__dropdown-title {
+  margin: 8px 0px;
+  line-height: 18px;
+  color: var(--tvp-SearchBox-dropdown-num-title-text-color);
+  font-size: 12px;
+}
+.tvp-search-box__dropdown-start,
+.tvp-search-box__dropdown-end {
+  margin: 8px 0px;
+  font-size: var(--tvp-SearchBox-dropdown-desc-font-size);
+  color: var(--tvp-SearchBox-dropdown-desc-text-color);
+  letter-spacing: 0;
+  line-height: 1.5;
+}
+.tvp-search-box__panel-box {
+  width: 100%;
+  padding: 0px 10px;
+}
+.tvp-search-box__date-item.tiny-form-item,
+.tvp-search-box__number-item.tiny-form-item {
+  padding-bottom: 8px;
+  margin-bottom: 0;
+  width: 200px;
+}
+.tvp-search-box__date-item.tiny-form-item > div,
+.tvp-search-box__number-item.tiny-form-item > div {
+  width: 100%;
+  white-space: nowrap;
+}
+.tvp-search-box__date-item.tiny-form-item .tiny-form-item__error,
+.tvp-search-box__number-item.tiny-form-item .tiny-form-item__error {
+  font-size: 12px;
+}
+.tvp-search-box__input input {
+  border: 0;
+}
+.tvp-search-box__input-wrapper .tvp-search-box__dropdown .tvp-search-box__input .tiny-input__inner {
+  padding-left: 0px;
+}

package/lib/composables/use-checkbox.cjs.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const tag = require("../utils/tag.cjs.js");
+const clone = require("../utils/clone.cjs.js");
+function useCheckbox({ props, state, emits }) {
+  const selectCheckbox = (confirm) => {
+    const { checkboxGroup, prevItem, propItem } = state;
+    const rest = clone.omitObj(prevItem);
+    state.hiden = true;
+    if (confirm) {
+      const tagList = [];
+      const oldValue = clone.deepClone(state.innerModelValue);
+      const { mergeTag, operators, label: prevLabel } = prevItem;
+      if (mergeTag) {
+        let value = "";
+        const options = [];
+        const { indexMap } = state;
+        const hasTagIndex = indexMap.get(prevLabel);
+        hasTagIndex !== void 0 && state.innerModelValue.splice(hasTagIndex, 1);
+        state.backupList.forEach((item) => {
+          const { label } = item;
+          const checkboxLabel = `${prevLabel}${label}`;
+          const hasItem = checkboxGroup.includes(checkboxLabel);
+          if (hasItem) {
+            delete item.isFilter;
+            const id = tag.getTagId(props, prevItem, item);
+            const newOptions = { label: item.label, ...id };
+            value += !value ? label : ` | ${label}`;
+            options.push(newOptions);
+          }
+        });
+        if (options.length > 0) {
+          const newTag = { ...rest, value, options };
+          tagList.push(newTag);
+        }
+      } else {
+        const { valueMap } = state;
+        const indexList = [];
+        state.backupList.forEach((item) => {
+          const { label } = item;
+          const value = `${prevLabel}${label}`;
+          const hasItem = checkboxGroup.includes(value);
+          if (hasItem && !tag.hasTagItem(state, label)) {
+            const id = tag.getTagId(props, prevItem, item);
+            const operator = state.operatorValue && operators ? { operator: state.operatorValue } : null;
+            const newTag = tag.createNewTag({ ...rest, label: propItem.label, value: label, ...id, ...operator });
+            tagList.push(newTag);
+            item.isChecked = true;
+          } else if (!hasItem && tag.hasTagItem(state, label)) {
+            item.isChecked = false;
+            const index = valueMap.get(value);
+            indexList.push(index);
+          }
+        });
+        if (indexList.length) {
+          state.innerModelValue = state.innerModelValue.filter((item, index) => item && !indexList.includes(index));
+        }
+      }
+      tag.emitChangeModelEvent({ emits, state, tagList, oldValue });
+    } else {
+      propItem.label = "";
+      state.inputValue = "";
+    }
+  };
+  const isIndeterminate = vue.computed(
+    () => state.checkboxGroup.length > 0 && state.checkboxGroup.length !== state.filterList.length
+  );
+  const checkAll = vue.computed({
+    get: () => state.checkboxGroup.length && state.checkboxGroup.length === state.filterList.length,
+    set: (val) => {
+      if (val) {
+        state.checkboxGroup = state.filterList.flatMap((item) => `${state.prevItem.label}${item.label}`);
+      } else {
+        state.checkboxGroup = [];
+      }
+    }
+  });
+  const isShowClose = vue.computed(() => props.modelValue.length || state.propItem.label || state.inputValue);
+  return {
+    selectCheckbox,
+    isIndeterminate,
+    checkAll,
+    isShowClose
+  };
+}
+exports.useCheckbox = useCheckbox;

package/lib/composables/use-custom.cjs.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tag = require("../utils/tag.cjs.js");
+const dropdown = require("../utils/dropdown.cjs.js");
+function useCustom({ state, emits }) {
+  const updateCustomValue = (customTag) => {
+    const { prevItem, indexMap } = state;
+    const { replace, label } = prevItem;
+    const tagList = [];
+    if (replace && indexMap.has(label)) {
+      const index = indexMap.get(label);
+      const newTag = { ...prevItem, ...customTag };
+      tag.emitChangeModelEvent({ emits, state, newTag, index });
+      return;
+    } else if (!replace && Array.isArray(customTag)) {
+      customTag.forEach((tag$1) => {
+        if (!tag.hasTagItem(state, tag$1.value)) {
+          tagList.push({ ...prevItem, ...tag$1 });
+        }
+      });
+    } else {
+      if (!tag.hasTagItem(state, customTag.value)) {
+        tagList.push({ ...prevItem, ...customTag });
+      }
+    }
+    tag.emitChangeModelEvent({ emits, state, tagList });
+  };
+  const handleConfirm = (customTag) => {
+    if (!customTag) {
+      tag.resetInput(state);
+      dropdown.showDropdown(state, false);
+      return;
+    }
+    updateCustomValue(customTag);
+  };
+  const handleEditConfirm = (customTag) => {
+    if (!customTag) {
+      dropdown.showPopover(state, false);
+      return;
+    }
+    updateCustomValue(customTag);
+  };
+  return {
+    handleConfirm,
+    handleEditConfirm
+  };
+}
+exports.useCustom = useCustom;