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

package/src/utils/dropdown.ts

@@ -1,27 +0,0 @@
-/**
- * 下拉框显隐
- * @param state 组件响应式数据
- * @param isShow 是否展示下拉框, 默认展示
- */
-export const showDropdown = (state, isShow = true) => {
-  const { dropdownRef } = state.instance.refs
-  clearTimeout(Number(dropdownRef.state.timeout))
-  dropdownRef.state.timeout = null
-  dropdownRef.state.visible = isShow
-  isShow && (state.popoverVisible = false)
-}
-
-/**
- * 编辑下拉框显隐
- * @param state 组件响应式数据
- * @param isShow 是否展示编辑下拉框, 默认展示
- */
-export const showPopover = (state, isShow = true) => {
-  state.popoverVisible = isShow
-  const { dropdownRef } = state.instance.refs
-  if (isShow && dropdownRef.state.visible) {
-    clearTimeout(Number(dropdownRef.state.timeout))
-    dropdownRef.state.timeout = null
-    dropdownRef.state.visible = false
-  }
-}

package/src/utils/en_US.ts

@@ -1,41 +0,0 @@
-export const enUS = {
-  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: '不包含'
-    }
-  }
-};

package/src/utils/index.ts

@@ -1,11 +0,0 @@
-export const debounce = (func: Function, delay = 200) => {
-    let timer: ReturnType<typeof setTimeout> | null = null;
-
-    return function (this: any, ...args: any) {
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(() => {
-            func.apply(this, args);
-            timer = null;
-        }, delay);
-    };
-}

package/src/utils/tag.ts

@@ -1,80 +0,0 @@
-import type { ISearchBoxNewTag } from '../index.type'
-import { deepClone } from './clone'
-import { showDropdown, showPopover } from './dropdown'
-
-/**
- * 判断是否已选择此标签
- * @param state searchbox的state变量
- * @param itemValue 标签的value值
- * @param itemLabel 标签的label值，可选参数，默认为空字符串，一般用于当prevItem.label为空时
- * @return 已选择则返回true，未选择则相反
- */
-export const hasTagItem = (state, itemValue, itemLabel = '') => {
-  const { valueMap, prevItem } = state
-  const value = (prevItem.label || itemLabel) + itemValue
-  return valueMap.has(value)
-}
-
-/**
- * 清空输入框的值
- * @param state searchbox的state变量
- */
-export const resetInput = (state) => {
-  state.isResetFlag = false
-  state.propItem = {}
-  state.inputValue = ''
-}
-
-/**
- * update:modelValue和change事件
- * @param emits vue的api
- * @param state searchbox的state变量
- * @param args 其他可选参数：
- * @param tagList 尾部添加的新标签数组
- * @param index 替换某标签的索引
- * @param newTag 表示替换的新标签，主要和索引共用
- * @param newValue 表示替换全部的model-value值
- * @param oldValue 表示旧的model-value值
- */
-export const emitChangeModelEvent = ({ emits, state, ...args }) => {
-  const { tagList = null, index = -1, newTag = null, newValue = null, oldValue = null, isEdit } = args
-  if (!isEdit) {
-    resetInput(state)
-  }
-  if (!tagList && index === -1 && !newValue) {
-    return
-  }
-
-  const oldVal = oldValue || deepClone(state.innerModelValue)
-  if (newValue) {
-    state.innerModelValue = newValue
-  } else if (index !== -1) {
-    newTag ? state.innerModelValue.splice(index, 1, newTag) : state.innerModelValue.splice(index, 1)
-  } else {
-    state.innerModelValue.push(...tagList)
-  }
-  const { innerModelValue } = state
-  showDropdown(state, false)
-  showPopover(state, false)
-  emits('update:modelValue', innerModelValue)
-  emits('change', deepClone(state.innerModelValue), oldVal)
-}
-
-/**
- * 创建新标签，防止多个地方创建的标签不一致，缺少某些属性
- * @param newTag 新标签对象
- * @return 生成的新标签对象
- */
-export const createNewTag = (newTag: ISearchBoxNewTag) => newTag
-
-/**
- * 获取元素的唯一标识
- * @param props 组件入参对象
- * @param prevItem 当前标签父级对象
- * @param item 要生成的新标签对象
- * @return 此标签的唯一标识
- */
-export const getTagId = (props, prevItem, item) => {
-  const idKey = prevItem.idMapKey || props.idMapKey
-  return item && item[idKey] !== undefined ? { [idKey]: item[idKey] } : null
-}

package/src/utils/type.ts

@@ -1,6 +0,0 @@
-/**
- * 判断input输入对象是否为数字类型。
- * isNumber(369) // true
- * isNumber('') // false
- */
-export const isNumber = (value: any) => parseFloat(value).toString() !== 'NaN'

package/src/utils/validate.ts

@@ -1,234 +0,0 @@
-import { createNewTag, getTagId } from './tag'
-import { isNumber } from './type'
-import { omitObj } from './clone'
-
-/**
- * 校验正常标签的值，并返回相应的新标签
- * @param instance searchbox 的 instance
- * @param state searchbox 的 state
- * @param props searchbox 的 props
- * @return 验证通过则返回新标签对象，否则返回null
- */
-export 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((item) => item.label === editValue)
-        const label = 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((item) => item.label === value)
-      id = getTagId(props, prevItem, item)
-    }
-
-    newTag = createNewTag({ ...rest, label: state.selectValue, ...operator, value, ...id, ...otherAttr })
-  }
-
-  return newTag
-}
-
-/**
- * 校验 numRange 的值，并返回相应的新标签
- * @param instance searchbox 的 instance
- * @param state searchbox 的 state
- * @param props searchbox 的 props
- * @return 验证通过则返回新标签对象，否则返回null
- */
-export 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
-}
-
-/**
- * 校验 dateRange datetimeRange 的值，并返回相应的新标签
- * @param instance searchbox 的 instance
- * @param state searchbox 的 state
- * @param props searchbox 的 props
- * @param isDateTimeType 是否 datetimeRange
- * @return 验证通过则返回新标签对象，否则返回null
- */
-export 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
-}
-
-/**
- * 按需加载 state 里 numRange 类型的变量，按需加载校验规则
- * @param state searchbox 的 state
- * @param item 当前选择的 item 值
- */
-export 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')))
-        }
-      }
-    }
-  }
-}

package/src/utils/zh_CN.ts

@@ -1,41 +0,0 @@
-export const zhCN = {
-  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: '不包含'
-    }
-  }
-};

package/src/vars.less

@@ -1,56 +0,0 @@
-.inject-SearchBox-vars() {
-  // 输入框背景色
-  --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);
-  // 输入框内占位元素右内边距(hide)
-  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
-  // 可编辑标签文字下划线颜色
-  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
-  // 生成标签前的label字号
-  --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);
-}

package/vite.config.theme.ts

@@ -1,20 +0,0 @@
-import { resolve } from "node:path";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  build: {
-    sourcemap: false,
-    minify: false,
-    rollupOptions: {
-      input: "src/index.less",
-      treeshake: false,
-      preserveEntrySignatures: "strict",
-      output: {
-        dir: resolve(__dirname, "dist"),
-        assetFileNames: "index.css",
-        preserveModules: true,
-        preserveModulesRoot: resolve(__dirname, "src/assets"),
-      },
-    },
-  },
-});

package/vite.config.ts

@@ -1,60 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-import * as glob from 'glob';
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import dts from 'vite-plugin-dts';
-
-interface Manifest {
-  version: string;
-  dependencies?: Record<string, string>;
-  peerDependencies?: Record<string, string>;
-}
-export function getPackageManifest(pkgPath: string): Manifest {
-  return JSON.parse(readFileSync(pkgPath, 'utf8')) as Manifest;
-}
-export function rollupExternalFromPackage(pkgPath: string) {
-  const { dependencies, peerDependencies } = getPackageManifest(pkgPath);
-  const dependenciesKeys = Object.keys(dependencies ?? {});
-  const peerDependenciesKeys = Object.keys(peerDependencies ?? {});
-
-  return (id: string) => {
-    const packages = new Set([...peerDependenciesKeys, ...dependenciesKeys]);
-    return Array.from(packages).some(
-      (pkg) => id === pkg || id.startsWith(`${pkg}/`)
-    );
-  };
-}
-
-function rollupOutput(target: string, format: string): any {
-  return {
-    format: target,
-    entryFileNames: `[name].${target}.js`,
-    preserveModules: true,
-    dir: resolve(__dirname, 'dist', format),
-    preserveModulesRoot: resolve(__dirname, 'src'),
-    exports: 'named'
-  };
-}
-
-const input = glob.sync('./src/**/*.ts', {
-  cwd: __dirname,
-  absolute: true
-});
-
-export default defineConfig({
-  plugins: [dts({ outDir: './dist/types' }), vue()],
-  build: {
-    assetsDir: '',
-    sourcemap: false,
-    minify: false,
-    cssCodeSplit: true, // 分离 CSS 文件
-    rollupOptions: {
-      input,
-      treeshake: false,
-      preserveEntrySignatures: 'allow-extension',
-      external: rollupExternalFromPackage(resolve(__dirname, 'package.json')),
-      output: [rollupOutput('es', 'es'), rollupOutput('cjs', 'lib')]
-    }
-  }
-});