@tmagic/form 1.6.0 → 1.7.0-beta.0

package/src/fields/Checkbox.vue

@@ -1,12 +1,12 @@
 <template>
   <TMagicCheckbox
-    v-model="model[name]"
+    :model-value="model[name]"
     :size="size"
     :trueValue="activeValue"
     :falseValue="inactiveValue"
     :disabled="disabled"
-    @change="changeHandler"
-    >{{ config.text }}</TMagicCheckbox
+    @update:model-value="changeHandler"
+    ><template #default v-if="!config.useLabel">{{ config.text }}</template></TMagicCheckbox
   >
 </template>
 

package/src/fields/CheckboxGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <TMagicCheckboxGroup v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
+  <TMagicCheckboxGroup :model-value="model[name]" :size="size" :disabled="disabled" @update:model-value="changeHandler">
     <TMagicCheckbox v-for="option in options" :value="option.value" :key="option.value" :disabled="option.disabled"
       >{{ option.text }}
     </TMagicCheckbox>

package/src/fields/ColorPicker.vue

@@ -1,10 +1,10 @@
 <template>
   <TMagicColorPicker
-    v-model="model[name]"
+    :model-value="model[name]"
     :size="size"
     :disabled="disabled"
     :showAlpha="true"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicColorPicker>
 </template>
 

package/src/fields/Date.vue

@@ -1,13 +1,13 @@
 <template>
   <TMagicDatePicker
-    v-model="model[name]"
+    :model-value="model[name]"
     type="date"
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
     :format="config.format || 'YYYY/MM/DD'"
     :value-format="config.valueFormat || 'YYYY/MM/DD'"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicDatePicker>
 </template>
 

package/src/fields/DateTime.vue

@@ -1,6 +1,6 @@
 <template>
   <TMagicDatePicker
-    v-model="model[name]"
+    :model-value="model[name]"
     popper-class="magic-datetime-picker-popper"
     type="datetime"
     :size="size"
@@ -9,7 +9,7 @@
     :format="config.format || 'YYYY/MM/DD HH:mm:ss'"
     :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     :default-time="config.defaultTime"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicDatePicker>
 </template>
 

package/src/fields/Daterange.vue

@@ -1,6 +1,6 @@
 <template>
   <TMagicDatePicker
-    v-model="value"
+    :model-value="value"
     type="datetimerange"
     range-separator="-"
     start-placeholder="开始日期"
@@ -12,7 +12,7 @@
     :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"
+    @update:model-value="changeHandler"
   ></TMagicDatePicker>
 </template>
 

package/src/fields/Number.vue

@@ -1,7 +1,7 @@
 <template>
   <TMagicInputNumber
     v-if="model"
-    v-model="model[name]"
+    :model-value="model[name]"
     clearable
     controls-position="right"
     :size="size"
@@ -10,7 +10,7 @@
     :step="config.step"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
     @input="inputHandler"
   ></TMagicInputNumber>
 </template>

package/src/fields/NumberRange.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="m-fields-number-range">
     <TMagicInput
-      v-model="model[name][0]"
-      clearable
+      :model-value="model[name][0]"
+      :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @change="minChangeHandler"
+      @update:model-value="minChangeHandler"
     ></TMagicInput>
     <span class="split-tag">-</span>
     <TMagicInput
-      v-model="model[name][1]"
-      clearable
+      :model-value="model[name][1]"
+      :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @change="maxChangeHandler"
+      @update:model-value="maxChangeHandler"
     ></TMagicInput>
   </div>
 </template>

package/src/fields/RadioGroup.vue

@@ -1,22 +1,18 @@
 <template>
-  <TMagicRadioGroup v-if="model" v-model="model[name]" :size="size" :disabled="disabled">
+  <TMagicRadioGroup v-if="model" :model-value="model[name]" :size="size" :disabled="disabled">
     <component
-      :is="itemComponent"
       v-for="option in config.options"
+      :is="itemComponent"
       :value="option.value"
       :key="`${option.value}`"
-      @click.prevent="clickHandler(option.value)"
+      @click="clickHandler(option.value)"
     >
-      <TMagicTooltip v-if="option.tooltip" placement="top-start" :content="option.tooltip">
+      <TMagicTooltip :disabled="!Boolean(option.tooltip)" placement="top-start" :content="option.tooltip">
         <div>
-          <TMagicIcon v-if="option.icon" :size="'16'"><component :is="option.icon"></component></TMagicIcon>
+          <TMagicIcon v-if="option.icon" :size="iconSize"><component :is="option.icon"></component></TMagicIcon>
           <span>{{ option.text }}</span>
         </div>
       </TMagicTooltip>
-      <div v-else>
-        <TMagicIcon v-if="option.icon" :size="'16'"><component :is="option.icon"></component></TMagicIcon>
-        <span>{{ option.text }}</span>
-      </div>
     </component>
   </TMagicRadioGroup>
 </template>
@@ -39,14 +35,20 @@ const itemComponent = computed(() => (props.config.childType === 'button' ? TMag
 
 const emit = defineEmits(['change']);
 
-const changeHandler = (value: number) => {
-  emit('change', value);
-};
-
-const clickHandler = (item: any) => {
-  props.model[props.name] = props.model[props.name] === item ? '' : item;
-  changeHandler(props.model[props.name]);
+const clickHandler = (item: string | number | boolean) => {
+  // 再次点击取消选中
+  emit('change', props.model[props.name] === item ? '' : item);
 };
 
 useAddField(props.prop);
+
+const iconSize = computed(() => {
+  if (props.size === 'small') {
+    return '12';
+  }
+  if (props.size === 'large') {
+    return '16';
+  }
+  return '14';
+});
 </script>

package/src/fields/Select.vue

@@ -1,7 +1,7 @@
 <template>
   <TMagicSelect
     v-if="model"
-    v-model="model[name]"
+    :model-value="model[name]"
     v-loading="loading"
     class="m-select"
     ref="tMagicSelect"
@@ -16,7 +16,7 @@
     :allow-create="config.allowCreate"
     :disabled="disabled"
     :remote-method="config.remote && remoteMethod"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
     @visible-change="visibleHandler"
   >
     <template v-if="config.group">

package/src/fields/Switch.vue

@@ -1,11 +1,11 @@
 <template>
   <TMagicSwitch
-    v-model="model[name]"
+    :model-value="model[name]"
     :size="size"
     :activeValue="activeValue"
     :inactiveValue="inactiveValue"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicSwitch>
 </template>
 

package/src/fields/Text.vue

@@ -1,16 +1,19 @@
 <template>
-  <div style="width: 100%">
+  <div class="m-fields-text">
     <TMagicInput
-      v-model="model[name]"
+      :model-value="model[name]"
       ref="input"
       clearable
       :size="size"
       :placeholder="config.placeholder"
       :disabled="disabled"
-      @change="changeHandler"
+      @update:model-value="changeHandler"
       @input="inputHandler"
       @keyup="keyUpHandler($event)"
     >
+      <template #prepend v-if="config.prepend">
+        <span>{{ config.prepend }}</span>
+      </template>
       <template #append v-if="appendConfig">
         <TMagicButton
           v-if="appendConfig.type === 'button'"
@@ -20,6 +23,7 @@
         >
           {{ appendConfig.text }}
         </TMagicButton>
+        <span v-else>{{ appendConfig.text }}</span>
       </template>
     </TMagicInput>
 
@@ -66,18 +70,26 @@ const mForm = inject<FormState | undefined>('mForm');
 const appendConfig = computed(() => {
   if (typeof props.config.append === 'string') {
     return {
+      type: 'text',
       text: props.config.append,
-      type: 'button',
       handler: undefined,
     };
   }
-
-  if (props.config.append && typeof props.config.append === 'object') {
-    if (props.config.append.value === 0) {
-      return false;
+  if (typeof props.config.append === 'object') {
+    if (typeof props.config.append?.handler === 'function') {
+      return {
+        type: 'button',
+        text: props.config.append.text,
+        handler: props.config.append.handler,
+      };
     }
+    if (props.config.append) {
+      if (props.config.append.value === 0) {
+        return false;
+      }
 
-    return props.config.append;
+      return props.config.append;
+    }
   }
 
   return false;

package/src/fields/Textarea.vue

@@ -1,12 +1,12 @@
 <template>
   <TMagicInput
-    v-model="model[name]"
+    :model-value="model[name]"
     type="textarea"
     :size="size"
     clearable
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
     @input="inputHandler"
   >
   </TMagicInput>

package/src/fields/Time.vue

@@ -1,12 +1,12 @@
 <template>
   <TMagicTimePicker
-    v-model="model[name]"
+    :model-value="model[name]"
     :value-format="config.valueFormat || 'HH:mm:ss'"
     :format="config.format || 'HH:mm:ss'"
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicTimePicker>
 </template>
 

package/src/fields/Timerange.vue

@@ -1,6 +1,6 @@
 <template>
   <TMagicTimePicker
-    v-model="value"
+    :model-value="value"
     is-range
     range-separator="-"
     start-placeholder="开始时间"
@@ -9,7 +9,7 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicTimePicker>
 </template>
 

package/src/index.ts

@@ -20,11 +20,11 @@ import type { App } from 'vue';
 
 import Container from './containers/Container.vue';
 import Fieldset from './containers/Fieldset.vue';
+import FlexLayout from './containers/FlexLayout.vue';
 import GroupList from './containers/GroupList.vue';
 import Panel from './containers/Panel.vue';
 import Row from './containers/Row.vue';
 import MStep from './containers/Step.vue';
-import Table from './containers/Table.vue';
 import Tabs from './containers/Tabs.vue';
 import Cascader from './fields/Cascader.vue';
 import Checkbox from './fields/Checkbox.vue';
@@ -46,6 +46,7 @@ import Text from './fields/Text.vue';
 import Textarea from './fields/Textarea.vue';
 import Time from './fields/Time.vue';
 import Timerange from './fields/Timerange.vue';
+import Table from './table/Table.vue';
 import { setConfig } from './utils/config';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
@@ -63,10 +64,11 @@ export { default as MFormDrawer } from './FormDrawer.vue';
 export { default as MFormBox } from './FormBox.vue';
 export { default as MContainer } from './containers/Container.vue';
 export { default as MFieldset } from './containers/Fieldset.vue';
+export { default as MFlexLayout } from './containers/FlexLayout.vue';
 export { default as MPanel } from './containers/Panel.vue';
 export { default as MRow } from './containers/Row.vue';
 export { default as MTabs } from './containers/Tabs.vue';
-export { default as MTable } from './containers/Table.vue';
+export { default as MTable } from './table/Table.vue';
 export { default as MGroupList } from './containers/GroupList.vue';
 export { default as MText } from './fields/Text.vue';
 export { default as MNumber } from './fields/Number.vue';
@@ -114,6 +116,7 @@ export default {
     app.component('m-form-step', MStep);
     app.component('m-form-table', Table);
     app.component('m-form-tab', Tabs);
+    app.component('m-form-flex-layout', FlexLayout);
     app.component('m-fields-text', Text);
     app.component('m-fields-img-upload', Text);
     app.component('m-fields-number', Number);

package/src/table/ActionsColumn.vue

@@ -0,0 +1,97 @@
+<template>
+  <slot name="operateCol" :scope="{ $index: index, row: row }"></slot>
+  <TMagicButton
+    v-show="showDelete(index + 1 + currentPage * pageSize - 1)"
+    size="small"
+    type="danger"
+    link
+    title="删除"
+    :icon="Delete"
+    @click="removeHandler(index + 1 + currentPage * pageSize - 1)"
+  ></TMagicButton>
+
+  <TMagicButton
+    v-if="copyable(index + 1 + currentPage * pageSize - 1)"
+    link
+    size="small"
+    type="primary"
+    title="复制"
+    :icon="DocumentCopy"
+    :disabled="disabled"
+    @click="copyHandler(index + 1 + currentPage * pageSize - 1)"
+  ></TMagicButton>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { Delete, DocumentCopy } from '@element-plus/icons-vue';
+import { cloneDeep } from 'lodash-es';
+
+import { TMagicButton } from '@tmagic/design';
+
+import type { FormState, TableConfig } from '../schema';
+
+const emit = defineEmits(['change']);
+
+const props = defineProps<{
+  config: TableConfig;
+  model: any;
+  name: string | number;
+  disabled?: boolean;
+  currentPage: number;
+  pageSize: number;
+  index: number;
+  row: any;
+  prop?: string;
+  sortKey?: string;
+}>();
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const removeHandler = (index: number) => {
+  if (props.disabled) return;
+  emit('change', props.model[props.name].toSpliced(index, 1));
+};
+
+const copyHandler = (index: number) => {
+  const inputs = cloneDeep(props.model[props.name][index]);
+  const { length } = props.model[props.name];
+  if (props.sortKey && length) {
+    inputs[props.sortKey] = props.model[props.name][length - 1][props.sortKey] - 1;
+  }
+
+  emit('change', [...props.model[props.name], inputs], {
+    changeRecords: [
+      {
+        propPath: `${props.prop}.${props.model[props.name].length}`,
+        value: inputs,
+      },
+    ],
+  });
+};
+
+// 希望支持单行可控制是否显示删除按钮，不会影响现有逻辑
+const showDelete = (index: number) => {
+  const deleteFunc = props.config.delete;
+  if (deleteFunc && typeof deleteFunc === 'function') {
+    return deleteFunc(props.model[props.name], index, mForm?.values);
+  }
+  return props.config.delete ?? true;
+};
+
+const copyable = (index: number) => {
+  const copyableFunc = props.config.copyable;
+  if (copyableFunc && typeof copyableFunc === 'function') {
+    return copyableFunc(mForm, {
+      values: mForm?.initValues || {},
+      model: props.model,
+      parent: mForm?.parentValues || {},
+      formValue: mForm?.values || props.model,
+      prop: props.prop,
+      config: props.config,
+      index,
+    });
+  }
+  return props.config.copyable ?? true;
+};
+</script>

package/src/table/SortColumn.vue

@@ -0,0 +1,101 @@
+<template>
+  <TMagicTooltip v-if="index + 1 + currentPage * pageSize - 1 !== 0" content="点击上移，双击置顶" placement="top">
+    <TMagicButton
+      plain
+      size="small"
+      type="primary"
+      :icon="ArrowUp"
+      :disabled="disabled"
+      link
+      @click="upHandler(index + 1 + currentPage * pageSize - 1)"
+      @dblclick="topHandler(index + 1 + currentPage * pageSize - 1)"
+    ></TMagicButton>
+  </TMagicTooltip>
+  <TMagicTooltip
+    v-if="index + 1 + currentPage * pageSize - 1 !== model[name].length - 1"
+    content="点击下移，双击置底"
+    placement="top"
+  >
+    <TMagicButton
+      plain
+      size="small"
+      type="primary"
+      :icon="ArrowDown"
+      :disabled="disabled"
+      link
+      @click="downHandler(index + 1 + currentPage * pageSize - 1)"
+      @dblclick="bottomHandler(index + 1 + currentPage * pageSize - 1)"
+    ></TMagicButton>
+  </TMagicTooltip>
+</template>
+
+<script setup lang="ts">
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
+
+const props = defineProps<{
+  index: number;
+  disabled?: boolean;
+  currentPage: number;
+  pageSize: number;
+  name: string | number;
+  model: any;
+}>();
+
+const emit = defineEmits(['swap']);
+
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const upHandler = (index: number) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  timer = setTimeout(() => {
+    emit('swap', index, index - 1);
+    timer = null;
+  }, 300);
+};
+
+const topHandler = (index: number) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  // 首先判断当前元素需要上移几个位置,置底移动到数组的第一位
+  const moveNum = index;
+
+  // 循环出需要一个一个上移的次数
+  for (let i = 0; i < moveNum; i++) {
+    emit('swap', index, index - 1);
+    index -= 1;
+  }
+};
+
+const downHandler = (index: number) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  timer = setTimeout(() => {
+    emit('swap', index, index + 1);
+    timer = null;
+  }, 300);
+};
+
+const bottomHandler = (index: number) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+
+  // 首先判断当前元素需要上移几个位置,置底移动到数组的第一位
+  const moveNum = props.model[props.name].length - 1 - index;
+
+  // 循环出需要一个一个上移的次数
+  for (let i = 0; i < moveNum; i++) {
+    emit('swap', index, index + 1);
+    index += 1;
+  }
+};
+</script>