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

package/src/index.less

@@ -1,376 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-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

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