@tmagic/form 1.5.0-beta.1 → 1.5.0-beta.11

package/package.json

@@ -1,8 +1,9 @@
 {
-  "version": "1.5.0-beta.1",
+  "version": "1.5.0-beta.11",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
+    "dist/style.css",
     "src/theme/*"
   ],
   "main": "dist/tmagic-form.umd.cjs",
@@ -36,6 +37,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "dayjs": "^1.11.11",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.15.2"
   },
@@ -43,18 +45,18 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.1.1",
-    "@vue/compiler-sfc": "^3.4.27",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "@vue/compiler-sfc": "^3.5.0",
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.77.0",
-    "vite": "^5.3.5"
+    "sass": "^1.78.0",
+    "vite": "^5.4.3"
   },
   "peerDependencies": {
-    "vue": "^3.4.35",
+    "vue": "^3.5.0",
     "typescript": "*",
-    "@tmagic/design": "1.5.0-beta.1",
-    "@tmagic/utils": "1.5.0-beta.1"
+    "@tmagic/design": "1.5.0-beta.11",
+    "@tmagic/utils": "1.5.0-beta.11"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/Container.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     v-if="config"
-    :id="config.id"
-    :data-magic-id="config.id"
+    :data-tmagic-id="config.id"
+    :data-tmagic-form-item-prop="itemProp"
     :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
     :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
   >
@@ -37,7 +37,7 @@
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
@@ -93,7 +93,7 @@
       <!-- 上次内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
@@ -142,7 +142,7 @@
       <!-- 当前内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"

package/src/containers/Table.vue

@@ -206,7 +206,7 @@ import {
 } from '@tmagic/design';
 import { asyncLoadJs, sleep } from '@tmagic/utils';
 
-import { ColumnConfig, FormState, SortProp, TableConfig } from '../schema';
+import { FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
 import { display as displayFunc, initValue } from '../utils/form';
 
 import Container from './Container.vue';
@@ -484,7 +484,7 @@ const toggleRowSelection = (row: any, selected: boolean) => {
   tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
 };
 
-const makeConfig = (config: ColumnConfig, row: any) => {
+const makeConfig = (config: TableColumnConfig, row: any) => {
   const newConfig = cloneDeep(config);
   if (typeof config.itemsFunction === 'function') {
     newConfig.items = config.itemsFunction(row);
@@ -500,6 +500,7 @@ const upHandler = (index: number) => {
 
   timer = setTimeout(() => {
     swapArray(index, index - 1);
+    timer = undefined;
   }, 300);
 };
 
@@ -525,6 +526,7 @@ const downHandler = (index: number) => {
 
   timer = setTimeout(() => {
     swapArray(index, index + 1);
+    timer = undefined;
   }, 300);
 };
 

package/src/containers/Tabs.vue

@@ -73,7 +73,7 @@
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash-es';
 
-import { getConfig, TMagicBadge } from '@tmagic/design';
+import { getDesignConfig, TMagicBadge } from '@tmagic/design';
 
 import { FormState, TabConfig, TabPaneConfig } from '../schema';
 import { display as displayFunc, filterFunction } from '../utils/form';
@@ -88,8 +88,8 @@ type DiffCount = {
   [tabIndex: number]: number;
 };
 
-const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components')?.tabs;
+const tabPaneComponent = getDesignConfig('components')?.tabPane;
+const tabsComponent = getDesignConfig('components')?.tabs;
 
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;

package/src/fields/Date.vue

@@ -5,17 +5,17 @@
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    :format="config.format"
-    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
+    :format="config.format || 'YYYY/MM/DD'"
+    :value-format="config.valueFormat || 'YYYY/MM/DD'"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
 
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DateConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -30,7 +30,7 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-props.model[props.name] = datetimeFormatter(props.model[props.name], '');
+props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat || 'YYYY/MM/DD');
 
 const changeHandler = (v: string) => {
   emit('change', v);

package/src/fields/DateTime.vue

@@ -15,9 +15,9 @@
 
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DateTimeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -37,7 +37,11 @@ if (props.model) {
   if (value === 'Invalid Date') {
     props.model[props.name] = '';
   } else {
-    props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat);
+    props.model[props.name] = datetimeFormatter(
+      props.model[props.name],
+      '',
+      props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
+    );
   }
 }
 

package/src/fields/Daterange.vue

@@ -9,6 +9,9 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
+    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
+    :date-format="config.dateFormat || 'YYYY/MM/DD'"
+    :time-format="config.timeFormat || 'HH:mm:ss'"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
@@ -17,9 +20,9 @@
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -32,9 +35,8 @@ const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 
-// eslint-disable-next-line vue/no-setup-props-destructure
 const { names } = props.config;
-const value = ref<(Date | undefined)[] | null>([]);
+const value = ref<(Date | string | undefined)[] | null>([]);
 
 if (props.model !== undefined) {
   if (names?.length) {
@@ -44,9 +46,11 @@ if (props.model !== undefined) {
         if (!value.value) {
           value.value = [];
         }
+
+        const format = `${props.config.dateFormat || 'YYYY/MM/DD'} ${props.config.timeFormat || 'HH:mm:ss'}`;
         if (!start || !end) value.value = [];
-        if (start !== preStart) value.value[0] = new Date(start);
-        if (end !== preEnd) value.value[1] = new Date(end);
+        if (start !== preStart) value.value[0] = datetimeFormatter(start, '', format) as string;
+        if (end !== preEnd) value.value[1] = datetimeFormatter(end, '', format) as string;
       },
       {
         immediate: true,
@@ -56,7 +60,12 @@ if (props.model !== undefined) {
     watch(
       () => props.model[props.name],
       (start, preStart) => {
-        if (start !== preStart) value.value = start.map((item: string) => (item ? new Date(item) : undefined));
+        const format = `${props.config.dateFormat || 'YYYY/MM/DD'} ${props.config.timeFormat || 'HH:mm:ss'}`;
+
+        if (start !== preStart)
+          value.value = start.map((item: string) =>
+            item ? (datetimeFormatter(item, '', format) as string) : undefined,
+          );
       },
       {
         immediate: true,
@@ -71,7 +80,7 @@ const setValue = (v: Date[] | Date) => {
       return;
     }
     if (Array.isArray(v)) {
-      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+      props.model[item] = v[index];
     } else {
       props.model[item] = undefined;
     }
@@ -82,18 +91,12 @@ const changeHandler = (v: Date[]) => {
   const value = v || [];
 
   if (props.name) {
-    emit(
-      'change',
-      value.map((item?: Date) => {
-        if (item) return datetimeFormatter(item, '');
-        return undefined;
-      }),
-    );
+    emit('change', value);
   } else {
     if (names?.length) {
       setValue(value);
     }
-    emit('change', value);
+    emit('change', props.model);
   }
 };
 </script>

package/src/fields/Select.vue

@@ -80,7 +80,7 @@
 <script lang="ts" setup>
 import { inject, nextTick, onBeforeMount, ref, watch, watchEffect } from 'vue';
 
-import { getConfig as getDesignConfig, TMagicSelect } from '@tmagic/design';
+import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
 
 import type { FieldProps, FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';

package/src/fields/Text.vue

@@ -1,5 +1,5 @@
 <template>
-  <TMagicPopover :visible="popoverVisible" width="220px">
+  <TMagicPopover width="220px" :visible="popoverVisible" :destroy-on-close="true">
     <template #reference>
       <TMagicInput
         v-model="model[name]"

package/src/fields/Timerange.vue

@@ -17,7 +17,6 @@
 import { ref, watch } from 'vue';
 
 import { TMagicTimePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
@@ -59,7 +58,7 @@ const setValue = (v: Date[] | Date) => {
       return;
     }
     if (Array.isArray(v)) {
-      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+      props.model[item] = v[index];
     } else {
       props.model[item] = undefined;
     }

package/src/index.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { App } from 'vue';
+import type { App } from 'vue';
 
 import Container from './containers/Container.vue';
 import Fieldset from './containers/Fieldset.vue';
@@ -91,15 +91,15 @@ export { default as MDynamicField } from './fields/DynamicField.vue';
 
 export const createForm = <T extends [] = []>(config: FormConfig | T) => config;
 
-export interface InstallOptions {
+export interface FormInstallOptions {
   [key: string]: any;
 }
 
-const defaultInstallOpt: InstallOptions = {};
+const defaultInstallOpt: FormInstallOptions = {};
 
 export default {
-  install(app: App, opt: InstallOptions = {}) {
-    const option = Object.assign(defaultInstallOpt, opt);
+  install(app: App, opt?: FormInstallOptions) {
+    const option = Object.assign(defaultInstallOpt, opt || {});
 
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$MAGIC_FORM = option;

package/src/schema.ts

@@ -296,6 +296,9 @@ export interface DaterangeConfig extends FormItem {
   type: 'daterange';
   defaultTime?: Date[];
   names?: string[];
+  valueFormat?: string;
+  dateFormat?: string;
+  timeFormat?: string;
 }
 
 /**
@@ -632,7 +635,7 @@ export interface PanelConfig extends FormItem, ContainerCommonConfig {
   schematic?: string;
 }
 
-export interface ColumnConfig extends FormItem {
+export interface TableColumnConfig extends FormItem {
   name?: string;
   label: string;
   width?: string | number;
@@ -645,9 +648,9 @@ export interface ColumnConfig extends FormItem {
  */
 export interface TableConfig extends FormItem {
   type: 'table' | 'groupList' | 'group-list';
-  items: ColumnConfig[];
-  tableItems?: ColumnConfig[];
-  groupItems?: ColumnConfig[];
+  items: TableColumnConfig[];
+  tableItems?: TableColumnConfig[];
+  groupItems?: TableColumnConfig[];
   enableToggleMode?: boolean;
   /** 最大行数 */
   max?: number;

package/src/theme/form.scss

@@ -29,13 +29,13 @@
     margin-bottom: 10px;
   }
 
-  .el-form-item.hidden {
+  .el-form-item.tmagic-form-hidden {
     > .el-form-item__label {
       display: none;
     }
   }
 
-  .t-form__item.hidden {
+  .t-form__item.tmagic-form-hidden {
     > .t-form__label {
       display: none;
     }

package/src/utils/form.ts

@@ -18,6 +18,8 @@
 
 /* eslint-disable no-param-reassign */
 import { toRaw } from 'vue';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
 
 import {
@@ -271,3 +273,28 @@ export const initValue = async (
 
   return valuesTmp || {};
 };
+
+export const datetimeFormatter = (
+  v: string | Date,
+  defaultValue = '-',
+  format = 'YYYY-MM-DD HH:mm:ss',
+): string | number => {
+  if (v) {
+    let time: string | number;
+    if (['x', 'timestamp'].includes(format)) {
+      time = dayjs(v).valueOf();
+    } else if ((typeof v === 'string' && v.includes('Z')) || v.constructor === Date) {
+      dayjs.extend(utc);
+      // UTC字符串时间或Date对象格式化为北京时间
+      time = dayjs(v).utcOffset(8).format(format);
+    } else {
+      time = dayjs(v).format(format);
+    }
+
+    if (time !== 'Invalid Date') {
+      return time;
+    }
+    return defaultValue;
+  }
+  return defaultValue;
+};