fx-platform-ui 0.0.2 → 0.0.3

package/packages/components/form/src/types/form.ts

@@ -0,0 +1,130 @@
+import type { ColEx, ComponentMapType, ComponentProps } from './component'
+import type { Component, VNode } from 'vue'
+import type { RuleObject } from 'ant-design-vue/lib/form/interface'
+import type { FormItemProps } from 'ant-design-vue/es/form/FormItem'
+import type { PlatFormType } from '../hook'
+
+export type Rule = RuleObject & {
+  trigger?: 'blur' | 'change' | ['change', 'blur']
+}
+
+export interface RenderCallbackParams<T = string> {
+  schema: FormSchema<T>
+  formModel: Recordable<T>
+  field: string
+  values: any
+  // /** 动态表单实例 */
+  // @ts-ignore
+  formInstance: PlatFormType
+  // /** 动态表格实例 */
+  // tableInstance?: TableActionType;
+  // /** 作用域插槽数据 */
+  slotData?: Recordable
+}
+
+/** 自定义VNode渲染器 */
+export type CustomRenderFn<T = any> = (
+  renderCallbackParams: RenderCallbackParams<T>
+) => VNode | VNode[] | string
+
+export interface HelpComponentProps {
+  maxWidth: string
+  // Whether to display the serial number
+  showIndex: boolean
+  // Text list
+  text: any
+  // colour
+  color: string
+  // font size
+  fontSize: string
+  icon: string
+  absolute: boolean
+  // Positioning
+  position: any
+}
+
+/** 表单项 */
+export interface FormSchema<T = string> {
+  /** 字段名 */
+  field: any
+  // Event name triggered by internal value change, default change
+  changeEvent?: string
+  // Variable name bound to v-model Default value
+  valueField?: string
+  // Label name
+  label?: string
+  // Auxiliary text
+  subLabel?: string
+  // Help text on the right side of the text
+  helpMessage?:
+    | string
+    | string[]
+    | ((renderCallbackParams: RenderCallbackParams<T>) => string | string[])
+  // BaseHelp component props
+  helpComponentProps?: Partial<HelpComponentProps>
+  // Label width, if it is passed, the labelCol and WrapperCol configured by itemProps will be invalid
+  labelWidth?: string | number
+  // Disable the adjustment of labelWidth with global settings of formModel, and manually set labelCol and wrapperCol by yourself
+  disabledLabelWidth?: boolean
+  /** 表单项对应的组件，eg: Input */
+  component?: ComponentMapType | ((opt: RenderCallbackParams<T>) => Component)
+  /** 表单组件属性 */
+  componentProps?:
+    | ComponentProps
+    | {
+        (opt: RenderCallbackParams<T>): ComponentProps
+        requestResult: ComponentProps['requestResult']
+      }
+  /** 表单组件slots，例如 a-input 的 suffix slot 可以写成：{ suffix: () => VNode } */
+  componentSlots?: any
+  // Required
+  required?:
+    | boolean
+    | ((renderCallbackParams: RenderCallbackParams<T>) => boolean)
+
+  suffix?:
+    | string
+    | number
+    | ((values: RenderCallbackParams<T>) => string | number)
+
+  // Validation rules
+  rules?: Rule[]
+  // Check whether the information is added to the label
+  rulesMessageJoinLabel?: boolean
+  /** 组件加载状态 */
+  loading?: boolean
+
+  // Reference formModelItem
+  formItemProps?: Partial<FormItemProps>
+
+  // col configuration outside formModelItem
+  colProps?: Partial<ColEx>
+
+  // 默认值
+  defaultValue?: any
+  isAdvanced?: boolean
+
+  // Matching details components
+  span?: number
+  /** 作用同v-show */
+  vShow?: boolean | ((renderCallbackParams: RenderCallbackParams<T>) => boolean)
+  /** 作用同v-if */
+  vIf?: boolean | ((renderCallbackParams: RenderCallbackParams<T>) => boolean)
+
+  // 渲染col内容需要外层包装form-item
+  renderColContent?: (
+    renderCallbackParams: RenderCallbackParams
+  ) => VNode | VNode[] | string
+
+  // Custom slot, in from-item
+  slot?: string
+
+  // 自定义槽，类似renderColContent
+  colSlot?: string
+
+  dynamicDisabled?:
+    | boolean
+    | ((renderCallbackParams: RenderCallbackParams<T>) => boolean)
+
+  dynamicRules?: (renderCallbackParams: RenderCallbackParams<T>) => Rule[]
+}

package/packages/components/form/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './form'
+export * from './component'

package/packages/types/global.d.ts

@@ -0,0 +1,81 @@
+import packageJSON from '../../package.json'
+import type {
+  ComponentRenderProxy,
+  VNode,
+  VNodeChild,
+  SetupContext,
+  EmitsOptions,
+  PropType as VuePropType
+} from 'vue'
+
+declare global {
+  const __APP_INFO__: {
+    pkg: typeof packageJSON
+    lastBuildTime: string
+  }
+  // declare interface Window {
+  //   // Global vue app instance
+  //   __APP__: App<Element>;
+  // }
+
+  // vue
+  declare type PropType<T> = VuePropType<T>
+  declare type VueNode = VNodeChild | JSX.Element
+
+  export type Writable<T> = {
+    -readonly [P in keyof T]: T[P]
+  }
+  type RemoveIndex<T> = {
+    [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K]
+  }
+  declare type Nullable<T> = T | null
+  declare type NonNullable<T> = T extends null | undefined ? never : T
+  declare type Recordable<T = any> = Record<string, T>
+  declare type ReadonlyRecordable<T = any> = {
+    readonly [key: string]: T
+  }
+  declare type Indexable<T = any> = {
+    [key: string]: T
+  }
+  declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>
+  }
+
+  declare type TimeoutHandle = ReturnType<typeof setTimeout>
+  declare type IntervalHandle = ReturnType<typeof setInterval>
+
+  declare interface ChangeEvent extends Event {
+    target: HTMLInputElement
+  }
+
+  declare interface WheelEvent {
+    path?: EventTarget[]
+  }
+  declare function parseInt(s: string | number, radix?: number): number
+
+  declare function parseFloat(string: string | number): number
+
+  declare type EmitFn<E = EmitsOptions> = SetupContext<E>['emit']
+
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    type Element = VNode
+    // tslint:disable no-empty-interface
+    type ElementClass = ComponentRenderProxy
+    interface ElementAttributesProperty {
+      $props: any
+    }
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+    interface IntrinsicAttributes {
+      [elem: string]: any
+    }
+  }
+}
+
+declare module 'vue' {
+  export type JSXComponent<Props = any> =
+    | { new (): ComponentPublicInstance<Props> }
+    | FunctionalComponent<Props>
+}

package/packages/types/index.d.ts

@@ -0,0 +1,27 @@
+declare interface Fn<T = any, R = T> {
+  (...arg: T[]): R
+}
+
+declare interface PromiseFn<T = any, R = T> {
+  (...arg: T[]): Promise<R>
+}
+
+declare type RefType<T> = T | null
+
+declare type LabelValueOptions = {
+  label: string
+  value: any
+  [key: string]: string | number | boolean
+}[]
+
+declare type EmitType = (event: string, ...args: any[]) => void
+
+declare type TargetContext = '_self' | '_blank'
+
+declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
+  $el: T
+}
+
+declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null
+
+declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>

package/packages/utils/dateUtil.ts

@@ -0,0 +1,24 @@
+/**
+ * Independent time operation tool to facilitate subsequent switch to dayjs
+ */
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+const DATE_FORMAT = 'YYYY-MM-DD'
+
+export function formatToDateTime(
+  date: dayjs.Dayjs | undefined = undefined,
+  format = DATE_TIME_FORMAT
+): string {
+  return dayjs(date).format(format)
+}
+
+export function formatToDate(
+  date: dayjs.Dayjs | undefined = undefined,
+  format = DATE_FORMAT
+): string {
+  return dayjs(date).format(format)
+}
+
+export const dateUtil = dayjs

package/packages/utils/index.ts

@@ -0,0 +1,33 @@
+import { type App } from 'vue'
+import { isObject } from './is'
+
+/**
+ *
+ * byte to size
+ * formatBytes(1024);       // 1 KB
+ * formatBytes('1024');     // 1 KB
+ * formatBytes(1234);       // 1.21 KB
+ * formatBytes(1234, 3);    // 1.205 KB
+ * @param {number} bytes file size
+ */
+export function formatSizeUnits(bytes, decimals = 2) {
+  if (bytes === 0) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+}
+
+export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
+  let key: string
+  for (key in target) {
+    src[key] = isObject(src[key])
+      ? deepMerge(src[key], target[key])
+      : (src[key] = target[key])
+  }
+  return src
+}

package/packages/utils/is/index.ts

@@ -0,0 +1,104 @@
+const toString = Object.prototype.toString
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export function isDef<T = unknown>(val?: T): val is T {
+  return typeof val !== 'undefined'
+}
+
+export function isUnDef<T = unknown>(val?: T): val is T {
+  return !isDef(val)
+}
+
+export function isObject(val: any): val is Record<any, any> {
+  return val !== null && is(val, 'Object')
+}
+
+export function isEmpty<T = unknown>(val: T): val is T {
+  if (isArray(val) || isString(val)) {
+    return val.length === 0
+  }
+
+  if (val instanceof Map || val instanceof Set) {
+    return val.size === 0
+  }
+
+  if (isObject(val)) {
+    return Object.keys(val).length === 0
+  }
+
+  return false
+}
+
+export function isDate(val: unknown): val is Date {
+  return is(val, 'Date')
+}
+
+export function isNull(val: unknown): val is null {
+  return val === null
+}
+
+export function isNullAndUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) && isNull(val)
+}
+
+export function isNullOrUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) || isNull(val)
+}
+
+export function isNumber(val: unknown): val is number {
+  return is(val, 'Number')
+}
+
+export function isPromise<T = any>(val: unknown): val is Promise<T> {
+  return (
+    is(val, 'Promise') &&
+    isObject(val) &&
+    isFunction(val.then) &&
+    isFunction(val.catch)
+  )
+}
+
+export function isString(val: unknown): val is string {
+  return is(val, 'String')
+}
+
+export function isFunction(val: unknown): val is Function {
+  return typeof val === 'function'
+}
+
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, 'Boolean')
+}
+
+export function isRegExp(val: unknown): val is RegExp {
+  return is(val, 'RegExp')
+}
+
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val)
+}
+
+export function isWindow(val: any): val is Window {
+  return typeof window !== 'undefined' && is(val, 'Window')
+}
+
+export function isElement(val: unknown): val is Element {
+  return isObject(val) && !!val.tagName
+}
+
+export function isMap(val: unknown): val is Map<any, any> {
+  return is(val, 'Map')
+}
+
+export const isServer = typeof window === 'undefined'
+
+export const isClient = !isServer
+
+export function isUrl(path: string): boolean {
+  const reg =
+    /(((^https?:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)$/
+  return reg.test(path)
+}

package/lib/packages/component.d.ts

@@ -1,7 +0,0 @@
-/**
- * 导出所有组件
- */
-import PlCard from './components/card';
-declare const _default: import("vue").DefineComponent<unknown, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<unknown>, {}>[];
-export default _default;
-export { PlCard };

package/packages/utils/className.ts

@@ -1,28 +0,0 @@
-import { isArray, isString, isObject } from './util'
-
-function className(...args: any[]) {
-  const classes = []
-  for (let i = 0; i < args.length; i++) {
-    const value = args[i]
-    if (!value) continue
-    if (isString(value)) {
-      classes.push(value)
-    } else if (isArray(value)) {
-      for (let i = 0; i < value.length; i++) {
-        const inner: any = className(value[i])
-        if (inner) {
-          classes.push(inner)
-        }
-      }
-    } else if (isObject(value)) {
-      for (const name in value) {
-        if (value[name]) {
-          classes.push(name)
-        }
-      }
-    }
-  }
-  return classes.join(' ')
-}
-
-export default className