@tmagic/form 1.0.6 → 1.1.0-beta.10

package/package.json

@@ -1,17 +1,17 @@
 {
-  "version": "1.0.6",
+  "version": "1.1.0-beta.10",
   "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"
@@ -32,30 +34,29 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "1.0.6",
+    "@element-plus/icons-vue": "^2.0.6",
+    "@tmagic/utils": "1.1.0-beta.10",
     "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/containers/Container.vue

@@ -104,7 +104,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, ref, resolveComponent, watchEffect } from 'vue';
-import { WarningFilled } from '@element-plus/icons';
+import { WarningFilled } from '@element-plus/icons-vue';
 
 import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';

package/src/containers/GroupListItem.vue

@@ -2,7 +2,7 @@
   <div class="m-fields-group-list-item">
     <div>
       <el-icon style="margin-right: 7px" @click="expandHandler"
-        ><caret-bottom v-if="expand" /><caret-right v-else
+        ><CaretBottom v-if="expand" /><CaretRight v-else
       /></el-icon>
 
       <el-button text @click="expandHandler">{{ title }}</el-button>
@@ -17,7 +17,7 @@
 
       <template v-if="movable()">
         <el-button v-show="index !== 0" text size="small" @click="changeOrder(-1)"
-          >上移<el-icon><CaretRight /></el-icon
+          >上移<el-icon><CaretTop /></el-icon
         ></el-button>
         <el-button v-show="index !== length - 1" text size="small" @click="changeOrder(1)"
           >下移<el-icon><CaretBottom /></el-icon
@@ -41,7 +41,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, ref, watchEffect } from 'vue';
-import { CaretBottom, CaretRight, Delete } from '@element-plus/icons';
+import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
 import { FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';
@@ -49,7 +49,7 @@ import { filterFunction } from '../utils/form';
 export default defineComponent({
   name: 'm-form-group-list-item',
 
-  components: { CaretRight, CaretBottom },
+  components: { CaretBottom, CaretRight, CaretTop },
 
   props: {
     labelWidth: String,

package/src/containers/Panel.vue

@@ -51,7 +51,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, ref } from 'vue';
-import { CaretBottom, CaretRight } from '@element-plus/icons';
+import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
 import { FormState, PanelConfig } from '../schema';
 import { filterFunction } from '../utils/form';

package/src/containers/Table.vue

@@ -153,7 +153,7 @@
 <script lang="ts">
 /* eslint-disable no-param-reassign */
 import { computed, defineComponent, inject, onMounted, PropType, ref, toRefs } from 'vue';
-import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons';
+import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { ElMessage, UploadFile } from 'element-plus';
 import { cloneDeep } from 'lodash-es';
 import Sortable, { SortableEvent } from 'sortablejs';

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/fields/Text.vue

@@ -26,6 +26,8 @@
 <script lang="ts">
 import { computed, defineComponent, inject, PropType } from 'vue';
 
+import { isNumber } from '@tmagic/utils';
+
 import { FormState, TextConfig } from '../schema';
 import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
@@ -86,7 +88,7 @@ export default defineComponent({
         const value = props.model[modelName.value];
         let num;
         let unit;
-        if (/^([0-9.]+)$/.test(value)) {
+        if (isNumber(value)) {
           num = +value;
         } else {
           value.replace(/^([0-9.]+)([a-z%]+)$/, ($0: string, $1: string, $2: string) => {
@@ -100,7 +102,7 @@ export default defineComponent({
         }
 
         const ctrl = navigator.platform.match('Mac') ? $event.metaKey : $event.ctrlKey;
-        const shif = $event.shiftKey;
+        const shift = $event.shiftKey;
         const alt = $event.altKey;
 
         if (arrowUp) {
@@ -108,7 +110,7 @@ export default defineComponent({
             num += 100;
           } else if (alt) {
             num = (num * 10000 + 1000) / 10000;
-          } else if (shif) {
+          } else if (shift) {
             num = num + 10;
           } else {
             num += 1;
@@ -118,7 +120,7 @@ export default defineComponent({
             num -= 100;
           } else if (alt) {
             num = (num * 10000 - 1000) / 10000;
-          } else if (shif) {
+          } else if (shift) {
             num -= 10;
           } else {
             num -= 1;

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"
+	],
+}