@tmagic/form 1.1.0-beta.4 → 1.1.0-beta.7

package/package.json

@@ -1,17 +1,17 @@
 {
-  "version": "1.1.0-beta.4",
+  "version": "1.1.0-beta.7",
   "name": "@tmagic/form",
   "sideEffects": [
     "dist/*",
     "src/theme/*"
   ],
   "main": "dist/tmagic-form.umd.js",
-  "module": "dist/tmagic-form.es.js",
+  "module": "dist/tmagic-form.mjs",
   "style": "dist/style.css",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/tmagic-form.es.js",
+      "import": "./dist/tmagic-form.mjs",
       "require": "./dist/tmagic-form.umd.js"
     },
     "./dist/style.css": {
@@ -22,7 +22,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -33,29 +35,28 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.6",
-    "@tmagic/utils": "1.1.0-beta.4",
+    "@tmagic/utils": "1.1.0-beta.7",
     "element-plus": "^2.2.6",
     "lodash-es": "^4.17.21",
-    "moment": "^2.29.2",
     "sortablejs": "^1.14.0",
-    "vue": "^3.2.0"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
     "element-plus": "^2.2.6",
-    "vue": "^3.2.0"
+    "vue": "^3.2.37"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vue/compiler-sfc": "^3.2.0",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^4.3.4",
-    "vite": "^2.9.13",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4",
+    "vue-tsc": "^0.39.4"
   }
 }

package/src/Form.vue

@@ -26,22 +26,17 @@
 
 <script lang="ts">
 import { defineComponent, PropType, provide, reactive, ref, toRaw, watch } from 'vue';
-import { ElForm } from 'element-plus';
 import { cloneDeep, isEqual } from 'lodash-es';
 
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import { FormConfig, FormState, FormValue } from './schema';
 
-export interface ValidateError {
+interface ValidateError {
   message: string;
   field: string;
 }
 
-export interface FieldErrorList {
-  [field: string]: ValidateError[];
-}
-
 export default defineComponent({
   name: 'm-form',
 
@@ -112,7 +107,8 @@ export default defineComponent({
   emits: ['change', 'field-input', 'field-change'],
 
   setup(props, { emit }) {
-    const elForm = ref<InstanceType<typeof ElForm>>();
+    // InstanceType<typeof ElForm>，构建types的时候会出错
+    const elForm = ref<any>();
     const initialized = ref(false);
     const values = ref<FormValue>({});
     const fields = new Map<string, any>();

package/src/fields/Cascader.vue

@@ -24,11 +24,9 @@ import {
   getCurrentInstance,
   inject,
   PropType,
-  Ref,
   ref,
   watchEffect,
 } from 'vue';
-import { ElCascader, ElDialog } from 'element-plus';
 
 import { CascaderConfig, FormState } from '../schema';
 import { getConfig } from '../utils/config';
@@ -56,11 +54,11 @@ export default defineComponent({
 
     const requestFunc = getConfig('request') as Function;
 
-    const cascader: Ref<null | typeof ElCascader> = ref(null);
-    const dialog: Ref<null | typeof ElDialog> = ref(null);
+    const cascader = ref<any>();
+    const dialog = ref<any>();
 
     const options = Array.isArray(props.config.options) ? ref(props.config.options) : ref([]);
-    const remoteData: Ref<any> = ref(null);
+    const remoteData = ref<any>(null);
 
     const setRemoteOptions = async function () {
       const { config } = props;

package/src/fields/ColorPicker.vue

@@ -1,36 +1,29 @@
 <template>
-  <div v-if="model">
-    <el-color-picker
-      v-model="model[name]"
-      :size="size"
-      :disabled="disabled"
-      :showAlpha="true"
-      @change="changeHandler"
-    ></el-color-picker>
-  </div>
+  <el-color-picker
+    v-model="model[name]"
+    :size="size"
+    :disabled="disabled"
+    :showAlpha="true"
+    @change="changeHandler"
+  ></el-color-picker>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
+<script lang="ts" setup>
 import { ColorPickConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
-export default defineComponent({
-  name: 'm-fields-color-picker',
-});
-</script>
 
-<script lang="ts" setup>
-const emit = defineEmits(['change']);
+const props = defineProps<{
+  config: ColorPickConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
 
-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<ColorPickConfig>,
-    required: true,
-  },
-});
+const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 

package/src/fields/Daterange.vue

@@ -13,70 +13,91 @@
   ></el-date-picker>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref } from 'vue';
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
 
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DaterangeConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-daterange',
+const props = defineProps<{
+  config: DaterangeConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
 
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<DaterangeConfig>,
-      required: true,
-    },
-  },
+const emit = defineEmits(['change']);
 
-  emits: ['change'],
+useAddField(props.prop);
 
-  setup(props, { emit }) {
-    useAddField(props.prop);
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { names } = props.config;
+const value = ref<(Date | undefined)[] | null>([]);
 
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    const { names } = props.config;
-    const value = ref<(string | number)[]>([]);
+if (props.model !== undefined) {
+  if (names?.length) {
+    watch(
+      [() => props.model[names[0]], () => props.model[names[1]]],
+      ([start, end], [preStart, preEnd]) => {
+        if (!value.value) {
+          value.value = [];
+        }
+        if (!start || !end) value.value = [];
+        if (start !== preStart) value.value[0] = new Date(start);
+        if (end !== preEnd) value.value[1] = new Date(end);
+      },
+      {
+        immediate: true,
+      },
+    );
+  } else if (props.name && props.model[props.name]) {
+    watch(
+      () => props.model[props.name],
+      (start, preStart) => {
+        if (start !== preStart) value.value = start.map((item: string) => (item ? new Date(item) : undefined));
+      },
+      {
+        immediate: true,
+      },
+    );
+  }
+}
 
-    if (props.model !== undefined) {
-      if (names?.length) {
-        value.value = names.map((item) => datetimeFormatter(props.model?.[item], ''));
-      } else if (props.name && props.model[props.name]) {
-        value.value = props.model[props.name].map((item: string) => datetimeFormatter(item, ''));
-      }
+const setValue = (v: Date[] | Date) => {
+  names?.forEach((item, index) => {
+    if (!props.model) {
+      return;
     }
+    if (Array.isArray(v)) {
+      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+    } else {
+      props.model[item] = undefined;
+    }
+  });
+};
 
-    const setValue = (v: Date[] | Date) => {
-      if (names?.length && v instanceof Array) {
-        names.forEach((item, index) => {
-          if (props.model) {
-            props.model[item] = datetimeFormatter(v[index].toString(), '');
-          }
-        });
-      } else if (props.model && props.name && v instanceof Date) {
-        props.model[props.name] = datetimeFormatter(v.toString(), '');
-      } else if (names?.length) {
-        names.forEach((item) => {
-          if (props.model) {
-            props.model[item] = undefined;
-          }
-        });
-      } else if (props.name) {
-        props.model[props.name] = undefined;
-      }
-    };
+const changeHandler = (v: Date[]) => {
+  const value = v || [];
 
-    return {
-      value,
-      changeHandler(v: Date[]) {
-        setValue(v);
-        emit('change', v);
-      },
-    };
-  },
-});
+  if (props.name) {
+    emit(
+      'change',
+      value.map((item?: Date) => {
+        if (item) return datetimeFormatter(item, '');
+        return undefined;
+      }),
+    );
+  } else {
+    if (names?.length) {
+      setValue(value);
+    }
+    emit('change', value);
+  }
+};
 </script>

package/src/fields/Display.vue

@@ -1,33 +1,23 @@
 <template>
-  <span v-if="model">{{ model[n] }}</span>
+  <span v-if="model">{{ model[name] }}</span>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-
+<script setup lang="ts">
 import { DisplayConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-display',
-});
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<DisplayConfig>,
-    required: true,
-  },
-});
-
-const n = computed(() => props.name || props.config.name || '');
+const props = defineProps<{
+  config: DisplayConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+}>();
 
-if (props.config.initValue && n.value && props.model) {
-  // eslint-disable-next-line no-param-reassign,vue/no-setup-props-destructure
-  props.model[n.value] = props.config.initValue;
+if (props.config.initValue && props.model) {
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  props.model[props.name] = props.config.initValue;
 }
 
 useAddField(props.prop);

package/src/fields/Hidden.vue

@@ -1,29 +1,19 @@
 <template>
-  <input v-if="model" v-model="model[n]" type="hidden" />
+  <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-
+<script setup lang="ts">
 import { HiddenConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-hidden',
-});
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<HiddenConfig>,
-    required: true,
-  },
-});
-
-const n = computed(() => props.name || props.config.name || '');
+const props = defineProps<{
+  config: HiddenConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+}>();
 
 useAddField(props.prop);
 </script>

package/src/fields/Select.vue

@@ -27,7 +27,6 @@
 
 <script lang="ts">
 import { defineComponent, inject, onBeforeMount, onMounted, PropType, Ref, ref, watch } from 'vue';
-import { ElSelect } from 'element-plus';
 
 import { FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
 import { getConfig } from '../utils/config';
@@ -56,7 +55,7 @@ export default defineComponent({
     if (!props.model) throw new Error('不能没有model');
     useAddField(props.prop);
 
-    const select = ref<typeof ElSelect>();
+    const select = ref<any>();
     const mForm = inject<FormState | undefined>('mForm');
     const options = ref<SelectOption[] | SelectGroupOption[]>([]);
     const localOptions = ref<SelectOption[] | SelectGroupOption[]>([]);

package/src/index.ts

@@ -105,17 +105,17 @@ const install = (app: App, opt: any) => {
   app.component(Text.name, Text);
   app.component(Number.name, Number);
   app.component(Textarea.name, Textarea);
-  app.component(Hidden.name, Hidden);
+  app.component('m-fields-hidden', Hidden);
   app.component(Date.name, Date);
   app.component(DateTime.name, DateTime);
   app.component(Time.name, Time);
   app.component(Checkbox.name, Checkbox);
   app.component(Switch.name, Switch);
-  app.component(Daterange.name, Daterange);
-  app.component(ColorPicker.name, ColorPicker);
+  app.component('m-fields-daterange', Daterange);
+  app.component('m-fields-color-picker', ColorPicker);
   app.component(CheckboxGroup.name, CheckboxGroup);
   app.component(RadioGroup.name, RadioGroup);
-  app.component(Display.name, Display);
+  app.component('m-fields-display', Display);
   app.component(Link.name, Link);
   app.component(Select.name, Select);
   app.component(Cascader.name, Cascader);

package/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

package/types/Form.vue.d.ts

@@ -0,0 +1,125 @@
+import { PropType } from 'vue';
+import { FormConfig, FormState, FormValue } from './schema';
+declare const _default: import("vue").DefineComponent<{
+    initValues: {
+        type: ObjectConstructor;
+        required: true;
+        default: () => {};
+    };
+    parentValues: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    config: {
+        type: PropType<FormConfig>;
+        required: true;
+        default: () => never[];
+    };
+    labelWidth: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    height: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    stepActive: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: () => number;
+    };
+    size: {
+        type: PropType<"small" | "default" | "large">;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    labelPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    keyProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperClass: {
+        type: StringConstructor;
+    };
+}, {
+    initialized: import("vue").Ref<boolean>;
+    values: import("vue").Ref<FormValue>;
+    elForm: import("vue").Ref<any>;
+    formState: FormState;
+    changeHandler: () => void;
+    resetForm: () => any;
+    submitForm: (native?: boolean) => Promise<any>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], "change" | "field-input" | "field-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    initValues: {
+        type: ObjectConstructor;
+        required: true;
+        default: () => {};
+    };
+    parentValues: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    config: {
+        type: PropType<FormConfig>;
+        required: true;
+        default: () => never[];
+    };
+    labelWidth: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    height: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    stepActive: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: () => number;
+    };
+    size: {
+        type: PropType<"small" | "default" | "large">;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    labelPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    keyProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperClass: {
+        type: StringConstructor;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onField-input"?: ((...args: any[]) => any) | undefined;
+    "onField-change"?: ((...args: any[]) => any) | undefined;
+}, {
+    config: FormConfig;
+    initValues: Record<string, any>;
+    keyProp: string;
+    parentValues: Record<string, any>;
+    labelWidth: string;
+    disabled: boolean;
+    height: string;
+    stepActive: string | number;
+    inline: boolean;
+    labelPosition: string;
+}>;
+export default _default;