vxe-pc-ui 0.0.2 → 0.1.0

package/types/components/form-gather.d.ts

@@ -0,0 +1,75 @@
+import { RenderFunction, SetupContext, Ref } from 'vue'
+import { defineVxeComponent, VxeComponentBase, VxeComponentEvent } from '../tool'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeFormGather: defineVxeComponent<VxeFormGatherProps, VxeFormGatherEventProps>
+
+export interface VxeFormGatherConstructor extends VxeComponentBase, VxeFormGatherMethods {
+  props: VxeFormGatherProps
+  context: SetupContext<VxeFormGatherEmits>
+  reactData: FormGatherReactData
+  getRefMaps(): FormGatherPrivateRef
+  getComputeMaps(): FormGatherPrivateComputed
+  renderVN: RenderFunction
+}
+
+export interface FormGatherPrivateRef {
+  refElem: Ref<HTMLDivElement | undefined>
+}
+export interface VxeFormGatherPrivateRef extends FormGatherPrivateRef { }
+
+export namespace VxeFormGatherPropTypes {
+}
+
+export type VxeFormGatherProps = {
+  /**
+   * 栅格占据的列数（共 24 分栏）
+   */
+  span?: VxeFormItemPropTypes.Span
+  /**
+   * 给表单项附加 className
+   */
+  className?: VxeFormItemPropTypes.ClassName
+}
+
+export interface FormGatherPrivateComputed {
+}
+export interface VxeFormGatherPrivateComputed extends FormGatherPrivateComputed { }
+
+export interface FormGatherReactData {
+}
+
+export interface FormGatherMethods {
+}
+export interface VxeFormGatherMethods extends FormGatherMethods { }
+
+export interface FormGatherPrivateMethods { }
+export interface VxeFormGatherPrivateMethods extends FormGatherPrivateMethods { }
+
+export type VxeFormGatherEmits = []
+
+export namespace VxeFormGatherDefines {
+  export interface FormGatherEventParams extends VxeComponentEvent {
+    $formGather: VxeFormGatherConstructor
+  }
+}
+
+export type VxeFormGatherEventProps = {}
+
+export interface VxeFormGatherListeners { }
+
+export namespace VxeFormGatherEvents { }
+
+export namespace VxeFormGatherSlotTypes {
+  export interface DefaultSlotParams {
+    [key: string]: any
+  }
+}
+
+export interface VxeFormGatherSlots {
+  default: (params: VxeFormGatherSlotTypes.DefaultSlotParams) => any
+}
+
+export const FormGather: typeof VxeFormGather
+export default VxeFormGather

package/types/components/form-item.d.ts

@@ -0,0 +1,231 @@
+import { RenderFunction, SetupContext, Ref } from 'vue'
+import { defineVxeComponent, VxeComponentBase, VxeComponentEvent, VxeComponentSlot, VxeComponentStyle } from '../tool'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeFormItem: defineVxeComponent<VxeFormItemProps, VxeFormItemEventProps>
+
+export interface VxeFormItemConstructor extends VxeComponentBase, VxeFormItemMethods {
+  props: VxeFormItemProps
+  context: SetupContext<VxeFormItemEmits>
+  reactData: FormItemReactData
+  getRefMaps(): FormItemPrivateRef
+  getComputeMaps(): FormItemPrivateComputed
+  renderVN: RenderFunction
+}
+
+export interface FormItemPrivateRef {
+  refElem: Ref<HTMLDivElement | undefined>
+}
+export interface VxeFormItemPrivateRef extends FormItemPrivateRef { }
+
+export namespace VxeFormItemPropTypes {
+  export type Title = string
+  export type Field = string
+  export type Span = VxeFormPropTypes.Span
+  export type Align = VxeFormPropTypes.Align
+  export type TitleAlign = VxeFormPropTypes.TitleAlign
+  export type TitleWidth = VxeFormPropTypes.TitleWidth
+  export type TitleColon = VxeFormPropTypes.TitleColon
+  export type TitleAsterisk = VxeFormPropTypes.TitleAsterisk
+  export type ShowTitle = boolean
+  export type Vertical = boolean
+
+  interface ClassNameParams {
+    $form: VxeFormConstructor
+    data: any
+    item: VxeFormDefines.ItemInfo
+    field: string
+    /**
+     * @deprecated
+     */
+    property: string
+  }
+  export type ClassName = string | ((params: ClassNameParams) => string)
+
+  interface ContentClassNameParams extends ClassNameParams{}
+  export type ContentClassName = string | ((params: ContentClassNameParams) => string)
+
+  interface ContentStyleParams extends ClassNameParams{}
+  export type ContentStyle = VxeComponentStyle | ((params: ContentStyleParams) => VxeComponentStyle)
+
+  interface TitleClassNameParams extends ClassNameParams{}
+  export type TitleClassName = string | ((params: TitleClassNameParams) => string)
+
+  interface TitleStyleParams extends ClassNameParams{}
+  export type TitleStyle = VxeComponentStyle | ((params: TitleStyleParams) => VxeComponentStyle)
+
+  export type Readonly = boolean
+
+  interface PrefixOption {
+    useHTML?: VxeTooltipPropTypes.UseHTML
+    content?: VxeTooltipPropTypes.Content
+    enterable?: VxeTooltipPropTypes.Enterable
+    theme?: VxeTooltipPropTypes.Theme
+    icon?: string
+    /**
+     * @deprecated 已废弃，请使用 content
+     */
+    message?: string
+  }
+  export type TitlePrefix = PrefixOption
+  export type TitleSuffix = PrefixOption
+  export type TitleOverflow = VxeFormPropTypes.TitleOverflow
+
+  export type ResetValue = any
+  export type Visible = boolean
+  export type VisibleMethod = (params: FormItemVisibleParams) => boolean
+  export type Folding = boolean
+  export type CollapseNode = boolean
+  export type ItemRender = FormItemRenderOptions
+  export type Slots = {
+    title?: string | ((params: FormItemTitleRenderParams) => SlotVNodeType | SlotVNodeType[]) | null
+    default?: string | ((params: FormItemContentRenderParams) => SlotVNodeType | SlotVNodeType[]) | null
+  }
+}
+
+export type VxeFormItemProps = {
+  /**
+   * 标题
+   */
+  title?: VxeFormItemPropTypes.Title
+  /**
+   * 字段名
+   */
+  field?: VxeFormItemPropTypes.Field
+  /**
+   * 栅格占据的列数（共 24 分栏）
+   */
+  span?: VxeFormItemPropTypes.Span
+  /**
+   * 内容对齐方式
+   */
+  align?: VxeFormItemPropTypes.Align
+  /**
+   * 标题对齐方式
+   */
+  titleAlign?: VxeFormItemPropTypes.TitleAlign
+  /**
+   * 标题宽度
+   */
+  titleWidth?: VxeFormItemPropTypes.TitleWidth
+  /**
+   * 是否显示标题冒号
+   */
+  titleColon?: VxeFormItemPropTypes.TitleColon
+  /**
+   * 是否显示必填字段的红色星号
+   */
+  titleAsterisk?: VxeFormItemPropTypes.TitleAsterisk
+  /**
+   * 是否显示标题
+   */
+  showTitle?: VxeFormItemPropTypes.ShowTitle
+  /**
+   * 使用垂直布局
+   */
+  vertical?: VxeFormItemPropTypes.Vertical
+  /**
+   * 给表单项附加 className
+   */
+  className?: VxeFormItemPropTypes.ClassName
+  /**
+   * 给表单项内容附加 className
+   */
+  contentClassName?: VxeFormItemPropTypes.ContentClassName
+  /**
+   * 给表单项内容附加样式
+   */
+  contentStyle?: VxeFormItemPropTypes.ContentStyle
+  /**
+   * 给表单项标题附加 className
+   */
+  titleClassName?: VxeFormItemPropTypes.TitleClassName
+  /**
+   * 给表单项标题附加样式
+   */
+  titleStyle?: VxeFormItemPropTypes.TitleStyle
+  /**
+   * 前缀配置项
+   */
+  titlePrefix?: VxeFormItemPropTypes.TitlePrefix
+  /**
+   * 后缀配置项
+   */
+  titleSuffix?: VxeFormItemPropTypes.TitleSuffix
+  titleOverflow?: VxeFormItemPropTypes.TitleOverflow
+  /**
+   * 重置时的默认值
+   */
+  resetValue?: VxeFormItemPropTypes.ResetValue
+  /**
+   * 是否显示
+   */
+  visible?: VxeFormItemPropTypes.Visible
+  /**
+   * 该方法的返回值用来决定该项是否显示
+   */
+  visibleMethod?: VxeFormItemPropTypes.VisibleMethod
+  /**
+   * 默认收起
+   */
+  folding?: VxeFormItemPropTypes.Folding
+  /**
+   * 折叠节点
+   */
+  collapseNode?: VxeFormItemPropTypes.CollapseNode
+  /**
+   * 项渲染配置项
+   */
+  itemRender?: FormItemRenderOptions
+  slots?: VxeFormItemPropTypes.Slots
+  children?: VxeFormItemProps[]
+}
+
+export interface FormItemPrivateComputed {
+}
+export interface VxeFormItemPrivateComputed extends FormItemPrivateComputed { }
+
+export interface FormItemReactData {
+}
+
+export interface FormItemMethods {
+}
+export interface VxeFormItemMethods extends FormItemMethods { }
+
+export interface FormItemPrivateMethods { }
+export interface VxeFormItemPrivateMethods extends FormItemPrivateMethods { }
+
+export type VxeFormItemEmits = []
+
+export namespace VxeFormItemDefines {
+  export interface FormItemEventParams extends VxeComponentEvent {
+    $formItem: VxeFormItemConstructor
+  }
+}
+
+export type VxeFormItemEventProps = {}
+
+export interface VxeFormItemListeners { }
+
+export namespace VxeFormItemEvents { }
+
+export namespace VxeFormItemSlotTypes {
+  export interface DefaultSlotParams {
+    [key: string]: any
+  }
+}
+
+export interface VxeFormItemSlots {
+  /**
+   * 自定义内容模板
+   */
+  default: (params: VxeFormItemSlotTypes.DefaultSlotParams) => any
+  /**
+   * 自定义标题模板
+   */
+  title: (params: VxeFormItemSlotTypes.DefaultSlotParams) => any
+}
+
+export const FormItem: typeof VxeFormItem
+export default VxeFormItem

package/types/components/form.d.ts

@@ -0,0 +1,349 @@
+import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
+import { defineVxeComponent, VxeComponentBase, VxeComponentEvent, VxeComponentSize, ValueOf } from '../tool'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeForm: defineVxeComponent<VxeFormProps, VxeFormEventProps>
+
+export type VxeFormInstance = ComponentPublicInstance<VxeFormProps, VxeFormConstructor>
+
+export interface VxeFormConstructor extends VxeComponentBase, VxeFormMethods {
+  props: VxeFormProps
+  context: SetupContext<VxeFormEmits>
+  reactData: FormReactData
+  internalData: FormInternalData
+  getRefMaps(): FormPrivateRef
+  getComputeMaps(): FormPrivateComputed
+  renderVN: RenderFunction
+
+  xegrid: any
+}
+
+export interface FormPrivateRef {
+  refElem: Ref<HTMLFormElement | undefined>
+}
+export interface VxeFormPrivateRef extends FormPrivateRef { }
+
+export namespace VxeFormPropTypes {
+  export type Size = VxeComponentSize
+  export type CollapseStatus = boolean
+  export type Loading = boolean
+  export type Data = any
+  export type Span = string | number
+  export type Align = 'left' | 'center' | 'right' | '' | null
+  export type TitleAlign = Align
+  export type TitleWidth = string | number
+  export type TitleColon = boolean
+  export type TitleAsterisk = boolean
+  export type TitleOverflow = boolean | 'ellipsis' | 'title' | 'tooltip' | '' | null
+  export type Vertical = boolean
+
+  interface ClassNameParams {
+    $form: VxeFormConstructor
+    data: any
+    items: VxeFormDefines.ItemInfo[]
+  }
+  export type ClassName = string | ((params: ClassNameParams) => string)
+
+  export type Items = VxeFormItemProps[]
+
+  export type Readonly = boolean
+
+  /**
+   * 校验规则配置项
+   */
+  export interface Rules {
+    [field: string]: VxeFormDefines.FormRule[]
+  }
+
+  export type PreventSubmit = boolean
+  export type ValidConfig = {
+    autoPos?: boolean
+    showMessage?: boolean
+  }
+  export interface ValidOpts extends ValidConfig { }
+
+  /**
+   * 提示信息配置项
+   */
+  export interface TooltipConfig {
+    theme?: 'dark' | 'light'
+    enterable?: boolean
+    leaveDelay?: number
+    leaveMethod?: (params: { $event: Event }) => boolean
+  }
+  export interface TooltipOpts extends TooltipConfig { }
+
+  export type CustomLayout = boolean
+}
+
+export type VxeFormProps<D = any> = {
+  size?: VxeFormPropTypes.Size
+  collapseStatus?: VxeFormPropTypes.CollapseStatus
+  loading?: VxeFormPropTypes.Loading
+  data?: D
+  span?: VxeFormPropTypes.Span
+  align?: VxeFormPropTypes.Align
+  titleAlign?: VxeFormPropTypes.TitleAlign
+  titleWidth?: VxeFormPropTypes.TitleWidth
+  titleColon?: VxeFormPropTypes.TitleColon
+  titleAsterisk?: VxeFormPropTypes.TitleAsterisk
+  titleOverflow?: VxeFormPropTypes.TitleOverflow
+  vertical?: VxeFormPropTypes.Vertical
+  className?: VxeFormPropTypes.ClassName
+  readonly?: VxeFormPropTypes.Readonly
+  items?: VxeFormPropTypes.Items
+  rules?: VxeFormPropTypes.Rules
+  preventSubmit?: VxeFormPropTypes.PreventSubmit
+  validConfig?: VxeFormPropTypes.ValidConfig
+  tooltipConfig?: VxeFormPropTypes.TooltipConfig
+  customLayout?: VxeFormPropTypes.CustomLayout
+}
+
+export interface FormPrivateComputed {
+  computeSize: ComputedRef<VxeFormPropTypes.Size>
+  computeValidOpts: ComputedRef<VxeFormPropTypes.ValidOpts>
+  computeTooltipOpts: ComputedRef<VxeFormPropTypes.TooltipOpts>
+}
+export interface VxeFormPrivateComputed extends FormPrivateComputed { }
+
+export interface FormReactData {
+  collapseAll: boolean
+  staticItems: any[]
+  formItems: VxeFormDefines.ItemInfo[]
+}
+
+export interface FormInternalData {
+  tooltipTimeout: any
+  tooltipStore: {
+    item: VxeFormDefines.ItemInfo | null
+    visible: boolean
+  }
+}
+
+export interface FormMethods {
+  dispatchEvent(type: ValueOf<VxeFormEmits>, params: any, evnt: Event): void
+  /**
+   * 重置表单
+   */
+  reset(): Promise<any>
+  /**
+   * 对表单进行校验，参数为一个回调函数。该回调函数会在校验结束后被调用 callback(errMap)。若不传入回调函数，则会返回一个 promise
+   * @param callback 回调函数
+   */
+  validate(callback?: (errMap?: VxeFormDefines.ValidateErrorMapParams) => void): Promise<VxeFormDefines.ValidateErrorMapParams>
+  /**
+   * 对表单指定项进行校验，参数为一个回调函数。该回调函数会在校验结束后被调用 callback(errMap)。若不传入回调函数，则会返回一个 promise
+   * @param callback 回调函数
+   */
+  validateField(field: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[], callback?: (errMap?: VxeFormDefines.ValidateErrorMapParams) => void): Promise<VxeFormDefines.ValidateErrorMapParams>
+  /**
+   * 手动清除校验状态，如果指定 field 则清除指定的项，否则清除整个表单
+   * @param field 字段名
+   */
+  clearValidate(field?: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[]): Promise<any>
+  /**
+   * 更新项状态
+   * 当使用自定义渲染时可能会用到
+   * @param params 插槽对象
+   */
+  updateStatus(
+    params: {
+      field: VxeFormItemPropTypes.Field
+    },
+    itemValue?: any
+  ): void
+  /**
+   * 获取表单项列表
+   */
+  getItems(): VxeFormDefines.ItemInfo[]
+  /**
+   * 根据列的字段名获取表单项
+   * @param field 字段名
+   *
+   */
+  getItemByField(field: VxeFormItemPropTypes.Field): VxeFormDefines.ItemInfo | null
+  /**
+   * 关闭 tooltip 提示
+   */
+  closeTooltip(): Promise<any>
+  /**
+   * 手动切换折叠状态
+   */
+  toggleCollapse(): Promise<any>
+}
+export interface VxeFormMethods extends FormMethods { }
+
+export interface FormPrivateMethods {
+  callSlot<T>(slotFunc: ((params: T) => SlotVNodeType | SlotVNodeType[]) | string | null, params: T): SlotVNodeType[]
+  triggerItemEvent(evnt: Event | { type: string }, field: string, itemValue?: any): Promise<any>
+  toggleCollapseEvent(evnt: Event): void
+  triggerTitleTipEvent(evnt: MouseEvent, params: {
+    item: VxeFormDefines.ItemInfo
+  }): void
+  handleTitleTipLeaveEvent(): void
+}
+export interface VxeFormPrivateMethods extends FormPrivateMethods { }
+
+export type VxeFormEmits = [
+  'update:collapseStatus',
+  'collapse',
+  'toggle-collapse',
+  'submit',
+  'submit-invalid',
+  'reset'
+]
+
+export namespace VxeFormDefines {
+  export class ItemInfo {
+    id: string
+
+    title: VxeFormItemPropTypes.Title
+    field: VxeFormItemPropTypes.Field
+    span: VxeFormItemPropTypes.Span
+    align: VxeFormItemPropTypes.Align
+    titleAlign: VxeFormItemPropTypes.TitleAlign
+    titleWidth: VxeFormItemPropTypes.TitleWidth
+    titleColon: VxeFormItemPropTypes.TitleColon
+    titleAsterisk: VxeFormItemPropTypes.TitleAsterisk
+    titlePrefix: VxeFormItemPropTypes.TitlePrefix
+    titleSuffix: VxeFormItemPropTypes.TitleSuffix
+    titleOverflow: VxeFormItemPropTypes.TitleOverflow
+    showTitle: VxeFormItemPropTypes.ShowTitle
+    vertical: VxeFormItemPropTypes.Vertical
+    resetValue: VxeFormItemPropTypes.ResetValue
+    visibleMethod: VxeFormItemPropTypes.VisibleMethod
+    visible: VxeFormItemPropTypes.Visible
+    folding: VxeFormItemPropTypes.Folding
+    collapseNode: VxeFormItemPropTypes.CollapseNode
+    className: VxeFormItemPropTypes.ClassName
+    contentClassName: VxeFormItemPropTypes.ContentClassName
+    contentStyle: VxeFormItemPropTypes.ContentStyle
+    titleClassName: VxeFormItemPropTypes.TitleClassName
+    titleStyle: VxeFormItemPropTypes.TitleStyle
+    readonly: VxeFormItemPropTypes.Readonly
+    itemRender: VxeFormItemPropTypes.ItemRender
+    // 渲染属性
+    showError: boolean
+    errRule: any
+    slots: VxeFormItemPropTypes.Slots
+    children: ItemInfo[]
+  }
+
+  export interface FormRule {
+    /**
+     * 是否必填
+     */
+    required?: boolean
+    /**
+     * 最小长度/值
+     */
+    min?: number
+    /**
+     * 最大长度/值
+     */
+    max?: number
+    /**
+     * 数据类型
+     */
+    type?: 'number' | 'string' | 'array' | '' | null
+    /**
+     * 使用正则表达式校验
+     */
+    pattern?: string | RegExp
+    /**
+     * 使用自定义校验函数，接收一个 Promise
+     * @param params 参数
+     */
+    validator?: string | ((params: RuleValidatorParams) => void | Error | Promise<any>)
+    /**
+     * 提示消息
+     */
+    content?: string
+    trigger?: 'change' | '' | null
+    maxWidth?: number
+    /**
+     * @deprecated 已废弃，请使用 content
+     */
+    message?: string
+  }
+
+  export interface RuleValidatorParams {
+    $form: VxeFormConstructor
+    itemValue: any
+    rule: VxeFormDefines.FormRule
+    rules: VxeFormDefines.FormRule[]
+    data: any
+    field: string
+  }
+  export interface ValidateErrorParams {
+    $form: VxeFormConstructor,
+    rule: VxeFormDefines.FormRule
+    data: any
+    field: string
+    /**
+     * @deprecated
+     */
+    property: string
+  }
+
+  export interface ProvideItemInfo {
+    itemConfig: ItemInfo
+  }
+
+  export interface ValidateErrorMapParams {
+    [field: string]: ValidateErrorParams[]
+  }
+
+  interface FormEventParams extends VxeComponentEvent {
+    $form: VxeFormConstructor
+  }
+
+  interface FormBaseParams {
+    data: any
+  }
+
+  export interface CollapseParams extends FormBaseParams { }
+  export interface CollapseEventParams extends FormEventParams, CollapseParams { }
+
+  export interface SubmitParams extends FormBaseParams { }
+  export interface SubmitEventParams extends FormEventParams, SubmitParams { }
+
+  export interface SubmitInvalidParams extends FormBaseParams { }
+  export interface SubmitInvalidEventParams extends FormEventParams, SubmitInvalidParams { }
+
+  export interface ResetParams extends FormBaseParams { }
+  export interface ResetEventParams extends FormEventParams, ResetParams { }
+}
+
+export type VxeFormEventProps = {
+  onCollapse?: VxeFormEvents.Collapse
+  onSubmit?: VxeFormEvents.Submit
+  onSubmitInvalid?: VxeFormEvents.SubmitInvalid
+  onReset?: VxeFormEvents.Reset
+}
+
+export interface VxeFormListeners {
+  collapse?: VxeFormEvents.Collapse
+  submit?: VxeFormEvents.Submit
+  submitInvalid?: VxeFormEvents.SubmitInvalid
+  reset?: VxeFormEvents.Reset
+}
+
+export namespace VxeFormEvents {
+  export type Collapse = (params: VxeFormDefines.CollapseEventParams) => void
+  export type Submit = (params: VxeFormDefines.SubmitEventParams) => void
+  export type SubmitInvalid = (params: VxeFormDefines.SubmitInvalidEventParams) => void
+  export type Reset = (params: VxeFormDefines.ResetEventParams) => void
+}
+
+export namespace VxeFormSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
+export interface VxeFormSlots {
+  default: (params: VxeFormSlotTypes.DefaultSlotParams) => any
+}
+
+export const Form: typeof VxeForm
+export default VxeForm

package/types/{component → components}/icon.d.ts

@@ -1,9 +1,11 @@
-import { RenderFunction, SetupContext, Ref } from 'vue'
+import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
 import { defineVxeComponent, VxeComponentBase, VxeComponentEvent } from '../tool'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
-declare const VxeIcon: defineVxeComponent<VxeIconProps, VxeIconEventProps>
+export declare const VxeIcon: defineVxeComponent<VxeIconProps, VxeIconEventProps>
+
+export type VxeIconInstance = ComponentPublicInstance<VxeIconProps, VxeIconConstructor>
 
 export interface VxeIconConstructor extends VxeComponentBase, VxeIconMethods {
   props: VxeIconProps
@@ -61,7 +63,10 @@ export interface VxeIconListeners { }
 
 export namespace VxeIconEvents { }
 
+export namespace VxeIconSlotTypes {}
+
 export interface VxeIconSlots {
 }
 
+export const Icon: typeof VxeIcon
 export default VxeIcon