@meethive/components 0.0.1

package/lib/Scrollbar/util.js

@@ -0,0 +1,39 @@
+export const GAP = 4 // top 2 + bottom 2 of bar instance
+
+export const BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top'
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left'
+  }
+} 
+
+export const renderThumbStyle = ({
+  move,
+  size,
+  bar
+}
+
+
+
+) => {
+  return {
+    [bar.size]: size,
+    transform: `translate${bar.axis}(${move}%)`
+  }
+}

package/lib/Search/Item.js

@@ -0,0 +1,239 @@
+ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+import { defineComponent, computed, ref, reactive, watch, isRef } from 'vue'
+import { Select } from 'ant-design-vue'
+import { componentProps, componentType, typeOptions } from './setting'
+import { getTermOptions, getItemDefaultValue } from './util'
+import { useLocaleReceiver } from '../LocaleReciver'
+import { useColumnsMap, useDefaultValue, useOptionMap } from './hooks'
+import { isArray, isFunction } from 'lodash-es'
+import useSearchStyle from './style'
+
+export default defineComponent({
+  name: 'JSearchItem',
+  components: { Select },
+  props: {
+    column: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    termType: {
+      type: String,
+      default: 'like'
+    },
+    type: {
+      type: String,
+      default: 'or'
+    },
+    expand: {
+      type: Boolean,
+      default: false
+    },
+    onlyValue: {
+      type: Boolean,
+      default: true
+    },
+    labelWidth: {
+      type: Number,
+      default: 40
+    },
+    index: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ['update:value', 'update:termType', 'update:type', 'update:column'],
+  setup(props, { emit }) {
+    const termsModel = reactive({
+      type: props.type || 'or',
+      value: props.value || '',
+      termType: props.termType || 'like',
+      column: props.column || undefined
+    })
+
+    const [contextLocale] = useLocaleReceiver('Search')
+    const optionsMap = useOptionMap()
+    const columnsMap = useColumnsMap()
+    const columnsValues = useDefaultValue()
+
+    const targetComponents = ref({})
+    const valueOptions = ref()
+
+    const btwKeys = computed(() => {
+      const record = findItemByColumn()
+      if (record.search.isBtw && Array.isArray(record.search.isBtw)) {
+        return [...record.search.isBtw, 'in', 'nin']
+      }
+      return ['in', 'nin']
+    })
+
+    const prefixCls = computed(() => 'JSearch')
+    const [wrapSSR, hashId] = useSearchStyle(prefixCls)
+
+    const termTypeOptions = computed(() => {
+      const columnTarget = findItemByColumn()
+      const columnSearch = _optionalChain([columnTarget, 'optionalAccess', _ => _.search])
+      let _termsOptions = getTermOptions(targetComponents.value.type, contextLocale.value)
+
+      if (_optionalChain([columnSearch, 'optionalAccess', _2 => _2.termOptions])) {
+        _termsOptions = columnSearch.termOptions
+      } else if (_optionalChain([columnSearch, 'optionalAccess', _3 => _3.termFilter, 'optionalAccess', _4 => _4.length])) {
+        _termsOptions = _termsOptions.filter(
+          (item) => !_optionalChain([columnSearch, 'access', _5 => _5.termFilter, 'optionalAccess', _6 => _6.includes, 'call', _7 => _7(item.value)])
+        )
+      }
+
+      return _termsOptions
+    })
+
+    const columnOptions = computed(() => {
+      return Object.values(columnsMap.value)
+        .sort((a, b) => a._sort_index - b._sort_index)
+        .map((item) => ({ label: item.title, value: item.dataIndex }))
+    })
+
+    const findItemByColumn = () => {
+      return columnsMap.value[termsModel.column ]
+    }
+
+    const findOptionsByColumn = () => {
+      return optionsMap.value[termsModel.column ]
+    }
+
+    /**
+     * 处理options
+     * @param _options
+     */
+    const handleColumnsOptions = async (_options) => {
+      if (isFunction(_options)) {
+        valueOptions.value = await _options()
+        optionsMap.value[props.column ] = [...valueOptions.value]
+      } else if (isArray(_options)) {
+        valueOptions.value = _options
+      } else if (isRef(_options) || (typeof _options === 'object' && 'value' in _options)) {
+        valueOptions.value = _options.value
+      }
+    }
+
+    const onTypeChange = () => {
+      emit('update:type', termsModel.type)
+    }
+
+    const onColumnChange = () => {
+      const record = findItemByColumn()
+      const defaultValue = getItemDefaultValue(record, columnsValues.value)
+
+      // 处理默认选项
+      termsModel.termType = defaultValue.termType
+      // 处理默认值
+      termsModel.value = defaultValue.value
+
+      emit('update:column', termsModel.column)
+      onTermTypeChange()
+      onValueChange()
+    }
+
+    const onTermTypeChange = () => {
+      const isBtw = btwKeys.value.includes(termsModel.termType)
+
+      if (!isBtw && termsModel.value && Array.isArray(termsModel.value)) {
+        termsModel.value = termsModel.value[0]
+        onValueChange()
+      } else if (isBtw && termsModel.value && !Array.isArray(termsModel.value)) {
+        termsModel.value = [termsModel.value]
+        onValueChange()
+      }
+
+      emit('update:termType', termsModel.termType)
+    }
+
+    const onValueChange = () => {
+      emit('update:value', termsModel.value)
+    }
+
+    const handleTermsModelValue = (isBtw) => {
+      if (isBtw) {
+        if (termsModel.value && !Array.isArray(termsModel.value)) {
+          termsModel.value = [termsModel.value]
+        } else if (!termsModel.value) {
+          termsModel.value = []
+        }
+      } else {
+        if (termsModel.value && Array.isArray(termsModel.value)) {
+          termsModel.value = termsModel.value[0]
+        } else if (!termsModel.value) {
+          termsModel.value = undefined 
+        }
+      }
+    }
+
+    watch(
+      () => [targetComponents.value.name, termsModel.termType],
+      () => {
+        const isBtw = btwKeys.value.includes(termsModel.termType)
+
+        if (targetComponents.value.type === componentType.treeSelect) {
+          targetComponents.value.props = {
+            ...targetComponents.value.props,
+            multiple: isBtw
+          }
+          handleTermsModelValue(isBtw)
+        } else if (targetComponents.value.type === componentType.select) {
+          targetComponents.value.props = {
+            ...targetComponents.value.props,
+            mode: isBtw ? 'multiple' : 'combobox'
+          }
+          handleTermsModelValue(isBtw)
+        }
+      },
+      { immediate: true, deep: true }
+    )
+
+    watch(
+      () => [termsModel.column, columnsMap.value],
+      async () => {
+        // 根据column从map中获取record，再解析search属性
+        const record = findItemByColumn()
+        if (!record) return
+
+        const options = findOptionsByColumn()
+        targetComponents.value = componentProps(record.search)
+        targetComponents.value.label = record.title
+
+        //  处理options
+        if (options) {
+          valueOptions.value = options
+        } else {
+          await handleColumnsOptions(record.search.options)
+        }
+      },
+      { immediate: true, deep: true }
+    )
+
+    watch(
+      () => [props.value, props.termType, props.column, props.type],
+      () => {
+        termsModel.value = props.value 
+        termsModel.termType = props.termType
+        termsModel.column = props.column
+        termsModel.type = props.type
+      }
+    )
+
+    return {
+      termsModel,
+      contextLocale,
+      targetComponents,
+      valueOptions,
+      hashId,
+      termTypeOptions,
+      columnOptions,
+      typeOptions,
+      onTypeChange,
+      onColumnChange,
+      onTermTypeChange,
+      onValueChange
+    }
+  }
+})

package/lib/Search/Search.js

@@ -0,0 +1,90 @@
+
+import { defineComponent, reactive, ref, computed, inject, useAttrs } from 'vue'
+import { searchProps } from './setting'
+import { useLocaleReceiver } from '../LocaleReciver'
+import { Button, Col, Form, FormItemRest, Row } from 'ant-design-vue'
+import { SearchConfig } from '../utils/constants'
+import Item from './Item.js'
+import { useHandleColumns, useOptionMapContent } from './hooks'
+import { termsParamsFormat } from './util'
+import useSearchStyle from './style'
+
+export default defineComponent({
+  name: 'JSearch',
+  components: {
+    Button,
+    Col,
+    Form,
+    FormItemRest,
+    Row,
+    Item
+  },
+  inheritAttrs: false,
+  props: {
+    ...searchProps()
+  } ,
+  emits: ['search'],
+  setup(props, { emit, expose }) {
+    const [contextLocale] = useLocaleReceiver('Search')
+    const attrs = useAttrs()
+
+    const columnsOptionMap = ref({}) // 存储每个columnItem的option
+    const terms = reactive({ terms: []  }) // 当前查询条件
+
+    const context = inject(SearchConfig, { align: props.align })
+
+    const { initValues, columnsMap } = useHandleColumns(props, terms)
+
+    const prefixCls = computed(() => 'JSearch')
+    const [wrapSSR, hashId] = useSearchStyle(prefixCls)
+
+    useOptionMapContent(columnsOptionMap)
+
+    const footerStyles = computed(() => {
+      const align = context.align || props.align
+      if (align === 'value') {
+        return { paddingLeft: `${props.labelWidth + 8}px` }
+      }
+      return {}
+    })
+
+    const searchSubmit = () => {
+      emit('search', termsParamsFormat(terms, columnsMap.value, 'low', props.type))
+    }
+
+    const reset = () => {
+      initValues()
+    }
+
+    const handleDefaultValues = (value) => {
+      const isObject = Object.prototype.toString.call(value) === '[object Object]'
+      let _params = isObject
+        ? Object.keys(value).map((key) => ({ column: key, value: value[key], termType: 'eq' }))
+        : [...value]
+
+      terms.terms.forEach((item) => {
+        const paramsItem = _params.find((paramsItem) => paramsItem.column === item.column)
+        if (paramsItem) {
+          item.value = paramsItem.value
+        }
+      })
+
+      emit('search', termsParamsFormat(terms, columnsMap.value))
+    }
+
+    expose({
+      setValues: handleDefaultValues,
+      reset
+    })
+
+    return {
+      contextLocale,
+      attrs,
+      terms,
+      hashId,
+      footerStyles,
+      searchSubmit,
+      reset
+    }
+  }
+})

package/lib/Search/hooks/index.js

@@ -0,0 +1,117 @@
+ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }import { provide, inject, watchEffect, ref, } from 'vue'
+import { getItemDefaultValue } from '../util'
+
+export * from './useSearchItems'
+export * from './useRouteQuery'
+export * from './useTermOptions'
+
+const optionMapKey = Symbol('optionMapKey')
+const columnsMapKey = Symbol('columnMapKey')
+const columnsValues = Symbol('columnsValues')
+
+export const useOptionMapContent = (optionsMap) => {
+  provide(optionMapKey, optionsMap)
+}
+
+export const useOptionMap = () => {
+  return inject(optionMapKey)
+}
+
+export const useColumnsMapContent = (columnsMap) => {
+  provide(columnsMapKey, columnsMap)
+}
+
+export const useColumnsMap = () => {
+  return inject(columnsMapKey)
+}
+
+export const useDefaultValue = () => {
+  return inject(columnsValues)
+}
+
+export const useHandleColumns = (props, terms, options) => {
+  const columnsMap = ref({}) // 存储每个column
+  const defaultCacheValues = ref({})
+
+  useColumnsMapContent(columnsMap)
+
+  /**
+   * 处理search.first为true的排序
+   * @param arr
+   */
+  const moveFirstElementsToFront = (arr) => {
+    // 提取所有 first: true 的元素
+    const firstElements = arr.filter((item) => item.search.first === true)
+    // 提取剩余的元素
+    const otherElements = arr.filter((item) => item.search.first !== true)
+    // 合并并返回
+    return [...firstElements, ...otherElements]
+  }
+
+  /**
+   * 处理默认值
+   * @param arr
+   */
+  const handleDefaultValue = (arr) => {
+    for (const item of arr) {
+      const search = item.search
+      const _data = {
+        defaultValue: undefined,
+        defaultTermType: undefined
+      }
+
+      _data.defaultValue = search.defaultValue
+      _data.defaultTermType = search.defaultTermType
+      defaultCacheValues.value[item.dataIndex] = _data
+    }
+
+    provide(columnsValues, defaultCacheValues)
+  }
+
+  const initValues = () => {
+    const arr = Object.values(columnsMap.value)
+    if (!arr.length) return
+
+    if (_optionalChain([options, 'optionalAccess', _ => _.mode]) === 'advanced') {
+      //  设置第一位
+      terms.terms = [getItemDefaultValue(arr[0], defaultCacheValues.value)]
+    } else {
+      terms.terms = arr.map((item) => {
+        return getItemDefaultValue(item, defaultCacheValues.value)
+      })
+    }
+  }
+
+  const handleColumns = (columns) => {
+    const columnsSearch = columns.filter((item) => {
+      return item.hasOwnProperty('search') && Object.keys(item.search).length
+    })
+
+    // 排序
+    const columnsSort = moveFirstElementsToFront(columnsSearch)
+
+    columnsSort.forEach((item, index) => {
+      columnsMap.value[item.dataIndex] = {
+        ...item,
+        _sort_index: index
+      }
+    })
+
+    handleDefaultValue(columnsSort)
+
+    if (terms.terms.length === 0) {
+      // 高级模式处理数据
+      initValues()
+    }
+  }
+
+  watchEffect(() => {
+    handleColumns(props.columns)
+  })
+
+  return {
+    initValues,
+    columnsMap,
+    defaultCacheValues
+  }
+}

package/lib/Search/hooks/useRouteQuery.js

@@ -0,0 +1,86 @@
+import { customRef, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const _queue = new WeakMap()
+
+export const useRouteQuery = (name) => {
+  const router = useRouter()
+  const route = useRoute()
+
+  const transformGet = (value) => {
+    return value
+  }
+
+  const transformSet = (value) => {
+    return value
+  }
+
+  // 在storybook环境中，router可能为undefined或null，需要进行类型检查
+  if (!router || !route) {
+    // 返回一个模拟的ref，避免在storybook中报错
+    return customRef((track, trigger) => {
+      let value = undefined
+      return {
+        get() {
+          track()
+          return transformGet(value)
+        },
+        set(v) {
+          value = transformSet(v)
+          trigger()
+        }
+      }
+    })
+  }
+
+  if (!_queue.has(router)) _queue.set(router, new Map())
+  const _queriesQueue = _queue.get(router)
+
+  let query = route.query[name]
+  let _trigger
+
+  const proxy = customRef((track, trigger) => {
+    _trigger = trigger
+
+    return {
+      get() {
+        track()
+        return transformGet(query !== undefined ? query : undefined)
+      },
+      set(v) {
+        v = transformSet(v)
+        if (query === v) return
+        query = v === undefined ? undefined : v
+        _queriesQueue.set(name, v === undefined ? undefined : v)
+        trigger()
+
+        nextTick(() => {
+          if (_queriesQueue.size === 0) return
+          const newQueries = Object.fromEntries(_queriesQueue.entries())
+          _queriesQueue.clear()
+
+          const { params, query, hash } = route
+          router.replace({
+            params,
+            query: { ...query, ...newQueries },
+            hash
+          })
+        })
+      }
+    }
+  })
+
+  watch(
+    () => route.query[name],
+    (v) => {
+      if (query === transformGet(v)) return
+      query = v
+      _trigger()
+    },
+    {
+      flush: 'sync'
+    }
+  )
+
+  return proxy
+}

package/lib/Search/hooks/useSearchItems.js

@@ -0,0 +1,50 @@
+ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }import { ref } from 'vue'
+import { sortBy } from 'lodash-es'
+
+const hasDefaultValue = (item) => {
+  return item.defaultValue !== undefined || item.defaultTermType || item.defaultOnceValue
+}
+
+export const useSearchItems = (columns, options) => {
+  const items = ref([])
+  const optionsMap = ref(new Map())
+
+  const handleColumns = () => {
+    const _items = []
+    const values = []
+
+    columns.forEach((item, index) => {
+      const search = item.search
+
+      if (search && Object.keys(search).length) {
+        optionsMap.value.set(item.dataIndex, search)
+
+        if (hasDefaultValue(search)) {
+          const _value = search.defaultValue || search.defaultOnceValue
+          values.push({
+            type: 'and',
+            value: _value,
+            termType: search.defaultTermType || 'like',
+            column: item.dataIndex
+          })
+        }
+
+        _items.push({
+          ...item.search,
+          sortIndex: item.search.first ? 0 : index + 1,
+          column: item.dataIndex
+        })
+      }
+    })
+
+    items.value = sortBy(_items, 'sortIndex')
+    _optionalChain([options, 'optionalAccess', _ => _.getDefaultValue, 'call', _2 => _2(values)])
+  }
+
+  handleColumns()
+
+  return {
+    searchItems: items,
+    searchOptionsMap: optionsMap
+  }
+}

package/lib/Search/hooks/useTermOptions.js

@@ -0,0 +1,29 @@
+ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }import { ref } from 'vue'
+import { TermTypeMap } from '../setting'
+import { useLocaleReceiver } from '../../LocaleReciver'
+
+export const useTermOptions = (options) => {
+  const [contextLocale] = useLocaleReceiver('Search')
+
+  const termTypeMap = TermTypeMap(contextLocale.value)
+  const termsOptionsCache = Object.values(termTypeMap)
+  const termOptions = ref()
+
+  const termsKey = Object.keys(termTypeMap).reduce((previousValue, currentValue) => {
+    previousValue[currentValue] = (termTypeMap )[currentValue].value
+    return previousValue
+  }, {})
+
+  if (_optionalChain([options, 'optionalAccess', _ => _.omit])) {
+    termOptions.value = termsOptionsCache.filter((item) => !options.omit.includes(item.value))
+  } else if (_optionalChain([options, 'optionalAccess', _2 => _2.pick])) {
+    termOptions.value = termsOptionsCache.filter((item) => options.pick.includes(item.value))
+  } else {
+    termOptions.value = [...termsOptionsCache]
+  }
+
+  return {
+    termOptions,
+    termsKey
+  }
+}

package/lib/Search/index.js

@@ -0,0 +1,10 @@
+import Search from './Search.js'
+
+Search.install = function (app) {
+  app.component(Search.name, Search)
+}
+
+export default Search
+export * from './hooks'
+export * from './util'
+export * from './setting'