@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/types/global.ts

@@ -0,0 +1,34 @@
+import type { Mutable } from 'element-plus/es/utils'
+
+export {}
+/**
+ * ref 绑定的元素类型
+ */
+export type ElementRefType = HTMLElement | null
+
+/**
+ * setTimeout 类型
+ */
+export type Timeout = ReturnType<typeof setTimeout>
+
+/**
+ * setInterval 类型
+ */
+export type Interval = ReturnType<typeof setInterval>
+
+/**
+ * 普通的对象的泛型
+ */
+export type RecordType = {
+  [index: keyof any]: any
+}
+
+/**
+ * 允许null的泛型
+ */
+export type Nullable<T> = T | null
+
+/**
+ * 去除只读状态
+ */
+export { Mutable }

package/packages/types/index.ts

@@ -0,0 +1,5 @@
+export * from './global'
+export * from './plus'
+export * from './form'
+export * from './table'
+export * from './layout'

package/packages/types/layout.ts

@@ -0,0 +1,43 @@
+import type { RouteRecordRaw } from 'vue-router'
+import type { VNode, Component } from 'vue'
+/**
+ * 路由配置类型
+ *
+ * @description 继承自 vue-router 的 RouteRecordRaw，无侵入，仅仅只扩展 meta，meta除了扩展的属性外，同时支持添加任意自定义属性，
+ * 外链的话  path给   '/'+链接   例： `/https://element-plus.org`
+ *
+ */
+export type PlusRouteRecordRaw = Partial<Omit<RouteRecordRaw, 'children'>> & {
+  /**
+   * meta除了扩展的属性外，同时支持添加任意自定义属性
+   *
+   */
+  meta?: {
+    /**
+     * 页面标题   标题存在面包屑和菜单名称显示标题  不存在显示路由的 name  name不存在显示路由的 path
+     */
+    title?: string
+    /**
+     * 图标
+     */
+    icon?: Component | VNode | ((route: PlusRouteRecordRaw) => VNode)
+    /**
+     * 排序，默认为0 只对第一级有效
+     */
+    sort?: number
+    /**
+     * 在侧边栏菜单中隐藏，默认false 不隐藏
+     */
+    hideInMenu?: boolean
+    /**
+     * 隐藏面包屑，默认false 不隐藏
+     */
+    hideInBreadcrumb?: boolean
+    /**
+     * 菜单是否禁用
+     * @see https://element-plus.org/zh-CN/component/menu.html#menu-item-attributes
+     */
+    disabled?: boolean
+  }
+  children?: PlusRouteRecordRaw[]
+}

package/packages/types/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@wlydfe/pro-ui-types",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "main": "index.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/packages/types/plus.ts

@@ -0,0 +1,283 @@
+import type { ElTooltipProps, ButtonType } from 'element-plus'
+import type { VNode, Ref, ComputedRef, Component } from 'vue'
+import type { RecordType } from './global'
+import type { TableValueType, TableColumnProps } from './table'
+import type { FormItemValueType, FormColumnProps, FieldValueType } from './form'
+
+export {}
+
+/**
+ * 渲染函数的返回值的类型
+ */
+export type RenderTypes = string | VNode | JSX.Element | Component
+
+/**
+ * 分页参数
+ */
+export interface PageInfo {
+  /**
+   * 默认为1
+   */
+  page: number
+  /**
+   * 默认为10
+   */
+  pageSize: number
+}
+
+/**
+ *  自定义props类型  支持对象object，computed，函数和Promise
+ */
+export type PropsItemType<T extends Record<string, any> = any> =
+  | Partial<T>
+  | ComputedRef<Partial<T>>
+  | ((
+      value: FieldValueType,
+      data: {
+        row: Record<string, any>
+        index: number
+      }
+    ) => Partial<T> | Promise<Partial<T>>)
+  | Promise<Partial<T>>
+
+/**
+ * 选择框类型
+ */
+export interface OptionsRow<T = undefined> {
+  /**
+   * @version v0.1.15 新增索引类型，用来支持optionsMap  @see /components/config.html
+   */
+  [index: keyof any]: any
+  /**
+   * @version v0.1.15 变更为可选，用来支持optionsMap  @see /components/config.html
+   */
+  label?: number | string
+  /**
+   * @version v0.1.7 新增 RecordType 类型
+   * @version v0.1.15 变更为可选，用来支持optionsMap  @see /components/config.html
+   */
+  value?: Exclude<number | string | boolean | RecordType, T>
+  /**
+   * 小圆点背景色，仅在表格和描述列表中生效
+   * color 优先级 高于 type
+   */
+  color?: string
+  /**
+   * 小圆点颜色类型，仅在表格和描述列表中生效
+   * type 优先级 低于 color，
+   * 只支持 'success' | 'warning' | 'info' | 'primary' | 'danger'
+   */
+  type?: Exclude<ButtonType, 'default' | 'text' | ''>
+  /**
+   * 表单子项的props  如 el-checkbox-group下的el-checkbox的props
+   * @version v0.1.25 新增函数类型支持 ((item: OptionsRow) => RecordType)
+   */
+  fieldItemProps?: RecordType | ((item: OptionsRow) => RecordType)
+  /**
+   * el-checkbox-group下的，每一项el-checkbox的各自插槽(即el-checkbox的default插槽)。
+   * el-radio-group下的，每一项el-checkbox的内容各自插槽(即el-radio的default插槽)。
+   * el-select下的，每一项el-option的内容整体插槽(即el-option的default插槽)。
+   *
+   * @see https://element-plus.org/zh-CN/component/checkbox.html#checkbox-slots
+   * @see https://element-plus.org/zh-CN/component/radio.html#radio-slots
+   */
+  fieldSlot?: (option?: OptionsRow) => RenderTypes
+  /**
+   * 子选项，仅valueType 为 `cascader` 时生效
+   */
+  children?: OptionsRow[]
+}
+/**
+ * 选择类型   支持数组，computed，函数和Promise
+ */
+export type OptionsType =
+  | OptionsRow[]
+  | ComputedRef<OptionsRow[]>
+  | ((props?: PlusColumn) => OptionsRow[] | Promise<OptionsRow[]>)
+  | Promise<OptionsRow[]>
+/**
+ * 共享类型
+ */
+export interface CommonType {
+  [index: string]: any
+  /**
+   * 表格表头显示的标题 ；在form 中是 el-form-item的label；在descriptions 是 el-descriptions-item的label；
+   *  @version v0.0.10 修改为可选
+   *  @version v0.1.0 类型新增ComputedRef<string>
+   */
+  label?: string | ComputedRef<string>
+  /**
+   * 表格对应列内容的字段名 ；在form 中是 el-input等所有表单项的双向绑定的值；在descriptions 是 el-descriptions-item的值对应的字段；
+   */
+  prop: string
+
+  /**
+   *  表格宽
+   */
+  width?: string | number
+  /**
+   *  表格最小宽
+   */
+  minWidth?: string | number
+
+  /**
+   * @desc 当开启时  valueType 为 `FormItemValueType` 其中之一时 表格中显示的是对应的可编辑的表单
+   * @default false
+   */
+  editable?: boolean
+
+  /**
+   * @desc 值的类型
+   */
+  valueType?: TableValueType | FormItemValueType
+
+  /** @desc 在 PlusDescriptions组件中 隐藏 */
+  hideInDescriptions?: boolean | Ref<boolean> | ComputedRef<boolean>
+
+  /** @desc 在 PlusForm 组件中隐藏 */
+  hideInForm?: boolean | Ref<boolean> | ComputedRef<boolean>
+
+  /** @desc 在 PlusTable 组件中隐藏 */
+  hideInTable?: boolean | Ref<boolean> | ComputedRef<boolean>
+
+  /** @desc 在 PlusSearch 中隐藏 */
+  hideInSearch?: boolean | Ref<boolean> | ComputedRef<boolean>
+
+  /**
+   * 描述行，el-descriptions-item 的props
+   */
+  descriptionsItemProps?: RecordType
+
+  /**
+   * el-select，el-radio-group，el-checkbox-group ,plus-radio选项 ，支持数组，函数，和Promise
+   */
+  options?: OptionsType
+
+  /**
+   * @desc 对options 进行映射，仅对`valueType` 为 `select`|`radio`|`checkbox`|`plus-radio` 时生效
+   * @version v0.1.15
+   * @default{ label: 'label',value: 'value'}
+   */
+  optionsMap?: { label?: string; value?: string }
+
+  /**
+   *  自定义状态显示逻辑 需要返回一个 OptionsRow
+   * @param data
+   * @returns
+   */
+  customGetStatus?: (data: {
+    options: OptionsRow[]
+    value: string | number
+    row: RecordType
+  }) => OptionsRow
+
+  /**
+   * @desc 展示一个 icon，hover 时展示一些提示信息
+   * @version v0.1.15 新增 `ComputedRef<string>`  | `ComputedRef<Partial<ElTooltipProps>>`
+   */
+  tooltip?:
+    | string
+    | Partial<ElTooltipProps>
+    | ComputedRef<string>
+    | ComputedRef<Partial<ElTooltipProps>>
+
+  /**
+   *
+   * @desc 自定义渲染表格单行显示内容 需要返回一个 VNode，`render`的优先级最高
+   * @example
+   * ```ts
+   * import { h } from 'vue'
+   * import { ElTag } from 'element-plus'
+   * import type { PlusColumn } from 'plus-pro-components'
+   *
+   * const tableColumns:PlusColumn[] = [
+   *  {
+   *     label: 'tag',
+   *     prop: 'tag',
+   *     render: value => {
+   *       const item = statusOptions.find(item => item.value === value)
+   *        return h(ElTag, { type: item.type }, () => item.label)
+   *     }
+   *  }
+   * ]
+   *
+   * ```
+   */
+  render?: (value: any, data: { row: RecordType; column: PlusColumn; index: number }) => RenderTypes
+
+  /**
+   * @desc  自定义渲染单行显示内容 需要返回一个 html字符串，`renderHTML`的优先级低于`render`，高于`valueType`。
+   * @desc **注意：renderHTML 内部使用`v-html`渲染，使用时需要保证 html字符串可信。**
+   * @example
+   * ```ts
+   *  import type { PlusColumn } from 'plus-pro-components'
+   *
+   *  const tableColumns:PlusColumn[] = [
+   *    {
+   *       label: '自定义',
+   *       prop: 'custom',
+   *       renderHTML: (value, { row }) => {
+   *         return `
+   *          <div>自定义: ${row.number || 0}</div>
+   *         `
+   *      }
+   *    }
+   *  ]
+   *
+   *```
+   */
+  renderHTML?: (value: any, data: { row: RecordType; column: PlusColumn; index: number }) => string
+
+  /**
+   * @desc 渲染table表单的Header
+   * @example
+   * ```ts
+   * import { h } from 'vue'
+   * import { ElButton } from 'element-plus'
+   * import type { PlusColumn } from 'plus-pro-components'
+   *
+   * const tableColumns:PlusColumn[] = [
+   *    {
+   *       label: '自定义',
+   *       prop: 'custom',
+   *       renderHeader:label => h(ElButton, null, () => label)
+   *    }
+   * ]
+   *
+   *```
+   */
+  renderHeader?: (label: string, props: PlusColumn) => RenderTypes
+  /**
+   * 自定义el-descriptions-item 里的内容 优先级高于 render, renderHTML
+   */
+  renderDescriptionsItem?: (data: {
+    value: string
+    column: PlusColumn
+    row: RecordType
+  }) => RenderTypes
+  /**
+   * 自定义el-descriptions-item 里的label
+   */
+  renderDescriptionsLabel?: (data: {
+    label: string
+    column: PlusColumn
+    row: RecordType
+  }) => RenderTypes
+
+  /**
+   * PlusSearch 查询表单中的权重，权重大排序靠前，在PlusPage组件中非常有用
+   */
+  order?: number | ComputedRef<number>
+  /**
+   * @version 0.1.19
+   * 多级表头
+   */
+  children?: PlusColumn[]
+}
+
+/**
+ * 表格，表单，详情，搜索公共的类型
+ */
+export interface PlusColumn extends CommonType, TableColumnProps, FormColumnProps {
+  /** */
+}

package/packages/types/table.ts

@@ -0,0 +1,71 @@
+import type { TableColumnCtx } from 'element-plus'
+import type { RecordType } from './global'
+import type { PlusColumn } from './plus'
+
+export {}
+
+/**
+ * 所有表格的类型 默认是 ''
+ */
+export type TableValueType =
+  | 'img'
+  | 'link'
+  | 'money'
+  | 'tag'
+  | 'progress'
+  | 'copy'
+  | 'code'
+  | 'divider'
+  | 'avatar'
+  | ''
+
+/**
+ *  表格的类型
+ */
+export type TableColumnProps = {
+  /**
+   *  @desc 禁止表头过滤 默认`false`
+   *  @deprecated 请使用 `disabledHeaderFilter` 代替
+   */
+  headerFilter?: boolean
+  /**
+   *  @desc 禁止表头过滤 默认`false`
+   */
+  disabledHeaderFilter?: boolean
+
+  /**
+   * 表头过滤中默认是否勾选
+   * @version v0.1.22 新增
+   * @default true
+   */
+  headerIsChecked?: boolean
+
+  /**
+   * @desc 表格行的其他配置 （不包含label prop width minWidth）
+   */
+  tableColumnProps?: Partial<
+    Omit<TableColumnCtx<any>, 'label ' | 'prop' | 'width' | 'minWidth'> & { [key: string]: any }
+  >
+
+  /**
+   * @desc 图片预览  默认开启  给 false 关闭  仅当 valueType 等于 img 时有效，
+   */
+  preview?: boolean
+
+  /**
+   * @desc  el-link 的文字 valueType 等于 link 时生效 ，默认取得是 prop 对应的表格数据
+   *
+   * 使用场景：例如每列都要显示 一个 `下载` 固定不变
+   */
+  linkText?: string
+
+  /**
+   * @desc 格式化表格内容显示
+   * @version v0.1.12 新增
+   * @see https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7
+   */
+  formatter?: (
+    value: any,
+    data: { row: RecordType; column: PlusColumn; index: number }
+  ) => string | number
+}

package/packages/utils/build.config.ts

@@ -0,0 +1,23 @@
+import path from 'node:path'
+import { defineBuildConfig } from 'unbuild'
+import glob from 'fast-glob'
+
+const entries = glob.sync('./src/*', {
+  cwd: path.resolve(__dirname),
+  onlyFiles: true
+})
+
+export default defineBuildConfig({
+  entries,
+  clean: true,
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+    dts: {
+      respectExternal: true
+    },
+    esbuild: {
+      minify: true
+    }
+  }
+})

package/packages/utils/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@wlydfe/pro-ui-utils",
+  "version": "0.0.12",
+  "description": "utils of plus-pro-components",
+  "license": "MIT",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "npx unbuild",
+    "stub": "npx unbuild --stub"
+  },
+  "dependencies": {
+    "accounting": "^0.4.1",
+    "axios": "^1.4.0",
+    "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.7",
+    "file-saver": "^2.0.5",
+    "good-storage": "^1.1.1",
+    "js-cookie": "^3.0.5",
+    "lodash-es": "^4.17.21",
+    "numeral": "^2.0.6",
+    "qs": "^6.11.1"
+  },
+  "devDependencies": {
+    "@types/accounting": "^0.4.2",
+    "@types/crypto-js": "^4.1.1",
+    "@types/file-saver": "^2.0.5",
+    "@types/good-storage": "^1.1.0",
+    "@types/js-cookie": "^3.0.3",
+    "@types/lodash-es": "^4.17.7",
+    "@types/numeral": "^2.0.2",
+    "@types/qs": "^6.9.7"
+  }
+}

package/packages/utils/src/cookie.ts

@@ -0,0 +1,24 @@
+import Cookies from 'js-cookie'
+
+/**
+ * 获取 cookie
+ * @returns
+ */
+export function getCookie(key: string): string | undefined {
+  return Cookies.get(key)
+}
+
+/**
+ * 设置 cookie
+ * @returns
+ */
+export function setCookie(key: string, data: any): string | undefined {
+  return Cookies.set(key, data)
+}
+
+/**
+ * 移除 cookie
+ */
+export function removeCookie(key: string): void {
+  Cookies.remove(key)
+}

package/packages/utils/src/day.ts

@@ -0,0 +1,66 @@
+import dayjs from 'dayjs'
+import type { QUnitType, OpUnitType, ConfigType } from 'dayjs'
+
+/**
+ *
+ * @param {string | number | Date | Dayjs | null | undefined} date
+ * @param format 默认 YYYY-MM-DD HH:mm:ss
+ * @returns YYYY-MM-DD HH:mm:ss
+ */
+export function formatDate(date?: ConfigType, format = 'YYYY-MM-DD HH:mm:ss'): string {
+  return dayjs(date || new Date()).format(format)
+}
+
+/**
+ * 格式化时间到天
+ * @param  {string | number | Date | Dayjs | null | undefined} date
+ * @returns YYYY-MM-DD
+ */
+export const formatDateToDay = (date: ConfigType): string => formatDate(date, 'YYYY-MM-DD')
+
+/**
+ * 格式化时间到分钟
+ * @param  {string | number | Date | Dayjs | null | undefined} date
+ * @returns YYYY-MM-DD HH:mm
+ */
+export const formatDateToMinute = (date: ConfigType): string => formatDate(date, 'YYYY-MM-DD HH:mm')
+
+/**
+ * 获取两个 Dayjs 对象的时间差，默认秒。
+ * @param date1
+ * @param date2
+ * @param format
+ * @returns {*}
+ */
+export function diffDate(
+  date1: ConfigType,
+  date2: ConfigType = dayjs(),
+  format: QUnitType | OpUnitType = 'second'
+): number | string | undefined {
+  if (!date1) return
+  return dayjs(date1).diff(dayjs(date2), format)
+}
+
+/**
+ * @desc 获取距离当前时间差，返回多少年（月/天/小时/分钟/秒）前
+ * @param date  秒数
+ * @returns
+ */
+export function diffDateFromCurrent(date: number): string {
+  if (date >= 60 * 60 * 24 * 365) {
+    return `${parseInt(String(date / (60 * 60 * 24 * 365)))}年前`
+  }
+  if (date >= 60 * 60 * 24 * 30) {
+    return `${parseInt(String(date / (60 * 60 * 24 * 30)))}月前`
+  }
+  if (date >= 60 * 60 * 24) {
+    return `${parseInt(String(date / (60 * 60 * 24)))}天前`
+  }
+  if (date >= 60 * 60) {
+    return `${parseInt(String(date / (60 * 60)))}小时前`
+  }
+  if (date >= 60) {
+    return `${parseInt(String(date / 60))}分钟前`
+  }
+  return `${parseInt(String(date))}秒前`
+}