@tmagic/form 1.8.0-manmanyu.8 → 1.8.0

package/src/plugin.ts

@@ -28,17 +28,17 @@ import TableGroupList from './containers/table-group-list/TableGroupList.vue';
 import Tabs from './containers/Tabs.vue';
 import Cascader from './fields/Cascader.vue';
 import Checkbox from './fields/Checkbox.vue';
-import CheckboxGroup from './fields/CheckboxGroup.vue';
+import CheckboxGroup from './fields/CheckboxGroup/Index.vue';
 import ColorPicker from './fields/ColorPicker.vue';
-import Date from './fields/Date.vue';
+import Date from './fields/Date/Index.vue';
 import Daterange from './fields/Daterange.vue';
-import DateTime from './fields/DateTime.vue';
-import Display from './fields/Display.vue';
-import DynamicField from './fields/DynamicField.vue';
+import DateTime from './fields/DateTime/Index.vue';
+import Display from './fields/Display/Index.vue';
+import DynamicField from './fields/DynamicField/Index.vue';
 import Hidden from './fields/Hidden.vue';
 import Link from './fields/Link.vue';
 import Number from './fields/Number.vue';
-import NumberRange from './fields/NumberRange.vue';
+import NumberRange from './fields/NumberRange/Index.vue';
 import RadioGroup from './fields/RadioGroup.vue';
 import Select from './fields/Select.vue';
 import Switch from './fields/Switch.vue';
@@ -46,58 +46,89 @@ import Text from './fields/Text.vue';
 import Textarea from './fields/Textarea.vue';
 import Time from './fields/Time.vue';
 import Timerange from './fields/Timerange.vue';
+import { builtInFields } from './utils/builtInFields';
 import { setConfig } from './utils/config';
+import { type FieldOptions, registerBuiltInFields, registerFields } from './utils/registerField';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
 import FormDrawer from './FormDrawer.vue';
 
 import './theme/index.scss';
 
+// #region FormInstallOptions
+/**
+ * `@tmagic/form` 插件安装选项。
+ */
 export interface FormInstallOptions {
+  /** 是否启用全局 flat 模式。 */
+  flat?: boolean;
+  /**
+   * 自定义字段 type 的登记（叶子 / innerConfig / walk / typeMatch / component / container）。
+   * 与 `registerFields` 相同。
+   */
+  fields?: Record<string, FieldOptions>;
   [key: string]: any;
 }
+// #endregion FormInstallOptions
+
+const builtInFieldVue: Record<string, Pick<FieldOptions, 'component' | 'container'>> = {
+  text: { component: Text },
+  'img-upload': { component: Text },
+  number: { component: Number },
+  'number-range': { component: NumberRange },
+  textarea: { component: Textarea },
+  hidden: { component: Hidden },
+  date: { component: Date },
+  datetime: { component: DateTime },
+  daterange: { component: Daterange },
+  timerange: { component: Timerange },
+  time: { component: Time },
+  checkbox: { component: Checkbox },
+  switch: { component: Switch },
+  'color-picker': { component: ColorPicker },
+  'checkbox-group': { component: CheckboxGroup },
+  'radio-group': { component: RadioGroup },
+  display: { component: Display },
+  link: { component: Link },
+  select: { component: Select },
+  cascader: { component: Cascader },
+  'dynamic-field': { component: DynamicField },
+  container: { container: Container },
+  tab: { container: Tabs },
+  row: { container: Row },
+  'flex-layout': { container: FlexLayout },
+  fieldset: { container: Fieldset },
+  panel: { container: Panel },
+  step: { container: MStep },
+  table: { container: TableGroupList },
+  'group-list': { container: TableGroupList },
+  'table-group-list': { container: TableGroupList },
+};
 
 const defaultInstallOpt: FormInstallOptions = {};
 
 export default {
+  /**
+   * 安装 `@tmagic/form`：登记内置字段、挂载 `m-form` / `m-form-dialog` / `m-form-drawer`。
+   *
+   * @param app - Vue 应用
+   * @param [opt] - 安装选项
+   */
   install(app: App, opt: FormInstallOptions = {}) {
-    const option = Object.assign(defaultInstallOpt, opt);
+    const option = { ...defaultInstallOpt, ...opt };
 
     app.config.globalProperties.$MAGIC_FORM = option;
     setConfig(option);
 
+    registerBuiltInFields(builtInFields);
+    registerBuiltInFields(builtInFieldVue, app);
+
+    if (option.fields) {
+      registerFields(option.fields, app);
+    }
+
     app.component('m-form', Form);
     app.component('m-form-dialog', FormDialog);
     app.component('m-form-drawer', FormDrawer);
-    app.component('m-form-container', Container);
-    app.component('m-form-fieldset', Fieldset);
-    app.component('m-form-group-list', TableGroupList);
-    app.component('m-form-panel', Panel);
-    app.component('m-form-row', Row);
-    app.component('m-form-step', MStep);
-    app.component('m-form-table', TableGroupList);
-    app.component('m-form-tab', Tabs);
-    app.component('m-form-flex-layout', FlexLayout);
-    app.component('m-fields-text', Text);
-    app.component('m-fields-img-upload', Text);
-    app.component('m-fields-number', Number);
-    app.component('m-fields-number-range', NumberRange);
-    app.component('m-fields-textarea', Textarea);
-    app.component('m-fields-hidden', Hidden);
-    app.component('m-fields-date', Date);
-    app.component('m-fields-datetime', DateTime);
-    app.component('m-fields-daterange', Daterange);
-    app.component('m-fields-timerange', Timerange);
-    app.component('m-fields-time', Time);
-    app.component('m-fields-checkbox', Checkbox);
-    app.component('m-fields-switch', Switch);
-    app.component('m-fields-color-picker', ColorPicker);
-    app.component('m-fields-checkbox-group', CheckboxGroup);
-    app.component('m-fields-radio-group', RadioGroup);
-    app.component('m-fields-display', Display);
-    app.component('m-fields-link', Link);
-    app.component('m-fields-select', Select);
-    app.component('m-fields-cascader', Cascader);
-    app.component('m-fields-dynamic-field', DynamicField);
   },
 };

package/src/schema.ts

@@ -1,6 +1,6 @@
-import type { InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey } from 'vue';
 
-import type { FormItemConfig } from '@tmagic/form-schema';
+import type { FormContext, FormItemConfig } from '@tmagic/form-schema';
 
 export * from '@tmagic/form-schema';
 
@@ -27,6 +27,17 @@ export interface FormDiffConfig {
 }
 
 export const FORM_DIFF_CONFIG_KEY: InjectionKey<FormDiffConfig> = Symbol('mFormDiffConfig');
+export const FORM_TYPE_MATCH_VALID_KEY: InjectionKey<ComputedRef<boolean>> = Symbol('mFormTypeMatchValid');
+
+/**
+ * 宿主业务上下文，由 `MForm`（或更外层的 Editor）通过 `provide` 下发。
+ *
+ * 嵌套表单（Link 子表单、FormBox、临时校验表单等）会自动继承最近祖先的 context，
+ * 无需层层透传。
+ *
+ * 配置回调统一通过 `mForm.xxx` 读取，由 formState 的读穿 Proxy 落到这里。
+ */
+export const FORM_CONTEXT_KEY: InjectionKey<ComputedRef<FormContext>> = Symbol('mFormContext');
 
 export interface ValidateError {
   message: string;