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

package/src/index.less

@@ -0,0 +1,376 @@
+@import './vars.less';
+
+@css-prefix: tvp-;
+@css-tiny-prefix: tiny-;
+@search-box-prefix-cls: ~'@{css-prefix}search-box';
+@search-box__dropdown-menu-cls: ~'@{css-prefix}search-box__dropdown-menu';
+@search-box__popover-cls: ~'@{css-prefix}search-box__popover';
+@popover-tiny-cls: ~'@{css-tiny-prefix}popover';
+@checkbox-tiny-cls: ~'@{css-tiny-prefix}checkbox';
+@dropdown-tiny-cls: ~'@{css-tiny-prefix}dropdown';
+@select-tiny-cls: ~'@{css-tiny-prefix}select';
+@input-tiny-cls: ~'@{css-tiny-prefix}input';
+@svg-tiny-cls: ~'@{css-tiny-prefix}svg';
+@button-tiny-cls: ~'@{css-tiny-prefix}button';
+@form-tiny-cls: ~'@{css-tiny-prefix}form';
+
+.@{search-box__dropdown-menu-cls},
+.@{search-box__popover-cls} {
+  .inject-SearchBox-vars();
+  width: 232px;
+  overflow: auto;
+  overflow-x: hidden;
+
+  // 覆写select样式
+  .@{form-tiny-cls}-item.is-error .@{search-box-prefix-cls}-select .@{select-tiny-cls}__tags-group {
+    border-color: #f23030;
+  }
+
+  .@{search-box-prefix-cls}-select {
+    .@{select-tiny-cls} {
+      .@{svg-tiny-cls} {
+        z-index: 1000;
+      }
+
+      &__tags-group {
+        min-height: 32px;
+        max-height: 82px;
+        padding: 2px;
+        width: 100%;
+        border: 1px solid #c2c2c2;
+        border-radius: 6px;
+      }
+
+      &__tags.is-show-tag {
+        max-width: 276px !important;
+        width: calc(100% - 8px) !important;
+        min-height: 30px;
+        padding-right: 20px;
+        max-height: 76px;
+        overflow: auto;
+      }
+    }
+
+    .@{input-tiny-cls} {
+      &__suffix {
+        z-index: 1000;
+      }
+
+      &__inner {
+        border: 0px;
+        overflow: hidden;
+      }
+    }
+  }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+    /* Firefox */
+    appearance: textfield;
+  }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    /* Safari */
+    margin: 0;
+  }
+}
+
+.@{search-box__popover-cls}.@{popover-tiny-cls}[x-placement^='bottom'] {
+  margin-top: 0;
+}
+
+.@{search-box-prefix-cls} {
+  .inject-SearchBox-vars();
+
+  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);
+
+  &__form {
+    width: auto;
+    flex: 1;
+    min-width: 200px;
+
+    &-popover {
+      position: absolute;
+    }
+  }
+
+  &:focus-within {
+    border-color: var(--tvp-SearchBox-focus-border-color);
+  }
+
+  &>&__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;
+  }
+
+  &__text-highlight {
+    color: var(--tvp-SearchBox-dropdown-keyword-text-color);
+  }
+
+  &__placeholder {
+    padding-right: var(--tvp-SearchBox-place-padding-right);
+  }
+
+  &__tag {
+    margin: 1px var(--tvp-SearchBox-tag-margin-right) 1px 0;
+    max-width: 100%;
+
+    &>&-value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:hover {
+      cursor: pointer;
+      color: var(--tvp-SearchBox-tag-hover-text-color);
+      fill: var(--tvp-SearchBox-tag-hover-fill-color);
+    }
+
+    &-editor {
+      span {
+        border-bottom: 1px dashed var(--tvp-SearchBox-tag-bottom-border-color);
+        line-height: 1;
+      }
+    }
+  }
+
+  &__input {
+    .@{input-tiny-cls}-display-only {
+      width: calc(100% - var(--tv-Input-suffix-right) - 63px);
+    }
+
+    & .@{svg-tiny-cls} {
+      margin-left: 0;
+    }
+
+    &-close {
+      margin-right: var(--tvp-SearchBox-close-icon-margin-right);
+    }
+
+    &-separator {
+      display: inline-block;
+      margin-right: var(--tvp-SearchBox-separator-icon-margin-right);
+      height: 14px;
+      width: 1px;
+      background-color: #dfe1e6;
+    }
+
+    &-help {
+      margin-right: 0px;
+    }
+
+    & &-search {
+      display: none;
+      margin-right: 2px;
+    }
+  }
+
+  &__input-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  // 提高权重，防止被tinyvue样式覆盖
+  & &__dropdown:not(.is-disabled) .@{search-box-prefix-cls}__input:not(.is-disabled) {
+    .@{input-tiny-cls}__suffix .@{svg-tiny-cls} {
+      font-size: 16px;
+      margin-top: 0;
+      fill: var(--tvp-SearchBox-right-icon-color);
+
+      &:hover {
+        fill: var(--tvp-SearchBox-right-icon-color-hover);
+      }
+    }
+
+    .@{input-tiny-cls}__suffix-inner {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__prop {
+    white-space: nowrap;
+    vertical-align: middle;
+    font-size: var(--tvp-SearchBox-tag-font-size);
+
+    span {
+      padding-left: 8px;
+    }
+  }
+
+  // 撑开输入框宽度
+  .@{dropdown-tiny-cls}__trigger {
+    display: block;
+
+    .@{dropdown-tiny-cls}__title {
+      width: 100%;
+    }
+  }
+
+  &__dropdown {
+    display: block;
+    flex: 1;
+  }
+
+  &__radio-wrap {
+    max-height: 240px;
+    overflow: auto;
+  }
+
+  &__checkbox-wrap {
+    max-height: 186px;
+    overflow: auto;
+  }
+
+  &__checkbox {
+    flex-direction: column;
+  }
+
+  &__bottom-btn,
+  &__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);
+
+    .@{button-tiny-cls} {
+      min-width: 72px;
+    }
+  }
+
+  &__checkbox-btn {
+    padding-left: 10px;
+  }
+
+  &__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);
+  }
+
+  &__potential-box {
+    min-height: 30px;
+  }
+
+  &__filter-item {
+    color: var(--tvp-SearchBox-search-filter-text-color);
+    border-bottom: 1px solid #fff;
+  }
+
+  &__dropdown-item.@{dropdown-tiny-cls}-item {
+    width: 100%;
+    max-width: 100%;
+    --tv-DropdownItem-icon-color-hover: var(--tv-color-bg-active-control);
+
+    &>div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    // 本地和线上优先级不同，修复复选框在dropdown中使用样式出现的问题
+    &.@{search-box-prefix-cls}__checkbox-item .@{checkbox-tiny-cls}__inner>.@{svg-tiny-cls} {
+      margin-right: 0;
+    }
+  }
+
+  // 空白处可以选中复选框
+  &__checkbox-item {
+
+    & &-label,
+    .@{checkbox-tiny-cls},
+    & .@{dropdown-tiny-cls}-item__label {
+      width: 100%;
+    }
+
+    &-label .@{checkbox-tiny-cls}__label {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .@{dropdown-tiny-cls}-item__wrap {
+      padding: 0;
+    }
+
+    .@{checkbox-tiny-cls} {
+      padding: 6px 10px;
+    }
+  }
+
+  &__dropdown {
+    &-title {
+      margin: 8px 0px;
+      line-height: 18px;
+      color: var(--tvp-SearchBox-dropdown-num-title-text-color);
+      font-size: 12px;
+    }
+
+    &-start,
+    &-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;
+    }
+  }
+
+  &__panel-box {
+    width: 100%;
+    padding: 0px 10px;
+  }
+
+  &__date-item.@{form-tiny-cls}-item,
+  &__number-item.@{form-tiny-cls}-item {
+    padding-bottom: 8px;
+    margin-bottom: 0;
+    width: 200px;
+
+    &>div {
+      width: 100%;
+      white-space: nowrap;
+    }
+
+    .@{form-tiny-cls}-item__error {
+      font-size: 12px;
+    }
+  }
+
+  &__input input {
+    border: 0;
+  }
+
+  // 输入框中的input需要额外单独处理样式，仅此输入框生效
+  &__input-wrapper .@{search-box-prefix-cls}__dropdown .@{search-box-prefix-cls}__input {
+    .@{input-tiny-cls}__inner {
+      padding-left: 0px;
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+import { App } from "vue";
+import TinySearchBox from "./index.vue";
+export { zhCN } from "./utils/zh_CN";
+export { enUS } from "./utils/en_US";
+import "./index.less";
+
+export * from "./index.type";
+
+TinySearchBox.install = function (app: App) {
+  app.component(TinySearchBox.name, TinySearchBox);
+};
+
+export default TinySearchBox;

package/src/index.type.ts

@@ -0,0 +1,192 @@
+/**
+ * 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[]
+}