@tmagic/form 1.2.0-beta.8 → 1.2.0

package/src/containers/Col.vue

@@ -7,12 +7,13 @@
       :label-width="config.labelWidth || labelWidth"
       :expand-more="expandMore"
       :size="size"
+      :disabled="disabled"
       @change="changeHandler"
     ></Container>
   </TMagicCol>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCol">
 import { computed, inject } from 'vue';
 
 import { TMagicCol } from '@tmagic/design';
@@ -30,6 +31,7 @@ const props = defineProps<{
   span?: number;
   size?: string;
   prop?: string;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['change']);

package/src/containers/Container.vue

@@ -21,6 +21,7 @@
       :is="tagName"
       :model="model"
       :config="config"
+      :disabled="disabled"
       :name="name"
       :prop="itemProp"
       :step-active="stepActive"
@@ -87,6 +88,7 @@
           :model="name || name === 0 ? model[name] : model"
           :config="item"
           :size="size"
+          :disabled="disabled"
           :step-active="stepActive"
           :expand-more="expand"
           :label-width="itemLabelWidth"
@@ -97,12 +99,14 @@
     </template>
 
     <div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
-      <TMagicButton text @click="expandHandler">{{ expand ? '收起配置' : '展开更多配置' }}</TMagicButton>
+      <TMagicButton type="primary" size="small" :disabled="false" text @click="expandHandler">{{
+        expand ? '收起配置' : '展开更多配置'
+      }}</TMagicButton>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormContainer">
 import { computed, inject, ref, resolveComponent, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 
@@ -116,6 +120,7 @@ const props = withDefaults(
     model: FormValue;
     config: ChildConfig;
     prop?: string;
+    disabled?: boolean;
     labelWidth?: string;
     expandMore?: boolean;
     stepActive?: string | number;
@@ -157,7 +162,7 @@ const tagName = computed(() => {
   return 'm-fields-text';
 });
 
-const disabled = computed(() => filterFunction(mForm, props.config.disabled, props));
+const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 
 const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
 
@@ -177,11 +182,12 @@ const type = computed((): string => {
 });
 
 const display = computed((): boolean => {
-  if (props.config.display === 'expand') {
+  const value = displayFunction(mForm, props.config.display, props);
+
+  if (value === 'expand') {
     return expand.value;
   }
-
-  return displayFunction(mForm, props.config.display, props);
+  return value;
 });
 
 const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);

package/src/containers/Fieldset.vue

@@ -27,6 +27,7 @@
           :rules="name ? rules[name] : []"
           :config="item"
           :prop="prop"
+          :disabled="disabled"
           :labelWidth="lWidth"
           :size="size"
           @change="change"
@@ -46,13 +47,14 @@
         :prop="prop"
         :labelWidth="lWidth"
         :size="size"
+        :disabled="disabled"
         @change="change"
       ></Container>
     </template>
   </fieldset>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormFieldset">
 import { computed, inject, watch } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
@@ -69,6 +71,7 @@ const props = withDefaults(
     model: Record<string, any>;
     config: FieldsetConfig;
     rules?: any;
+    disabled?: boolean;
   }>(),
   {
     rules: {},

package/src/containers/GroupList.vue

@@ -15,19 +15,20 @@
       :index="index"
       :label-width="labelWidth"
       :size="size"
+      :disabled="disabled"
       :group-model="model[name]"
       @remove-item="removeHandler"
       @swap-item="swapHandler"
       @change="changeHandler"
     ></MFieldsGroupListItem>
 
-    <TMagicButton @click="addHandler" size="small" v-if="addable">添加组</TMagicButton>
+    <TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">添加组</TMagicButton>
 
     <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormGroupList">
 import { computed, inject } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 
@@ -45,6 +46,7 @@ const props = defineProps<{
   labelWidth?: string;
   prop?: string;
   size?: string;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['change']);

package/src/containers/GroupListItem.vue

@@ -5,21 +5,22 @@
         ><CaretBottom v-if="expand" /><CaretRight v-else
       /></TMagicIcon>
 
-      <TMagicButton text @click="expandHandler">{{ title }}</TMagicButton>
+      <TMagicButton text :disabled="disabled" @click="expandHandler">{{ title }}</TMagicButton>
 
       <TMagicButton
         v-show="showDelete(parseInt(String(index)))"
+        style="color: #f56c6c"
         text
         :icon="Delete"
-        style="color: #f56c6c"
+        :disabled="disabled"
         @click="removeHandler"
       ></TMagicButton>
 
       <template v-if="movable()">
-        <TMagicButton v-show="index !== 0" text size="small" @click="changeOrder(-1)"
+        <TMagicButton v-show="index !== 0" text :disabled="disabled" size="small" @click="changeOrder(-1)"
           >上移<TMagicIcon><CaretTop /></TMagicIcon
         ></TMagicButton>
-        <TMagicButton v-show="index !== length - 1" text size="small" @click="changeOrder(1)"
+        <TMagicButton v-show="index !== length - 1" :disabled="disabled" text size="small" @click="changeOrder(1)"
           >下移<TMagicIcon><CaretBottom /></TMagicIcon
         ></TMagicButton>
       </template>
@@ -34,12 +35,13 @@
       :labelWidth="labelWidth"
       :prop="`${prop}${prop ? '.' : ''}${String(index)}`"
       :size="size"
+      :disabled="disabled"
       @change="changeHandler"
     ></Container>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormGroupListItem">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
@@ -58,6 +60,7 @@ const props = defineProps<{
   prop?: string;
   size?: string;
   index: number;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['swap-item', 'remove-item', 'change']);

package/src/containers/Panel.vue

@@ -25,6 +25,7 @@
             :model="name ? model[name] : model"
             :prop="prop"
             :size="size"
+            :disabled="disabled"
             :label-width="config.labelWidth || labelWidth"
             @change="changeHandler"
           ></Container>
@@ -41,6 +42,7 @@
           :model="name ? model[name] : model"
           :prop="prop"
           :size="size"
+          :disabled="disabled"
           :label-width="config.labelWidth || labelWidth"
           @change="changeHandler"
         ></Container>
@@ -49,7 +51,7 @@
   </TMagicCard>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormPanel">
 import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
@@ -67,6 +69,7 @@ const props = defineProps<{
   labelWidth?: string;
   prop?: string;
   size?: string;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['change']);

package/src/containers/Row.vue

@@ -10,12 +10,13 @@
       :model="name ? model[name] : model"
       :prop="prop"
       :size="size"
+      :disabled="disabled"
       @change="changeHandler"
     />
   </TMagicRow>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormRow">
 import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';
@@ -32,6 +33,7 @@ const props = defineProps<{
   prop?: string;
   size?: string;
   expandMore?: boolean;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['change']);

package/src/containers/Step.vue

@@ -20,6 +20,7 @@
           :model="step.name ? model[step.name] : model"
           :prop="`${step.name}`"
           :size="size"
+          :disabled="disabled"
           :label-width="config.labelWidth || labelWidth"
           @change="changeHandler"
         ></Container>
@@ -28,7 +29,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormStep">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicStep, TMagicSteps } from '@tmagic/design';
@@ -44,6 +45,7 @@ const props = withDefaults(
     stepActive?: number;
     labelWidth?: string;
     size?: string;
+    disabled?: boolean;
   }>(),
   {
     stepActive: 1,

package/src/containers/Table.vue

@@ -7,7 +7,8 @@
           v-if="model[modelName]"
           ref="tMagicTable"
           style="width: 100%"
-          :data="model[modelName]"
+          :row-key="config.rowKey || 'id'"
+          :data="data"
           :border="config.border"
           :max-height="config.maxHeight"
           :default-expand-all="true"
@@ -49,6 +50,7 @@
                   size="small"
                   type="primary"
                   :icon="ArrowUp"
+                  :disabled="disabled"
                   text
                   @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                   @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
@@ -64,6 +66,7 @@
                   size="small"
                   type="primary"
                   :icon="ArrowDown"
+                  :disabled="disabled"
                   text
                   @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                   @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
@@ -99,9 +102,10 @@
                 <Container
                   v-if="scope.$index > -1"
                   labelWidth="0"
+                  :disabled="disabled"
                   :prop="getProp(scope.$index)"
                   :rules="column.rules"
-                  :config="makeConfig(column)"
+                  :config="makeConfig(column, scope.row)"
                   :model="scope.row"
                   :size="size"
                   @change="$emit('change', model[modelName])"
@@ -112,7 +116,10 @@
         </TMagicTable>
       </TMagicTooltip>
       <slot></slot>
-      <TMagicButton v-if="addable" size="small" type="primary" plain @click="newHandler()">添加</TMagicButton> &nbsp;
+      <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+        >添加</TMagicButton
+      >
+      &nbsp;
       <TMagicButton
         :icon="Grid"
         size="small"
@@ -132,18 +139,21 @@
       </TMagicButton>
       <TMagicUpload
         v-if="importable"
+        style="display: inline-block"
         ref="excelBtn"
         action="/noop"
+        :disabled="disabled"
         :on-change="excelHandler"
         :auto-upload="false"
-        style="display: inline-block"
       >
-        <TMagicButton size="small" type="success" plain>导入EXCEL</TMagicButton> </TMagicUpload
+        <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
       >&nbsp;
-      <TMagicButton v-if="importable" size="small" type="warning" plain @click="clearHandler()">清空</TMagicButton>
+      <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
+        >清空</TMagicButton
+      >
     </div>
 
-    <div class="bottom" style="text-align: right">
+    <div class="bottom" style="text-align: right" v-if="config.pagination">
       <TMagicPagination
         layout="total, sizes, prev, pager, next, jumper"
         :hide-on-single-page="model[modelName].length < pagesize"
@@ -159,8 +169,8 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed, inject, onMounted, ref, toRefs } from 'vue';
+<script setup lang="ts" name="MFormTable">
+import { computed, inject, onMounted, ref, toRefs, watchEffect } from 'vue';
 import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 import Sortable, { SortableEvent } from 'sortablejs';
@@ -190,6 +200,7 @@ const props = withDefaults(
     prop?: string;
     labelWidth?: string;
     sort?: boolean;
+    disabled?: boolean;
     sortKey?: string;
     text?: string;
     size?: string;
@@ -220,6 +231,15 @@ const isFullscreen = ref(false);
 
 const modelName = computed(() => props.name || props.config.name || '');
 
+const data = computed(() =>
+  props.config.pagination
+    ? props.model[modelName.value].filter(
+        (item: any, index: number) =>
+          index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value,
+      )
+    : props.model[modelName.value],
+);
+
 const sortChange = ({ prop, order }: SortProp) => {
   if (order === 'ascending') {
     props.model[modelName.value] = props.model[modelName.value].sort((a: any, b: any) => a[prop] - b[prop]);
@@ -248,11 +268,11 @@ const swapArray = (index1: number, index2: number) => {
 };
 
 const rowDrop = () => {
-  const tableEl = tMagicTable.value?.$el;
-  if (tableEl?.querySelectorAll('.el-table__body > tbody')) {
+  const tableEl = tMagicTable.value?.instance.$el;
+  const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
+  if (tBodyEl) {
     // eslint-disable-next-line prefer-destructuring
-    const el = tableEl.querySelectorAll('.el-table__body > tbody')[0];
-    const sortable = Sortable.create(el, {
+    const sortable = Sortable.create(tBodyEl, {
       onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
         if (typeof newIndex === 'undefined') return;
         if (typeof oldIndex === 'undefined') return;
@@ -262,11 +282,11 @@ const rowDrop = () => {
         sortable.destroy();
         mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
         sleep(1000).then(() => {
-          const eltrs = tableEl.querySelectorAll('.el-table__body > tbody > tr');
-          if (eltrs?.[newIndex]) {
-            eltrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)';
+          const elTrs = tableEl.querySelectorAll('.el-table__body > tbody > tr');
+          if (elTrs?.[newIndex]) {
+            elTrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)';
             sleep(1000).then(() => {
-              eltrs[newIndex].style.backgroundColor = '';
+              elTrs[newIndex].style.backgroundColor = '';
             });
           }
         });
@@ -348,7 +368,9 @@ onMounted(() => {
   if (props.sort && props.sortKey) {
     props.model[modelName.value].sort((a: any, b: any) => b[props.sortKey] - a[props.sortKey]);
   }
+});
 
+watchEffect(() => {
   if (props.config.dropSort) {
     rowDrop();
   }
@@ -402,6 +424,7 @@ const itemExtra = (fuc: any, index: number) => {
 };
 
 const removeHandler = (index: number) => {
+  if (props.disabled) return;
   props.model[modelName.value].splice(index, 1);
   emit('change', props.model[modelName.value]);
 };
@@ -421,8 +444,11 @@ const toggleRowSelection = (row: any, selected: boolean) => {
   tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
 };
 
-const makeConfig = (config: ColumnConfig) => {
+const makeConfig = (config: ColumnConfig, row: any) => {
   const newConfig = cloneDeep(config);
+  if (typeof config.itemsFunction === 'function') {
+    newConfig.items = config.itemsFunction(row);
+  }
   delete newConfig.display;
   return newConfig;
 };

package/src/containers/Tabs.vue

@@ -10,8 +10,9 @@
     @tab-remove="onTabRemove"
   >
     <template v-for="(tab, tabIndex) in tabs">
-      <TMagicTabPane
+      <component
         v-if="display(tab.display) && tabItems(tab).length"
+        :is="uiComponent.component"
         :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
         :name="filter(tab.status) || tabIndex.toString()"
         :label="filter(tab.title)"
@@ -21,6 +22,7 @@
           v-for="item in tabItems(tab)"
           :key="item[mForm?.keyProp || '__key']"
           :config="item"
+          :disabled="disabled"
           :model="
             config.dynamic
               ? (name ? model[name] : model)[tabIndex]
@@ -36,22 +38,24 @@
           :expand-more="expandMore"
           @change="changeHandler"
         ></Container>
-      </TMagicTabPane>
+      </component>
     </template>
   </TMagicTabs>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormTabs">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import { TMagicTabPane, TMagicTabs } from '@tmagic/design';
+import { getConfig, TMagicTabs } from '@tmagic/design';
 
 import { FormState, TabConfig, TabPaneConfig } from '../schema';
 import { display as displayFunc, filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+const uiComponent = getConfig('components').tabPane;
+
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;
   const { active } = config;
@@ -87,6 +91,7 @@ const props = defineProps<{
   labelWidth?: string;
   prop?: string;
   expandMore?: boolean;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/Cascader.vue

@@ -14,7 +14,7 @@
   ></TMagicCascader>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCascader">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
@@ -31,7 +31,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/Checkbox.vue

@@ -10,7 +10,7 @@
   >
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCheckbox">
 import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
@@ -26,7 +26,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/CheckboxGroup.vue

@@ -1,12 +1,17 @@
 <template>
   <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"
+    <TMagicCheckbox
+      v-for="option in options"
+      :label="option.value"
+      :value="option.value"
+      :key="option.value"
+      :disabled="option.disabled"
       >{{ option.text }}
     </TMagicCheckbox>
   </TMagicCheckboxGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormCheckGroup">
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
@@ -23,7 +28,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/ColorPicker.vue

@@ -8,7 +8,7 @@
   ></TMagicColorPicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormColorPicker">
 import { TMagicColorPicker } from '@tmagic/design';
 
 import { ColorPickConfig } from '../schema';
@@ -22,7 +22,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/Date.vue

@@ -6,12 +6,12 @@
     :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"
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDate">
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
@@ -26,7 +26,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/DateTime.vue

@@ -13,7 +13,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDateTime">
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
@@ -28,7 +28,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

package/src/fields/Daterange.vue

@@ -13,7 +13,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDateRange">
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
@@ -30,7 +30,7 @@ const props = defineProps<{
   name: string;
   prop: string;
   disabled?: boolean;
-  size: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits(['change']);

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';