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

package/src/fields/CheckboxGroup.vue

@@ -1,44 +1,48 @@
 <template>
-  <el-checkbox-group v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
-    <el-checkbox v-for="option in config.options" :label="option.value" :key="option.value"
+  <TMagicCheckboxGroup v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
+    <TMagicCheckbox v-for="option in options" :label="option.value" :key="option.value" :disabled="option.disabled"
       >{{ option.text }}
-    </el-checkbox>
-  </el-checkbox-group>
+    </TMagicCheckbox>
+  </TMagicCheckboxGroup>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup name="MFormCheckGroup">
+import { computed, inject } from 'vue';
 
-import { CheckboxGroupConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
+import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
+
+import { CheckboxGroupConfig, FormState } from '../schema';
 import { useAddField } from '../utils/useAddField';
+import { filterFunction } from '..';
+
+const props = defineProps<{
+  config: CheckboxGroupConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+// 初始化选项
+if (props.model && !props.model[props.name]) {
+  props.model[props.name] = [];
+}
+
+const changeHandler = (v: Array<string | number | boolean>) => {
+  emit('change', v);
+};
 
-export default defineComponent({
-  name: 'm-fields-checkbox-group',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<CheckboxGroupConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change'],
-
-  setup(props, { emit }) {
-    useAddField(props.prop);
-
-    // 初始化选项
-    if (props.model && !props.model[props.name]) {
-      // eslint-disable-next-line no-param-reassign
-      props.model[props.name] = [];
-    }
-    return {
-      changeHandler: (v: Array<string | number | boolean>) => {
-        emit('change', v);
-      },
-    };
-  },
+const mForm = inject<FormState | undefined>('mForm');
+const options = computed(() => {
+  if (Array.isArray(props.config.options)) return props.config.options;
+  if (typeof props.config.options === 'function') return filterFunction(mForm, props.config.options, props);
+  return [];
 });
 </script>

package/src/fields/ColorPicker.vue

@@ -1,14 +1,16 @@
 <template>
-  <el-color-picker
+  <TMagicColorPicker
     v-model="model[name]"
     :size="size"
     :disabled="disabled"
     :showAlpha="true"
     @change="changeHandler"
-  ></el-color-picker>
+  ></TMagicColorPicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormColorPicker">
+import { TMagicColorPicker } from '@tmagic/design';
+
 import { ColorPickConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 

package/src/fields/Date.vue

@@ -1,47 +1,41 @@
 <template>
-  <el-date-picker
+  <TMagicDatePicker
     v-model="model[name]"
     type="date"
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
     :format="config.format"
-    :value-format="config.format || 'YYYY-MM-DD HH:mm:ss'"
+    :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
     @change="changeHandler"
-  ></el-date-picker>
+  ></TMagicDatePicker>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
+<script lang="ts" setup name="MFormDate">
+import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DateConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-date',
+const props = defineProps<{
+  config: DateConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
 
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<DateConfig>,
-      required: true,
-    },
-  },
+const emit = defineEmits(['change']);
 
-  emits: ['change', 'input'],
+useAddField(props.prop);
 
-  setup(props, { emit }) {
-    useAddField(props.prop);
+props.model[props.name] = datetimeFormatter(props.model[props.name], '');
 
-    props.model[props.name] = datetimeFormatter(props.model[props.name], '');
-    return {
-      changeHandler(v: string) {
-        emit('change', v);
-      },
-    };
-  },
-});
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
 </script>

package/src/fields/DateTime.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-date-picker
+  <TMagicDatePicker
     v-model="model[name]"
     popper-class="magic-datetime-picker-popper"
     type="datetime"
@@ -10,49 +10,41 @@
     :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
     :default-time="config.defaultTime"
     @change="changeHandler"
-  ></el-date-picker>
+  ></TMagicDatePicker>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
+<script lang="ts" setup name="MFormDateTime">
+import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DateTimeConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-datetime',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<DateTimeConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change'],
-
-  setup(props, { emit }) {
-    useAddField(props.prop);
-
-    const value = props.model?.[props.name].toString();
-    if (props.model) {
-      if (value === 'Invalid Date') {
-        props.model[props.name] = '';
-      } else {
-        props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat);
-      }
-    }
-
-    return {
-      value,
-      changeHandler: (v: Date) => {
-        emit('change', v);
-      },
-    };
-  },
-});
+const props = defineProps<{
+  config: DateTimeConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+const value = props.model?.[props.name].toString();
+if (props.model) {
+  if (value === 'Invalid Date') {
+    props.model[props.name] = '';
+  } else {
+    props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat);
+  }
+}
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
 </script>

package/src/fields/Daterange.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-date-picker
+  <TMagicDatePicker
     v-model="value"
     type="datetimerange"
     range-separator="-"
@@ -10,12 +10,13 @@
     :disabled="disabled"
     :default-time="config.defaultTime"
     @change="changeHandler"
-  ></el-date-picker>
+  ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDateRange">
 import { ref, watch } from 'vue';
 
+import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DaterangeConfig } from '../schema';

package/src/fields/Display.vue

@@ -2,7 +2,7 @@
   <span v-if="model">{{ model[name] }}</span>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormDisplay">
 import { DisplayConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 

package/src/fields/DynamicField.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="m-fields-dynamic-field">
-    <el-form size="small">
-      <el-form-item v-for="key in Object.keys(fieldMap.value)" :key="key" :label="fieldLabelMap.value[key]">
-        <el-input
+    <TMagicForm size="small">
+      <TMagicFormItem v-for="key in Object.keys(fieldMap.value)" :key="key" :label="fieldLabelMap.value[key]">
+        <TMagicInput
           v-model="fieldMap.value[key]"
           :placeholder="fieldLabelMap.value[key]"
           @change="inputChangeHandler(key)"
-        ></el-input>
-      </el-form-item>
-    </el-form>
+        ></TMagicInput>
+      </TMagicFormItem>
+    </TMagicForm>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup name="MFormDynamicField">
 /**
  * 动态表单，目前只支持input类型字段
  * inputType: 'dynamic-field',
@@ -23,87 +23,73 @@
  * 特别注意！！！field的上一级必须extensible: true，才能保存未声明的字段
  */
 
-import { defineComponent, onBeforeUnmount, PropType, reactive, watch } from 'vue';
+import { onBeforeUnmount, reactive, watch } from 'vue';
+
+import { TMagicForm, TMagicFormItem, TMagicInput } from '@tmagic/design';
 
 import { DynamicFieldConfig } from '../schema';
 import { getConfig } from '../utils/config';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-dynamic-field',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<DynamicFieldConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change'],
-
-  setup(props, { emit }) {
-    useAddField(props.prop);
-
-    const request = getConfig('request') as Function;
-    const fieldMap = reactive<{ [key: string]: any }>({
-      value: {},
-    });
-    const fieldLabelMap = reactive<{ [key: string]: any }>({
-      value: {},
-    });
+const props = defineProps<{
+  config: DynamicFieldConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
 
-    const changeFieldMap = async () => {
-      if (typeof props.config.returnFields !== 'function' || !props.model) return;
-      const fields = await props.config.returnFields(props.config, props.model, request);
-      fieldMap.value = {};
-      fieldLabelMap.value = {};
-      fields.forEach((v) => {
-        if (typeof v !== 'object' || v.name === undefined) return;
-        let oldVal = props.model?.[v.name] || '';
-        if (!oldVal && v.defaultValue !== undefined) {
-          oldVal = v.defaultValue;
-          emit('change', oldVal, v.name);
-        }
-        fieldMap.value[v.name] = oldVal;
-        fieldLabelMap.value[v.name] = v.label || '';
-      });
-    };
+const emit = defineEmits(['change']);
 
-    const unwatch = watch(
-      () => props.model?.[props.config.dynamicKey],
-      (val) => {
-        if (val !== '') {
-          changeFieldMap();
-        }
-      },
-      {
-        immediate: true,
-      },
-    );
+useAddField(props.prop);
 
-    onBeforeUnmount(() => {
-      if (typeof unwatch === 'function') {
-        unwatch();
-      }
-    });
+const request = getConfig('request') as Function;
+const fieldMap = reactive<{ [key: string]: any }>({
+  value: {},
+});
+const fieldLabelMap = reactive<{ [key: string]: any }>({
+  value: {},
+});
 
-    return {
-      request,
-      fieldMap,
-      fieldLabelMap,
-      unwatch,
+const changeFieldMap = async () => {
+  if (typeof props.config.returnFields !== 'function' || !props.model) return;
+  const fields = await props.config.returnFields(props.config, props.model, request);
+  fieldMap.value = {};
+  fieldLabelMap.value = {};
+  fields.forEach((v) => {
+    if (typeof v !== 'object' || v.name === undefined) return;
+    let oldVal = props.model?.[v.name] || '';
+    if (!oldVal && v.defaultValue !== undefined) {
+      oldVal = v.defaultValue;
+      emit('change', oldVal, v.name);
+    }
+    fieldMap.value[v.name] = oldVal;
+    fieldLabelMap.value[v.name] = v.label || '';
+  });
+};
 
-      changeFieldMap,
-      inputChangeHandler: (key: string) => {
-        emit('change', fieldMap.value[key], key);
-      },
-    };
+const unwatch = watch(
+  () => props.model?.[props.config.dynamicKey],
+  (val) => {
+    if (val !== '') {
+      changeFieldMap();
+    }
   },
-
-  methods: {
-    init() {},
+  {
+    immediate: true,
   },
+);
+
+onBeforeUnmount(() => {
+  if (typeof unwatch === 'function') {
+    unwatch();
+  }
 });
+
+const inputChangeHandler = (key: string) => {
+  emit('change', fieldMap.value[key], key);
+};
 </script>

package/src/fields/Hidden.vue

@@ -2,7 +2,7 @@
   <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormHidden">
 import { HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 

package/src/fields/Link.vue

@@ -2,8 +2,8 @@
   <a v-if="config.href && !disabled" target="_blank" :href="href" :style="config.css || {}">{{ displayText }}</a>
   <span v-else-if="config.href && disabled" :style="config.disabledCss || {}">{{ displayText }}</span>
   <div v-else class="m-fields-link">
-    <el-button text type="primary" @click="editHandler">点击编辑</el-button>
-    <m-form-dialog
+    <TMagicButton :text="true" type="primary" @click="editHandler">点击编辑</TMagicButton>
+    <FormDialog
       ref="editor"
       :title="config.formTitle || '编辑扩展配置'"
       :width="config.formWidth"
@@ -12,101 +12,80 @@
       :parentValues="values"
       :fullscreen="config.fullscreen"
       @submit="action"
-    ></m-form-dialog>
+    ></FormDialog>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue';
+<script lang="ts" setup name="MFormLink">
+import { computed, inject, ref } from 'vue';
+
+import { TMagicButton } from '@tmagic/design';
 
 import FormDialog from '../FormDialog.vue';
 import { FormState, LinkConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-link',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<LinkConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change'],
-
-  setup(props, { emit }) {
-    useAddField(props.prop);
+const props = defineProps<{
+  config: LinkConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+const formValue = ref({});
+const editor = ref<InstanceType<typeof FormDialog>>();
+const mForm = inject<FormState | undefined>('mForm');
+
+const href = computed(() => {
+  if (typeof props.config.href === 'function' && props.model) {
+    return props.config.href(props.model);
+  }
+  return props.config.href || props.model?.[props.name];
+});
 
-    const formValue = ref({});
-    const editor = ref<InstanceType<typeof FormDialog>>();
-    const mForm = inject<FormState | undefined>('mForm');
+const init = () => {
+  formValue.value = props.model?.[props.name] || {};
+};
 
-    const href = computed(() => {
-      if (typeof props.config.href === 'function' && props.model) {
-        return props.config.href(props.model);
-      }
-      return props.config.href || props.model?.[props.name];
+const formConfig = computed(() => {
+  if (typeof props.config.form === 'function') {
+    return props.config.form(mForm, {
+      model: props.model || {},
+      values: props.values || {},
     });
+  }
+  return props.config.form;
+});
 
-    const init = () => {
-      formValue.value = props.model?.[props.name] || {};
-    };
-
-    return {
-      // ref
-      formValue,
-      editor,
-
-      // computed methods
-      href,
-
-      formConfig: computed(() => {
-        if (typeof props.config.form === 'function') {
-          return props.config.form(mForm, {
-            model: props.model || {},
-            values: props.values || {},
-          });
-        }
-        return props.config.form;
-      }),
-
-      disable: computed(() => {
-        if (typeof props.config.disabled !== 'undefined') {
-          return props.config.disabled;
-        }
-        return !href.value;
-      }),
-
-      displayText: computed(() => {
-        if (typeof props.config.displayText === 'function') {
-          return props.config.displayText(mForm, { model: props.model || {} });
-        }
-        if (props.config.displayText) {
-          return props.config.displayText;
-        }
-        return '跳转';
-      }),
-
-      // methods
-      init,
-
-      editHandler: () => {
-        init();
-        editor.value && (editor.value.dialogVisible = true);
-      },
-
-      action: (data: any) => {
-        if (props.model) {
-          props.model[props.name] = data;
-          formValue.value = data;
-          emit('change', props.model[props.name]);
-        }
-        editor.value && (editor.value.dialogVisible = false);
-      },
-    };
-  },
+const displayText = computed(() => {
+  if (typeof props.config.displayText === 'function') {
+    return props.config.displayText(mForm, { model: props.model || {} });
+  }
+  if (props.config.displayText) {
+    return props.config.displayText;
+  }
+  return '跳转';
 });
+
+const editHandler = () => {
+  init();
+  editor.value && (editor.value.dialogVisible = true);
+};
+
+const action = (data: any) => {
+  if (props.model) {
+    props.model[props.name] = data;
+    formValue.value = data;
+    emit('change', props.model[props.name]);
+  }
+  editor.value && (editor.value.dialogVisible = false);
+};
 </script>