@meethive/components 0.0.1

package/lib/Search/util.js

@@ -0,0 +1,270 @@
+ 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 { cloneDeep, isArray, isFunction, isString, omit } from 'lodash-es'
+import { termType } from './setting'
+
+/**
+ * 处理like，nlike特殊值
+ * @param v
+ */
+export const handleLikeValue = (v) => {
+  if (isString(v)) {
+    return v.split('').reduce((pre, next) => {
+      let _next = next
+      if (next === '\\') {
+        _next = '\\\\'
+      } else if (next === '%') {
+        _next = '\\%'
+      }
+      return pre + _next
+    }, '')
+  }
+  return v
+}
+
+const handleItemValue = (item, columnOptionMap) => {
+  const _item = columnOptionMap[item.column].search
+  if (_item === null || _item === '' || _item === undefined) return item
+
+  if (_item.rename) {
+    item.column = _item.rename
+  }
+
+  if (_item.handleValue && isFunction(_item.handleValue)) {
+    item.value = _item.handleValue(item.value, item)
+  }
+
+  if (['like', 'nlike'].includes(item.termType) && !!item.value) {
+    item.value = `%${handleLikeValue(item.value)}%`
+  }
+
+  if (_item.handleTerms && isFunction(_item.handleTerms)) {
+    return _item.handleTerms(item)
+  }
+
+  return item
+}
+
+const isEmpty = (v) => {
+  return v === undefined || v === null || v === '' || (isArray(v) && v.length === 0)
+}
+
+const isFilterItem = (item) => {
+  return !isEmpty(item.value) && item.column !== undefined
+}
+
+/**
+ * 处理为外部使用
+ * @terms {Array} 表单数据
+ * @columnOptionMap {Map} column的Map对象
+ */
+export const termsParamsFormat = (
+  terms,
+  columnOptionMap,
+  type = 'adv',
+  dataFormat = 'terms'
+) => {
+  // 过滤掉terms中value无效的item
+  const cloneParams = cloneDeep(terms.terms)
+  const handleParamsValue = cloneParams.map((item) => {
+    return omit(handleItemValue(item, columnOptionMap), ['_span'])
+  })
+  const filterParams = handleParamsValue.filter(isFilterItem)
+
+  if (dataFormat === 'terms') {
+    // terms格式
+    // 过滤，并处理值
+    if (type === 'adv') {
+      if (cloneParams.length > 1) {
+        // 拓展开
+        const array_A = handleParamsValue.slice(0, 3).filter(isFilterItem)
+        const array_B = handleParamsValue.slice(3, 6).filter(isFilterItem)
+        const _terms = []
+
+        if (array_A.length > 0) {
+          _terms.push({
+            terms: array_A
+          })
+        }
+
+        if (array_B.length > 0) {
+          _terms.push({
+            terms: array_B,
+            type: handleParamsValue[3].type
+          })
+        }
+
+        return {
+          terms: _terms
+        }
+      }
+
+      return {
+        terms: [
+          {
+            terms: filterParams
+          }
+        ]
+      }
+    }
+
+    return filterParams
+  }
+
+  // dataFormat === 'object'
+  return filterParams.reduce((pre, item) => {
+    pre[item.column] = item
+    return pre
+  }, {})
+}
+
+/**
+ * TreeSelect过滤
+ * @param value 过滤值
+ * @param treeNode
+ * @param key
+ */
+export const filterTreeSelectNode = (value, treeNode, key = 'name') => {
+  return _optionalChain([treeNode, 'access', _ => _[key], 'optionalAccess', _2 => _2.includes, 'call', _3 => _3(value)])
+}
+
+/**
+ * Select过滤
+ * @param value 过滤值
+ * @param option
+ * @param key
+ */
+export const filterSelectNode = (value, option, key = 'label') => {
+  return _optionalChain([option, 'access', _4 => _4[key], 'optionalAccess', _5 => _5.includes, 'call', _6 => _6(value)])
+}
+
+export const hasExpand = (terms) => {
+  let itemCount = 0
+  terms.forEach((a) => {
+    a.terms.forEach((b) => {
+      if (b) {
+        itemCount += 1
+      }
+    })
+  })
+  return itemCount >= 2
+}
+
+function shouldExpand(a, b) {
+  const isAFirstHasValue = a[0] !== null && a[0] !== undefined
+  const isARestNull = a.slice(1).every((item) => item === null || item === undefined)
+  const isBAllNull = b.every((item) => item === null || item === undefined)
+  return !(isAFirstHasValue && isARestNull && isBAllNull)
+}
+
+export const compatibleOldTerms = (q, columnsMap, defaultCacheValues) => {
+  try {
+    const terms = JSON.parse(q || '{}')
+
+    if (terms.terms.length === 2) {
+      const expand = shouldExpand(terms.terms[0].terms, terms.terms[1].terms)
+      let _terms = []
+
+      if (!expand) {
+        _terms = [terms.terms[0].terms[0]]
+      } else {
+        _terms = [...terms.terms[0].terms, ...terms.terms[1].terms]
+        // 重新
+        const arr = Object.values(columnsMap)
+        for (let i = 0; i < _terms.length; i++) {
+          if (_terms[i] === null) {
+            const indexIn = i % arr.length
+            const obj = getItemDefaultValue(arr[indexIn], defaultCacheValues)
+            if (i === 3) {
+              obj.type = terms.terms[1].type
+            }
+            _terms[i] = obj
+          }
+        }
+      }
+
+      return {
+        terms: _terms,
+        expand
+      }
+    } else {
+      const hasTermsKey = Reflect.has(terms.terms[0], 'terms') // 兼容历史数据
+      return {
+        terms: hasTermsKey ? terms.terms[0].terms : terms.terms,
+        expand: terms.terms.length > 1
+      }
+    }
+  } catch (e) {
+    console.warn('[Pro Search Error] > ', e)
+    return {
+      terms: [],
+      expand: false
+    }
+  }
+}
+
+export const getTermTypeFn = (type) => {
+  switch (type) {
+    case 'select':
+    case 'treeSelect':
+    case 'number':
+      return 'eq'
+    case 'date':
+    case 'time':
+      return 'gt'
+    case 'timeRange':
+    case 'rangePicker':
+      return 'btw'
+    default:
+      return 'like'
+  }
+}
+
+export const getTermTypes = (types, locale) => {
+  const termTypes = termType(locale)
+  return types.map((code) => {
+    return termTypes.find((item) => item.value === code)
+  })
+}
+
+export const getTermOptions = (type, locale) => {
+  let keys = []
+
+  switch (type) {
+    case 'select':
+    case 'treeSelect':
+      keys = ['not', 'eq', 'in', 'nin']
+      break
+    case 'time':
+    case 'date':
+      keys = ['gt', 'lt', 'gte', 'lte']
+      break
+    case 'timeRange':
+    case 'rangePicker':
+      keys = ['btw', 'nbtw']
+      break
+    case 'number':
+      keys = ['eq', 'not', 'gt', 'lt', 'gte', 'lte']
+      break
+    default:
+      keys = ['like', 'nlike', 'eq', 'not']
+      break
+  }
+
+  return keys.length ? getTermTypes(keys, locale) : termType(locale)
+}
+
+/**
+ * 获取单项默认值，仅初始化使用
+ * @param record
+ * @param defaultCacheValues
+ */
+export const getItemDefaultValue = (record, defaultCacheValues) => {
+  const defaultValue = { ...defaultCacheValues[record.dataIndex] }
+
+  return {
+    column: record.dataIndex,
+    termType: defaultValue.defaultTermType || getTermTypeFn(record.search.type),
+    value: defaultValue.defaultValue,
+    type: 'or',
+    _span: record.search.span
+  }
+}

package/lib/Skeleton/Skeleton.js

@@ -0,0 +1,27 @@
+
+import { defineComponent, computed } from 'vue'
+import Item from './components/Item.js'
+import useSkeletonStyle from './style'
+
+export default defineComponent({
+  name: 'JSkeleton',
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    return {
+      hashId
+    }
+  }
+})

package/lib/Skeleton/components/DashBoardCard.js

@@ -0,0 +1,27 @@
+
+import { defineComponent, computed } from 'vue'
+import Item from './Item.js'
+import useSkeletonStyle from '../style'
+
+export default defineComponent({
+  name: 'JSkeletonDashboardCard',
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    return {
+      hashId
+    }
+  }
+})

package/lib/Skeleton/components/DashBoardChart.js

@@ -0,0 +1,27 @@
+
+import { defineComponent, computed } from 'vue'
+import Item from './Item.js'
+import useSkeletonStyle from '../style'
+
+export default defineComponent({
+  name: 'JSkeletonDashboardChart',
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    return {
+      hashId
+    }
+  }
+})

package/lib/Skeleton/components/Detail.js

@@ -0,0 +1,27 @@
+
+import { defineComponent, computed } from 'vue'
+import Item from './Item.js'
+import useSkeletonStyle from '../style'
+
+export default defineComponent({
+  name: 'JSkeletonDetail',
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    return {
+      hashId
+    }
+  }
+})

package/lib/Skeleton/components/Drawer.js

@@ -0,0 +1,27 @@
+
+import { defineComponent, computed } from 'vue'
+import Item from './Item.js'
+import useSkeletonStyle from '../style'
+
+export default defineComponent({
+  name: 'JSkeletonDrawer',
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    return {
+      hashId
+    }
+  }
+})

package/lib/Skeleton/components/Item.js

@@ -0,0 +1,54 @@
+
+import { defineComponent, computed } from 'vue'
+import useSkeletonStyle from '../style'
+
+export default defineComponent({
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: [String, Number],
+      default: 'default'
+    },
+    width: {
+      type: [String, Number],
+      default: '100%'
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    const _className = computed(() => {
+      const { active, size } = props
+      return {
+        'j-skeleton-item': true,
+        'j-skeleton-item-active': active,
+        'j-skeleton-item-lg': size === 'large',
+        'j-skeleton-item-sm': size === 'small',
+        [hashId.value]: true
+      }
+    })
+
+    const sizeStyle = computed(() => {
+      const { size, width } = props
+      if (typeof size === 'number') {
+        return {
+          height: `${size}px`,
+          width: `${width}px`
+        }
+      } else {
+        return {
+          width: typeof size === 'number' ? `${width}px` : width
+        }
+      }
+    })
+
+    return {
+      _className,
+      sizeStyle
+    }
+  }
+})

package/lib/Skeleton/components/List.js

@@ -0,0 +1,27 @@
+
+import { defineComponent } from 'vue'
+import ListCard from './ListCard.js'
+import ListTable from './ListTable.js'
+import Search from './Search.js'
+
+export default defineComponent({
+  name: 'JSkeletonList',
+  components: { ListCard, ListTable, Search },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    mode: {
+      type: [String, undefined] ,
+      default: 'TABLE'
+    }
+  },
+  setup(props) {
+    return {}
+  }
+})

package/lib/Skeleton/components/ListCard.js

@@ -0,0 +1,28 @@
+
+import { defineComponent, computed } from 'vue'
+import Item from './Item.js'
+import ListCardItem from './ListCardItem.js'
+import useSkeletonStyle from '../style'
+
+export default defineComponent({
+  name: 'JSkeletonListCard',
+  components: { Item, ListCardItem },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    return {
+      hashId
+    }
+  }
+})

package/lib/Skeleton/components/ListCardItem.js

@@ -0,0 +1,20 @@
+
+import { defineComponent } from 'vue'
+import Item from './Item.js'
+
+export default defineComponent({
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    return {}
+  }
+})

package/lib/Skeleton/components/ListTable.js

@@ -0,0 +1,27 @@
+
+import { defineComponent, computed } from 'vue'
+import Item from './Item.js'
+import useSkeletonStyle from '../style'
+
+export default defineComponent({
+  name: 'JSkeletonListTable',
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    return {
+      hashId
+    }
+  }
+})

package/lib/Skeleton/components/Page.js

@@ -0,0 +1,26 @@
+
+import { defineComponent } from 'vue'
+import List from './List.js'
+import Detail from './Detail.js'
+
+export default defineComponent({
+  name: 'JSkeletonPage',
+  components: { List, Detail },
+  props: {
+    type: {
+      type: String,
+      default: 'list' // detail
+    },
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    return {}
+  }
+})

package/lib/Skeleton/components/Search.js

@@ -0,0 +1,16 @@
+
+import { defineComponent } from 'vue'
+import Item from './Item.js'
+
+export default defineComponent({
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    return {}
+  }
+})

package/lib/Skeleton/components/Tree.js

@@ -0,0 +1,27 @@
+
+import { defineComponent, computed } from 'vue'
+import Item from './Item.js'
+import useSkeletonStyle from '../style'
+
+export default defineComponent({
+  name: 'JSkeletonTree',
+  components: { Item },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-skeleton')
+    const [wrapSSR, hashId] = useSkeletonStyle(prefixCls)
+
+    return {
+      hashId
+    }
+  }
+})

package/lib/Skeleton/index.js

@@ -0,0 +1,28 @@
+import JSkeletonListTable from './components/ListTable.js'
+import JSkeletonListCard from './components/ListCard.js'
+import JSkeletonTree from './components/Tree.js'
+import JSkeletonDetail from './components/Detail.js'
+import JSkeletonDrawer from './components/Drawer.js'
+import JSkeletonDashboardCard from './components/DashBoardCard.js'
+import JSkeletonDashboardChart from './components/DashBoardChart.js'
+import JSkeletonList from './components/List.js'
+import JSkeletonPage from './components/Page.js'
+import Skeleton from './Skeleton.js'
+
+export {
+  JSkeletonDashboardCard,
+  JSkeletonDashboardChart,
+  JSkeletonListTable,
+  JSkeletonListCard,
+  JSkeletonPage,
+  JSkeletonTree,
+  JSkeletonDetail,
+  JSkeletonDrawer,
+  JSkeletonList
+}
+
+Skeleton.install = function (app) {
+  app.component(Skeleton.name , Skeleton)
+}
+
+export default Skeleton