@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/components/utils/index.ts

@@ -0,0 +1,274 @@
+import { version } from 'element-plus/es/version'
+import type {
+  FieldValueType,
+  RecordType,
+  PlusColumn,
+  PlusRouteRecordRaw
+} from '@wlydfe/pro-ui-types'
+import { get, set } from 'lodash-es'
+import type { SetupContext } from 'vue'
+import { isRef, unref } from 'vue'
+import {
+  isPromise,
+  isFunction,
+  isPlainObject,
+  isEmptyObject,
+  toRawType,
+  isString,
+  isBoolean
+} from './is'
+
+export * from './format'
+export * from './is'
+
+/**
+ * 获取table key
+ * @param item
+ * @returns
+ */
+export const getTableKey = (item: PlusColumn, hasEditable = false) =>
+  hasEditable && isBoolean(item.editable)
+    ? item.label + item.prop + item.editable
+    : item.label + item.prop
+
+/**
+ *  获取tooltip
+ * @param tooltip
+ * @returns
+ */
+export const getTooltip = (tooltip: PlusColumn['tooltip']) => {
+  const tooltipData = unref(tooltip)
+  if (isString(tooltipData)) {
+    return { content: tooltipData }
+  }
+  if (isPlainObject(tooltipData)) {
+    return tooltipData as RecordType
+  }
+  return { content: '' }
+}
+
+const throwError = (data: any, type: string) => {
+  if (!isPlainObject(data)) {
+    throw new Error(`${type} expected Object but got ${toRawType(data)}`)
+  }
+}
+
+/**
+ * 获取自定义的props 支持对象 函数 和 Promise
+ * @param props
+ * @param value
+ * @param row
+ * @returns
+ */
+export const getCustomProps = async (
+  props: RecordType | ((...arg: any) => RecordType | Promise<RecordType>) | undefined,
+  value: FieldValueType | undefined,
+  row: RecordType,
+  index: number,
+  type: 'formItemProps' | 'fieldProps' | 'formProps'
+): Promise<any> => {
+  try {
+    let data: RecordType = {}
+    const params = { row, index }
+
+    if (!props) {
+      data = {}
+    } else if (isRef(props)) {
+      // computed 支持
+      data = props.value as RecordType
+    } else if (isPlainObject(props)) {
+      // object 支持
+      data = { ...props }
+    } else if (isFunction(props)) {
+      // 函数 和  函数返回一个Promise
+      data = await (props as any)(value, params)
+    } else if (isPromise(props)) {
+      // 本身是一个Promise
+      data = await (props as any)
+    } else {
+      data = props
+    }
+
+    throwError(data, type)
+
+    return data
+  } catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+/**
+ * 处理slots
+ */
+export const handleSlots = (
+  slots: PlusColumn['slots'],
+  value: FieldValueType | undefined,
+  params: RecordType
+) => {
+  /** `
+   * `不存在` 或者 `不是对象` 或者  `对象为空 ` 全部返回空对象
+   */
+  if (!slots || !isPlainObject(slots) || isEmptyObject(slots)) {
+    return {}
+  }
+  const slotsRes: RecordType = {}
+  if (slots && !isEmptyObject(slots)) {
+    Object.keys(slots).forEach(key => {
+      const temp = (...arg: any) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return () => slots[key](...arg)
+      }
+      slotsRes[key] = temp(value, params)
+    })
+  }
+  return slotsRes
+}
+
+/**
+ * 处理slot名称
+ */
+export const getSlotName = (type: string, prop?: string | number) => {
+  return prop ? `plus-${type}-${prop}` : `plus-${type}`
+}
+
+/**
+ * 处理form-item中的slot名称
+ */
+export const getFieldSlotName = (prop?: string | number) => {
+  return `${getSlotName('field', prop)}`
+}
+
+/**
+ *   处理form-item中的label slot名称
+ */
+export const getLabelSlotName = (prop?: string | number) => {
+  return `${getSlotName('label', prop)}`
+}
+/**
+ *   处理form-item中的 extra slot名称
+ */
+export const getExtraSlotName = (prop?: string | number) => {
+  return `${getSlotName('extra', prop)}`
+}
+/**
+ *   处理form-item中的 previous slot名称
+ */
+export const getPreviousSlotName = (prop?: string | number) => {
+  return `${getSlotName('previous', prop)}`
+}
+/**
+ *   处理form中的 每一步分组的 slot名称
+ */
+export const getFormGroupSlotName = (prop?: string | number) => {
+  return `${getSlotName('group', prop)}`
+}
+
+/**
+ * 处理table中的 header slot名称
+ */
+export const getTableHeaderSlotName = (prop?: string | number) => {
+  return `${getSlotName('header', prop)}`
+}
+
+/**
+ * 处理table中的 cell slot名称
+ */
+export const getTableCellSlotName = (prop?: string | number) => {
+  return `${getSlotName('cell', prop)}`
+}
+/**
+ * 处理el-descriptions-item 的  slot名称
+ */
+export const getDescSlotName = (prop?: string | number) => {
+  return `${getSlotName('desc', prop)}`
+}
+/**
+ * 处理el-descriptions-item  label的  slot名称
+ */
+export const getDescLabelSlotName = (prop?: string | number) => {
+  return `${getSlotName('desc-label', prop)}`
+}
+
+/**
+ * 过滤slots
+ * @param slots
+ * @param name
+ * @returns
+ */
+export const filterSlots = (slots: RecordType, name: string): SetupContext['slots'] => {
+  const data: RecordType = {}
+  Object.keys(slots || {}).forEach(key => {
+    if (key.startsWith(name)) {
+      data[key] = slots[key]
+    }
+  })
+
+  return data
+}
+
+/**
+ *  获取值  支持 x.y.z
+ * @param target
+ * @param key
+ * @returns
+ */
+export const getValue = (target: RecordType, key: string) => {
+  return get(target, key)
+}
+
+/**
+ *  设置值  支持 x.y.z
+ * @param target
+ * @param key
+ * @returns
+ */
+export const setValue = (target: RecordType, key: string, value: any) => {
+  return set(target, key, value)
+}
+
+/**
+ * 版本比较
+ * @param version1
+ * @param version2
+ * @returns
+ */
+export const compareVersion = (version1: string, version2: string) => {
+  const arr1 = version1.split('.').map(item => Number(item))
+  const arr2 = version2.split('.').map(item => Number(item))
+  const length = Math.max(arr1.length, arr2.length)
+  for (let i = 0; i < length; i++) {
+    if ((arr1[i] || 0) > (arr2[i] || 0)) return 1
+    if ((arr1[i] || 0) < (arr2[i] || 0)) return -1
+  }
+  return 0
+}
+
+/**
+ * element-plus版本号是否小于'2.6.0'
+ */
+export const versionIsLessThan260 = compareVersion(version, '2.6.0') < 0
+/**
+ * element-plus版本号是否小于'2.9.9'
+ */
+export const versionIsLessThan299 = compareVersion(version, '2.9.9') < 0
+
+/**
+ * 获取label
+ * @param label
+ * @returns
+ */
+export const getLabel = (label: PlusColumn['label']) => (label ? unref(label) : '')
+
+/**
+ * 移除children字段
+ * @param item *
+ * @version 0.1.21
+ * @fixed https://github.com/plus-pro-components/plus-pro-components/issues/258
+ */
+export const removeChildrenField = (item: PlusRouteRecordRaw) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, ...rest } = item
+  const data = { ...rest, __children: children }
+  return data
+}

package/packages/components/utils/is.ts

@@ -0,0 +1,141 @@
+/**
+ * Object.prototype.toString 别名
+ */
+export const objectToString = Object.prototype.toString
+
+/**
+ * 获取类型
+ * @param value
+ * @returns
+ */
+export const toTypeString = (value: any) => objectToString.call(value)
+
+/**
+ * 拿到类型字符串
+ * @param value
+ * @returns
+ */
+export const toRawType = (value: any) => {
+  return toTypeString(value).slice(8, -1)
+}
+
+/**
+ * 判断是否是数组
+ */
+export const isArray = Array.isArray
+
+/**
+ * 判断是否是Map
+ * @param val
+ * @returns
+ */
+export const isMap = (val: any): val is Map<any, any> => toTypeString(val) === '[object Map]'
+
+/**
+ * 判断是否是Set
+ * @param val
+ * @returns
+ */
+export const isSet = (val: any): val is Set<any> => toTypeString(val) === '[object Set]'
+
+/**
+ * 判断是否是Date
+ * @param val
+ * @returns
+ */
+export const isDate = (val: any): val is Date => toTypeString(val) === '[object Date]'
+
+/**
+ * 判断是否是Reg
+ * @param val
+ * @returns
+ */
+export const isRegExp = (val: any): val is RegExp => toTypeString(val) === '[object RegExp]'
+
+/**
+ * 判断是否是函数
+ * @param val
+ * @returns
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const isFunction = (val: any): val is Function => typeof val === 'function'
+
+/**
+ * 判断是否是字符串
+ * @param val
+ * @returns
+ */
+export const isString = (val: any): val is string => typeof val === 'string'
+
+/**
+ * 判断是否是Symbol
+ * @param val
+ * @returns
+ */
+export const isSymbol = (val: any): val is symbol => typeof val === 'symbol'
+
+/**
+ * 判断是否是boolean
+ * @param val
+ * @returns
+ */
+export const isBoolean = (val: any): val is boolean => typeof val === 'boolean'
+
+/**
+ * 判断是否是object
+ * @param val
+ * @returns
+ */
+export const isObject = (val: any): val is Record<keyof any, any> =>
+  val !== null && typeof val === 'object'
+
+/**
+ * 判断是否是Promise
+ * @param val
+ * @returns
+ */
+export const isPromise = <T = any>(val: any): val is Promise<T> => {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
+}
+
+/**
+ * 判断是否是 纯对象 object
+ * @param val
+ * @returns
+ */
+export const isPlainObject = (val: any): val is Record<keyof any, any> =>
+  toTypeString(val) === '[object Object]'
+
+/**
+ * 是否是空对象
+ * @param val
+ * @returns
+ */
+export const isEmptyObject = (val: any): val is Record<keyof any, any> =>
+  isPlainObject(val) && Object.keys(val).length === 0
+
+/**
+ * 是否是链接
+ * @param url
+ * @returns
+ */
+export function isUrl(url: string): url is string {
+  const regex = new RegExp(
+    '^(https?:\\/\\/)?' + // protocol
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+      '(\\#[-a-z\\d_]*)?$',
+    'i'
+  )
+  return regex.test(url)
+}
+
+/**
+ * 是否是SVGElement
+ * @param tag
+ * @returns
+ */
+export const isSVGElement = (tag: any): tag is SVGElement =>
+  typeof SVGElement !== 'undefined' && tag instanceof SVGElement

package/packages/constants/display-item.ts

@@ -0,0 +1,10 @@
+/**
+ * 需要显示成label的valueType列表
+ */
+export const selectValueTypeList: (string | undefined)[] = [
+  'select',
+  'radio',
+  'checkbox',
+  'select-v2',
+  'plus-radio'
+]

package/packages/constants/form.ts

@@ -0,0 +1,41 @@
+/**
+ * 表格里表单的provide(inject) key
+ */
+export const TableFormRefInjectionKey = Symbol('tableFormRefInjectionKey')
+
+/**
+ * 表格里表单每一项 的provide(inject) key
+ */
+export const TableFormFieldRefInjectionKey = Symbol('tableFormFieldRefInjectionKey')
+
+/**
+ * 表格里表单 表格行信息 provide(inject) key
+ */
+export const TableFormRowInfoInjectionKey = Symbol('tableFormRowInfoInjectionKey')
+
+/**
+ *  表单ElDatePicker 组件 值是数组的type列表
+ */
+export const DatePickerValueIsArrayList = ['datetimerange', 'daterange', 'monthrange']
+
+/**
+ * 表单组件值是数字类型的valueType列表
+ */
+export const ValueIsNumberList = ['rate', 'input-number', 'slider']
+
+/**
+ * 表单组件值是布尔类型的valueType列表
+ */
+
+export const ValueIsBooleanList = ['switch']
+
+/**
+ *  表单组件值是数组的valueType列表
+ */
+export const ValueIsArrayList = [
+  'checkbox',
+  'cascader',
+  'plus-date-picker',
+  'plus-input-tag',
+  'transfer'
+]

package/packages/constants/index.ts

@@ -0,0 +1,3 @@
+export * from './page'
+export * from './form'
+export * from './display-item'

package/packages/constants/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@wlydfe/pro-ui-constants",
+  "version": "0.0.1",
+  "private": true,
+  "license": "MIT",
+  "main": "index.ts"
+}

package/packages/constants/page.ts

@@ -0,0 +1,14 @@
+import type { PageInfo } from '@wlydfe/pro-ui-types'
+
+/**
+ *默认的分页列表
+ */
+export const DefaultPageSizeList: number[] = [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
+
+/**
+ * 默认的分页参数
+ */
+export const DefaultPageInfo: PageInfo = {
+  page: 1,
+  pageSize: 20
+}

package/packages/directives/click/index.ts

@@ -0,0 +1,66 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import { watch } from 'vue'
+import { useClickControl } from './useClickControl'
+import { CLICK_CONST } from './type'
+
+export interface ClickElement extends HTMLElement {
+  _clickHandler?: (event: Event) => void
+  _clickControl?: ReturnType<typeof useClickControl>
+}
+
+export const click: Directive = {
+  mounted(el: ClickElement, binding: DirectiveBinding) {
+    const handler = binding.value
+    if (!handler) {
+      console.warn(CLICK_CONST.ERROR_MESSAGE.NO_HANDLER)
+      return
+    }
+
+    // 获取配置
+    const delay = Object.keys(binding.modifiers).find(key => /^\d+$/.test(key))
+    const mode = binding.modifiers[CLICK_CONST.MODIFIERS.DEBOUNCE]
+      ? CLICK_CONST.MODIFIERS.DEBOUNCE
+      : CLICK_CONST.MODIFIERS.THROTTLE
+
+    // 创建点击控制实例
+    el._clickControl = useClickControl()
+
+    // 创建点击处理函数
+    el._clickHandler = (event: Event) => {
+      el._clickControl?.executeHandler(() => handler(event), {
+        delay: delay ? parseInt(delay) : undefined,
+        mode
+      })
+    }
+
+    // 添加点击事件监听
+    el.addEventListener('click', el._clickHandler)
+
+    // 添加 loading 类
+    const unwatch = watch(
+      () => el._clickControl?.isProcessing.value,
+      isProcessing => {
+        if (isProcessing) {
+          el.classList.add('is-clicking')
+        } else {
+          el.classList.remove('is-clicking')
+        }
+      }
+    )
+
+    // 保存 unwatch 函数以便后续清理
+    ;(el as any)._unwatchLoading = unwatch
+  },
+
+  unmounted(el: ClickElement) {
+    if (el._clickHandler) {
+      el.removeEventListener('click', el._clickHandler)
+    }
+    if (el._clickControl) {
+      el._clickControl.cleanup()
+    }
+    if ((el as any)._unwatchLoading) {
+      ;(el as any)._unwatchLoading()
+    }
+  }
+}

package/packages/directives/click/type.ts

@@ -0,0 +1,17 @@
+export const CLICK_CONST = {
+  MODIFIERS: {
+    DEBOUNCE: 'debounce',
+    THROTTLE: 'throttle'
+  },
+  DEFAULT: {
+    DELAY: 300,
+    MODE: 'throttle'
+  },
+  ERROR_MESSAGE: {
+    NO_HANDLER: '[v-click] handler is required',
+    INVALID_HANDLER: '[v-click] handler must be a function',
+    INVALID_DELAY: '[v-click] delay must be a positive number'
+  }
+} as const
+
+export type ClickMode = (typeof CLICK_CONST.MODIFIERS)[keyof typeof CLICK_CONST.MODIFIERS]

package/packages/directives/click/useClickControl.ts

@@ -0,0 +1,96 @@
+import { ref } from 'vue'
+import { CLICK_CONST } from './type'
+import type { ClickMode } from './type'
+
+interface ClickControlOptions {
+  delay?: number
+  mode?: ClickMode
+}
+
+export function useClickControl() {
+  const isProcessing = ref(false)
+  const lastInvokeTime = ref(0)
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  function isPromise(value: unknown): value is Promise<unknown> {
+    return (
+      value !== null &&
+      (typeof value === 'object' || typeof value === 'function') &&
+      typeof (value as Promise<unknown>).then === 'function'
+    )
+  }
+
+  const executeHandler = async <T extends (...args: any[]) => any>(
+    handler: T,
+    options: ClickControlOptions = {}
+  ) => {
+    const now = Date.now()
+    const { delay = CLICK_CONST.DEFAULT.DELAY, mode = CLICK_CONST.DEFAULT.MODE } = options
+
+    // 如果正在处理异步操作，直接返回
+    if (isProcessing.value) {
+      return
+    }
+
+    // 第一次点击，直接执行
+    if (!lastInvokeTime.value) {
+      lastInvokeTime.value = now
+      const result = handler()
+      if (isPromise(result)) {
+        try {
+          isProcessing.value = true
+          await result
+        } finally {
+          isProcessing.value = false
+        }
+      }
+      return
+    }
+
+    // 后续点击根据模式处理
+    if (mode === 'throttle') {
+      if (now - lastInvokeTime.value >= delay) {
+        lastInvokeTime.value = now
+        const result = handler()
+        if (isPromise(result)) {
+          try {
+            isProcessing.value = true
+            await result
+          } finally {
+            isProcessing.value = false
+          }
+        }
+      }
+    } else {
+      if (timer) {
+        clearTimeout(timer)
+      }
+      timer = setTimeout(async () => {
+        lastInvokeTime.value = Date.now()
+        const result = handler()
+        if (isPromise(result)) {
+          try {
+            isProcessing.value = true
+            await result
+          } finally {
+            isProcessing.value = false
+          }
+        }
+      }, delay)
+    }
+  }
+
+  const cleanup = () => {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    isProcessing.value = false
+    lastInvokeTime.value = 0
+  }
+
+  return {
+    executeHandler,
+    isProcessing,
+    cleanup
+  }
+}

package/packages/directives/index.ts

@@ -0,0 +1 @@
+export * from './click'

package/packages/directives/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@wlydfe/pro-ui-directives",
+  "version": "0.0.1",
+  "private": true,
+  "main": "index.ts",
+  "description": "wlyd 万联易达 UI 指令库",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/eslint-config/build.config.ts

@@ -0,0 +1,16 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: ['./src/index'],
+  clean: true,
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+    dts: {
+      respectExternal: true
+    },
+    esbuild: {
+      minify: false
+    }
+  }
+})