@tmagic/form 1.2.0-beta.2 → 1.2.0-beta.21

package/src/containers/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-tabs
+  <TMagicTabs
     v-model="activeTabName"
     :class="config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'"
     :type="config.tabType"
@@ -10,17 +10,19 @@
     @tab-remove="onTabRemove"
   >
     <template v-for="(tab, tabIndex) in tabs">
-      <el-tab-pane
+      <component
         v-if="display(tab.display) && tabItems(tab).length"
+        :is="uiComponent.component"
         :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
         :name="filter(tab.status) || tabIndex.toString()"
         :label="filter(tab.title)"
         :lazy="tab.lazy || false"
       >
-        <m-form-container
+        <Container
           v-for="item in tabItems(tab)"
           :key="item[mForm?.keyProp || '__key']"
           :config="item"
+          :disabled="disabled"
           :model="
             config.dynamic
               ? (name ? model[name] : model)[tabIndex]
@@ -35,18 +37,24 @@
           :label-width="tab.labelWidth || labelWidth"
           :expand-more="expandMore"
           @change="changeHandler"
-        ></m-form-container>
-      </el-tab-pane>
+        ></Container>
+      </component>
     </template>
-  </el-tabs>
+  </TMagicTabs>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, ref, watchEffect } from 'vue';
+<script setup lang="ts" name="MFormTabs">
+import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import { FormState, FormValue, TabConfig, TabPaneConfig } from '../schema';
-import { display, filterFunction } from '../utils/form';
+import { getConfig, TMagicTabs } from '@tmagic/design';
+
+import { FormState, TabConfig, TabPaneConfig } from '../schema';
+import { display as displayFunc, filterFunction } from '../utils/form';
+
+import Container from './Container.vue';
+
+const uiComponent = getConfig('components').tabPane;
 
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;
@@ -59,7 +67,7 @@ const getActive = (mForm: FormState | undefined, props: any, activeTabName: stri
   return '0';
 };
 
-const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) => {
+const tabClick = (mForm: FormState | undefined, tab: any, props: any) => {
   const { config, model, prop } = props;
 
   // 兼容vue2的element-ui
@@ -75,123 +83,91 @@ const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) =>
   }
 };
 
-const Tab = defineComponent({
-  name: 'm-form-tab',
-
-  props: {
-    labelWidth: String,
-    expandMore: Boolean,
-
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    config: {
-      type: Object as PropType<TabConfig>,
-      default: () => ({}),
-    },
+const props = defineProps<{
+  model: any;
+  config: TabConfig;
+  name: string;
+  size?: string;
+  labelWidth?: string;
+  prop?: string;
+  expandMore?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['change']);
+
+const mForm = inject<FormState | undefined>('mForm');
+const activeTabName = ref(getActive(mForm, props, ''));
+
+const tabs = computed(() => {
+  if (props.config.dynamic) {
+    if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+    return props.model[props.config.name] || [];
+  }
+  return props.config.items;
+});
 
-    prop: String,
+const filter = (config: any) => filterFunction(mForm, config, props);
 
-    name: String,
+watchEffect(() => {
+  if (typeof props.config.activeChange === 'function') {
+    props.config.activeChange(mForm, activeTabName.value, {
+      model: props.model,
+      prop: props.prop,
+    });
+  }
+});
 
-    size: String,
-  },
+const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items);
 
-  emits: {
-    change(values: FormValue) {
-      return values;
-    },
-  },
+const tabClickHandler = (tab: any) => tabClick(mForm, tab, props);
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
-    const activeTabName = ref(getActive(mForm, props, ''));
+const onTabAdd = () => {
+  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
 
-    const tabs = computed(() => {
-      if (props.config.dynamic) {
-        if (!props.config.name) throw new Error('dynamic tab 必须配置name');
-        return props.model[props.config.name] || [];
-      }
-      return props.config.items;
+  if (typeof props.config.onTabAdd === 'function') {
+    props.config.onTabAdd(mForm, {
+      model: props.model,
+      prop: props.prop,
+      config: props.config,
     });
+  } else if (tabs.value.length > 0) {
+    const newObj = cloneDeep(tabs.value[0]);
+    newObj.title = `标签${tabs.value.length + 1}`;
+    props.model[props.config.name].push(newObj);
+  }
+  emit('change', props.model);
+  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+};
 
-    const filter = (config: any) => filterFunction(mForm, config, props);
+const onTabRemove = (tabName: string) => {
+  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
 
-    watchEffect(() => {
-      if (typeof props.config.activeChange === 'function') {
-        props.config.activeChange(mForm, activeTabName.value, {
-          model: props.model,
-          prop: props.prop,
-        });
-      }
+  if (typeof props.config.onTabRemove === 'function') {
+    props.config.onTabRemove(mForm, tabName, {
+      model: props.model,
+      prop: props.prop,
+      config: props.config,
     });
+  } else {
+    props.model[props.config.name].splice(+tabName, 1);
+
+    // 防止删除后没有选中的问题
+    if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
+      activeTabName.value = (+activeTabName.value - 1).toString();
+      tabClick(mForm, { name: activeTabName.value }, props);
+    }
+  }
+  emit('change', props.model);
+  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+};
 
-    return {
-      mForm,
-
-      activeTabName,
-
-      tabs,
-
-      filter,
-
-      tabItems: (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items),
-
-      tabClickHandler: (tab: any) => tabClickHandler(mForm, tab, props),
-
-      onTabAdd: () => {
-        if (!props.config.name) throw new Error('dynamic tab 必须配置name');
-
-        if (typeof props.config.onTabAdd === 'function') {
-          props.config.onTabAdd(mForm, {
-            model: props.model,
-            prop: props.prop,
-            config: props.config,
-          });
-        } else if (tabs.value.length > 0) {
-          const newObj = cloneDeep(tabs.value[0]);
-          newObj.title = `标签${tabs.value.length + 1}`;
-          props.model[props.config.name].push(newObj);
-        }
-        emit('change', props.model);
-        mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
-      },
-
-      onTabRemove: (tabName: string) => {
-        if (!props.config.name) throw new Error('dynamic tab 必须配置name');
-
-        if (typeof props.config.onTabRemove === 'function') {
-          props.config.onTabRemove(mForm, tabName, {
-            model: props.model,
-            prop: props.prop,
-            config: props.config,
-          });
-        } else {
-          props.model[props.config.name].splice(+tabName, 1);
-
-          // 防止删除后没有选中的问题
-          if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
-            activeTabName.value = (+activeTabName.value - 1).toString();
-            tabClickHandler(mForm, { name: activeTabName.value }, props);
-          }
-        }
-        emit('change', props.model);
-        mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
-      },
-
-      display: (displayConfig: any) => display(mForm, displayConfig, props),
-
-      changeHandler: () => {
-        emit('change', props.model);
-        if (typeof props.config.onChange === 'function') {
-          props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
-        }
-      },
-    };
-  },
-});
+const display = (displayConfig: any) => displayFunc(mForm, displayConfig, props);
 
-export default Tab;
+const changeHandler = () => {
+  emit('change', props.model);
+  if (typeof props.config.onChange === 'function') {
+    props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
+  }
+};
 </script>

package/src/fields/Cascader.vue

@@ -1,146 +1,98 @@
 <template>
-  <div class="m-cascader" style="width: 100%">
-    <el-cascader
-      v-model="model[name]"
-      ref="cascader"
-      style="width: 100%"
-      clearable
-      filterable
-      :size="size"
-      :placeholder="config.placeholder"
-      :disabled="disabled"
-      :options="options"
-      :props="{ multiple: config.multiple }"
-      @change="changeHandler"
-    ></el-cascader>
-  </div>
+  <TMagicCascader
+    v-model="model[name]"
+    ref="tMagicCascader"
+    style="width: 100%"
+    clearable
+    filterable
+    :size="size"
+    :placeholder="config.placeholder"
+    :disabled="disabled"
+    :options="options"
+    :props="{ multiple: config.multiple }"
+    @change="changeHandler"
+  ></TMagicCascader>
 </template>
 
-<script lang="ts">
-import {
-  ComponentInternalInstance,
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  inject,
-  PropType,
-  ref,
-  watchEffect,
-} from 'vue';
+<script setup lang="ts" name="MFormCascader">
+import { inject, ref, watchEffect } from 'vue';
+
+import { TMagicCascader } from '@tmagic/design';
 
 import { CascaderConfig, FormState } from '../schema';
 import { getConfig } from '../utils/config';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-cascader',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<CascaderConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change'],
-
-  setup(props, { emit }) {
-    const mForm = inject<FormState | null>('mForm');
-    const vm = getCurrentInstance() as ComponentInternalInstance;
-
-    useAddField(props.prop);
-
-    const requestFunc = getConfig('request') as Function;
-
-    const cascader = ref<any>();
-    const dialog = ref<any>();
-
-    const options = Array.isArray(props.config.options) ? ref(props.config.options) : ref([]);
-    const remoteData = ref<any>(null);
-
-    const setRemoteOptions = async function () {
-      const { config } = props;
-      const { option } = config;
-      if (!option) return;
-      let { body } = option;
-
-      const postOptions: Record<string, any> = {
-        url: option.url,
-        cache: option.cache,
-        timeout: option.timeout,
-        data: {},
-      };
-
-      if (body && mForm) {
-        if (typeof body === 'function' && props.model && mForm) {
-          body = body(mForm, {
-            model: props.model,
-            formValue: mForm.values,
-            formValues: mForm.values,
-            config: props.config,
-          });
-        }
-        postOptions.data = body;
-      }
-
-      const res = await requestFunc(postOptions);
-
-      remoteData.value = res[option.root];
-      if (remoteData.value && typeof option?.item === 'function') {
-        options.value = option.item(res[option.root]);
-      }
-    };
-
-    // 初始化
-    if (typeof props.config.options === 'function' && props.model && mForm) {
-      watchEffect(
-        () =>
-          (options.value = (props.config.options as Function)(vm, { model: props.model, formValues: mForm.values })),
-      );
-    } else if (!props.config.options || !props.config.options.length || props.config.remote) {
-      Promise.resolve(setRemoteOptions());
+const props = defineProps<{
+  config: CascaderConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change']);
+
+const mForm = inject<FormState | null>('mForm');
+
+useAddField(props.prop);
+
+const requestFunc = getConfig('request') as Function;
+
+const tMagicCascader = ref<InstanceType<typeof TMagicCascader>>();
+
+const options = Array.isArray(props.config.options) ? ref(props.config.options) : ref([]);
+const remoteData = ref<any>(null);
+
+const setRemoteOptions = async function () {
+  const { config } = props;
+  const { option } = config;
+  if (!option) return;
+  let { body } = option;
+
+  const postOptions: Record<string, any> = {
+    url: option.url,
+    cache: option.cache,
+    timeout: option.timeout,
+    data: {},
+  };
+
+  if (body && mForm) {
+    if (typeof body === 'function' && props.model && mForm) {
+      body = body(mForm, {
+        model: props.model,
+        formValue: mForm.values,
+        formValues: mForm.values,
+        config: props.config,
+      });
     }
-
-    const action = computed(() => {
-      if (props.config.add?.action.method === 'post') {
-        return (options: any) =>
-          requestFunc({
-            ...props.config?.add?.action.body,
-            ...options,
-          });
-      }
-      return null;
-    });
-
-    return {
-      options,
-      remoteData,
-      addButtonStyle: {
-        top: 0,
-        left: 0,
-        width: 'auto',
-      },
-      dialogVisible: false,
-      cascader,
-      dialog,
-      action,
-      setRemoteOptions,
-      changeHandler: (value: any) => {
-        if (!cascader.value) return;
-        cascader.value.query = '';
-        cascader.value.previousQuery = null;
-        emit('change', value);
-      },
-      addHandler: () => {
-        if (!dialog.value) return;
-        dialog.value.dialogVisible = true;
-      },
-      editAfterAction: () => {
-        setRemoteOptions();
-      },
-    };
-  },
-});
+    postOptions.data = body;
+  }
+
+  const res = await requestFunc(postOptions);
+
+  remoteData.value = res[option.root];
+  if (remoteData.value && typeof option?.item === 'function') {
+    options.value = option.item(res[option.root]);
+  }
+};
+
+// 初始化
+if (typeof props.config.options === 'function' && props.model && mForm) {
+  watchEffect(
+    () => (options.value = (props.config.options as Function)(mForm, { model: props.model, formValues: mForm.values })),
+  );
+} else if (!props.config.options || !props.config.options.length || props.config.remote) {
+  Promise.resolve(setRemoteOptions());
+}
+
+const changeHandler = (value: any) => {
+  if (!tMagicCascader.value) return;
+  tMagicCascader.value.setQuery('');
+  tMagicCascader.value.setPreviousQuery(null);
+  emit('change', value);
+};
 </script>

package/src/fields/Checkbox.vue

@@ -1,67 +1,63 @@
 <template>
-  <el-checkbox
+  <TMagicCheckbox
     v-model="model[name]"
     :size="size"
     :trueLabel="activeValue"
     :falseLabel="inactiveValue"
     :disabled="disabled"
-    :label="config.text"
     @change="changeHandler"
-  ></el-checkbox>
+    >{{ config.text }}</TMagicCheckbox
+  >
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script setup lang="ts" name="MFormCheckbox">
+import { computed } from 'vue';
+
+import { TMagicCheckbox } from '@tmagic/design';
 
 import { CheckboxConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-checkbox',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<CheckboxConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change', 'input'],
-
-  setup(props, { emit }) {
-    useAddField(props.prop);
-
-    return {
-      activeValue: computed(() => {
-        if (typeof props.config.activeValue === 'undefined') {
-          if (props.config.filter === 'number') {
-            return 1;
-          }
-        } else {
-          return props.config.activeValue;
-        }
-
-        return undefined;
-      }),
-
-      inactiveValue: computed(() => {
-        if (typeof props.config.inactiveValue === 'undefined') {
-          if (props.config.filter === 'number') {
-            return 0;
-          }
-        } else {
-          return props.config.inactiveValue;
-        }
+const props = defineProps<{
+  config: CheckboxConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+const activeValue = computed(() => {
+  if (typeof props.config.activeValue === 'undefined') {
+    if (props.config.filter === 'number') {
+      return 1;
+    }
+  } else {
+    return props.config.activeValue;
+  }
+
+  return undefined;
+});
 
-        return undefined;
-      }),
+const inactiveValue = computed(() => {
+  if (typeof props.config.inactiveValue === 'undefined') {
+    if (props.config.filter === 'number') {
+      return 0;
+    }
+  } else {
+    return props.config.inactiveValue;
+  }
 
-      changeHandler(value: number | boolean) {
-        emit('change', value);
-      },
-    };
-  },
+  return undefined;
 });
+
+const changeHandler = (value: number | boolean) => {
+  emit('change', value);
+};
 </script>