fine-true/lib/types/form.ts

A small and beautiful Vue3 version of the UI Library

import { InjectionKey, Ref, ComputedRef, ComponentInternalInstance } from 'vue';

/*******common********/

export type FormSize = 'small' | 'default' | 'large';

/************form**********/
export type Model = Record<string, any>;
export type Validation = (trigger?: 'change' | 'blur') => void;
export type FormContextType = {
  collectionValidation: (validation: Validation) => void;
  rules?: any;
  model?: Model;
  labelWidth: Ref<string>;
  addField: (resetField: () => void) => void;
};

export const FormContextKey: InjectionKey<FormContextType> =
  Symbol('form-provide-key');

export const FormItemContextKey: InjectionKey<Validation> = Symbol(
  'form-item-provide-key'
);

/***********radio**********/
export type RadioGroupProvideType = {
  inGroup: boolean;
  rgModelValue?: Ref<string | number | boolean>;
  updateRgModelValue: (rgModelValue: string | number | boolean) => void;
};

export const RADIOGROUPPROVIDEKEY: InjectionKey<RadioGroupProvideType> = Symbol(
  'radio-group-provide-key'
);

export type ButtonTypeType =
  | 'default'
  | 'primary'
  | 'success'
  | 'info'
  | 'warning'
  | 'danger';

/********checkbox*******/
export type CheckboxGroupProvideType = {
  inGroup: boolean;
  cgModelValue?: ComputedRef<(string | number | boolean)[]>;
  updateCgModelValue: (value: string | number | boolean) => void;
};

export const CHECKBOXGROUPPROVIDEKEY: InjectionKey<CheckboxGroupProvideType> =
  Symbol('checkbox-group-provide-key');

/**select**/

export type SelectValueType = number | string | string[] | number[];
export type SelectSizeType = 'large' | 'default' | 'small';

type SelectProvideType = {
  modelValue: Ref<SelectValueType>;
  multiple: ComputedRef<boolean>;
  toggle: (value: string | number) => void;
};

export const SELECTPROVIDEKEY: InjectionKey<SelectProvideType> =
  Symbol('select-provide-key');