@tmagic/form 1.4.7 → 1.4.8

package/src/containers/GroupListItem.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="m-fields-group-list-item">
-    <div>
-      <TMagicButton link :disabled="disabled" @click="expandHandler">
-        <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon>{{ title }}
-      </TMagicButton>
-
-      <TMagicButton
-        v-show="showDelete(parseInt(String(index)))"
-        style="color: #f56c6c"
-        link
-        :icon="Delete"
-        :disabled="disabled"
-        @click="removeHandler"
-      ></TMagicButton>
-
-      <template v-if="movable()">
-        <TMagicButton v-show="index !== 0" link :disabled="disabled" size="small" @click="changeOrder(-1)"
-          >上移<TMagicIcon><CaretTop /></TMagicIcon
-        ></TMagicButton>
-        <TMagicButton v-show="index !== length - 1" :disabled="disabled" link size="small" @click="changeOrder(1)"
-          >下移<TMagicIcon><CaretBottom /></TMagicIcon
-        ></TMagicButton>
-      </template>
-
-      <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
-    </div>
-
-    <Container
-      v-if="expand"
-      :config="rowConfig"
-      :model="model"
-      :lastValues="lastValues"
-      :is-compare="isCompare"
-      :labelWidth="labelWidth"
-      :prop="`${prop}${prop ? '.' : ''}${String(index)}`"
-      :size="size"
-      :disabled="disabled"
-      @change="changeHandler"
-      @addDiffCount="onAddDiffCount()"
-    ></Container>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref } from 'vue';
-import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
-
-import { TMagicButton, TMagicIcon } from '@tmagic/design';
-
-import { FormState, GroupListConfig } from '../schema';
-import { filterFunction } from '../utils/form';
-
-import Container from './Container.vue';
-
-defineOptions({
-  name: 'MFormGroupListItem',
-});
-
-const props = defineProps<{
-  model: any;
-  lastValues: any;
-  isCompare?: boolean;
-  groupModel: any[];
-  config: GroupListConfig;
-  labelWidth?: string;
-  prop?: string;
-  size?: string;
-  index: number;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits(['swap-item', 'remove-item', 'change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-const expand = ref(props.config.expandAll || !props.index);
-
-const rowConfig = computed(() => ({
-  type: 'row',
-  span: props.config.span || 24,
-  items: props.config.items,
-  labelWidth: props.config.labelWidth,
-  [mForm?.keyProp || '__key']: `${props.config[mForm?.keyProp || '__key']}${String(props.index)}`,
-}));
-
-const title = computed(() => {
-  if (props.config.titleKey && props.model[props.config.titleKey]) {
-    return props.model[props.config.titleKey];
-  }
-
-  if (props.config.title) {
-    return filterFunction(mForm, props.config.title, props);
-  }
-
-  const titlePrefix = props.config.titlePrefix || '组';
-
-  return `${titlePrefix} ${String(props.index + 1)}`;
-});
-
-const length = computed(() => props.groupModel?.length || 0);
-
-const itemExtra = computed(() => filterFunction(mForm, props.config.itemExtra, props));
-
-const removeHandler = () => emit('remove-item', props.index);
-
-const changeHandler = () => emit('change');
-
-const expandHandler = () => {
-  expand.value = !expand.value;
-};
-
-// 希望支持单行可控制是否显示删除按钮，不会影响现有逻辑
-const showDelete = (index: number) => {
-  const deleteFunc = props.config.delete;
-  if (deleteFunc && typeof deleteFunc === 'function') {
-    return deleteFunc(props.model, index, mForm?.values);
-  }
-  return true;
-};
-
-// 调换顺序
-const changeOrder = (offset = 0) => emit('swap-item', props.index, props.index + offset);
-
-const movable = () => {
-  const { movable } = props.config;
-
-  // 没有设置时，默认可移动
-  if (movable === undefined) return true;
-  if (typeof movable === 'function') {
-    return movable(mForm, props.index || 0, props.model, props.groupModel);
-  }
-  return movable;
-};
-const onAddDiffCount = () => emit('addDiffCount');
-</script>

package/src/containers/Panel.vue

@@ -1,99 +0,0 @@
-<template>
-  <TMagicCard
-    v-if="items && items.length"
-    class="box-card m-form-panel"
-    :body-style="{ display: expand ? 'block' : 'none' }"
-  >
-    <template #header>
-      <div style="width: 100%; display: flex; align-items: center">
-        <TMagicButton style="padding: 0" link :icon="expand ? CaretBottom : CaretRight" @click="expand = !expand">
-        </TMagicButton>
-        <span v-if="config && config.extra" v-html="config.extra" class="m-form-tip"></span>
-        <slot name="header">{{ filter(config.title) }}</slot>
-      </div>
-    </template>
-
-    <div>
-      <slot></slot>
-
-      <div v-if="config.schematic" style="display: flex">
-        <div style="flex: 1">
-          <Container
-            v-for="(item, index) in items"
-            :key="item[mForm?.keyProp || '__key'] ?? index"
-            :config="item"
-            :model="name ? model[name] : model"
-            :lastValues="name ? lastValues[name] : lastValues"
-            :is-compare="isCompare"
-            :prop="prop"
-            :size="size"
-            :disabled="disabled"
-            :label-width="config.labelWidth || labelWidth"
-            @change="changeHandler"
-            @addDiffCount="onAddDiffCount()"
-          ></Container>
-        </div>
-
-        <img class="m-form-schematic" :src="config.schematic" />
-      </div>
-
-      <template v-else>
-        <Container
-          v-for="(item, index) in items"
-          :key="item[mForm?.keyProp || '__key'] ?? index"
-          :config="item"
-          :model="name ? model[name] : model"
-          :lastValues="name ? lastValues[name] : lastValues"
-          :is-compare="isCompare"
-          :prop="prop"
-          :size="size"
-          :disabled="disabled"
-          :label-width="config.labelWidth || labelWidth"
-          @change="changeHandler"
-          @addDiffCount="onAddDiffCount()"
-        ></Container>
-      </template>
-    </div>
-  </TMagicCard>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref } from 'vue';
-import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
-
-import { TMagicButton, TMagicCard } from '@tmagic/design';
-
-import { FormState, PanelConfig } from '../schema';
-import { filterFunction } from '../utils/form';
-
-import Container from './Container.vue';
-
-defineOptions({
-  name: 'MFormPanel',
-});
-
-const props = defineProps<{
-  model: any;
-  lastValues?: any;
-  isCompare?: boolean;
-  config: PanelConfig;
-  name?: string;
-  labelWidth?: string;
-  prop?: string;
-  size?: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-
-const expand = ref(props.config.expand !== false);
-
-const items = computed(() => props.config.items);
-
-const filter = (config: any) => filterFunction(mForm, config, props);
-
-const changeHandler = () => emit('change', props.model);
-const onAddDiffCount = () => emit('addDiffCount');
-</script>

package/src/containers/Row.vue

@@ -1,54 +0,0 @@
-<template>
-  <TMagicRow :gutter="10">
-    <Col
-      v-for="(col, index) in config.items"
-      :key="col[mForm?.keyProp || '__key'] ?? index"
-      :span="col.span || config.span || 24 / config.items.length"
-      :config="col"
-      :labelWidth="config.labelWidth || labelWidth"
-      :expandMore="expandMore"
-      :model="name ? model[name] : model"
-      :lastValues="name ? lastValues[name] : lastValues"
-      :is-compare="isCompare"
-      :prop="prop"
-      :size="size"
-      :disabled="disabled"
-      @change="changeHandler"
-      @add-diff-count="onAddDiffCount"
-    />
-  </TMagicRow>
-</template>
-
-<script setup lang="ts">
-import { inject } from 'vue';
-
-import { TMagicRow } from '@tmagic/design';
-
-import { FormState, RowConfig } from '../schema';
-
-import Col from './Col.vue';
-
-defineOptions({
-  name: 'MFormRow',
-});
-
-const props = defineProps<{
-  model: any;
-  lastValues?: any;
-  isCompare?: boolean;
-  config: RowConfig;
-  name: string;
-  labelWidth?: string;
-  prop?: string;
-  size?: string;
-  expandMore?: boolean;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-
-const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
-const onAddDiffCount = () => emit('addDiffCount');
-</script>

package/src/containers/Step.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <TMagicSteps :active="active" align-center :space="config.space">
-      <TMagicStep
-        v-for="(item, index) in config.items"
-        :key="item.__key"
-        :title="item.title"
-        :active="active"
-        @click="stepClick(index)"
-      ></TMagicStep>
-    </TMagicSteps>
-
-    <template v-for="(step, index) in config.items">
-      <template v-for="item in step.items">
-        <Container
-          v-if="item"
-          v-show="active - 1 === index"
-          :key="item[mForm?.keyProp || '__key']"
-          :config="item"
-          :model="step.name ? model[step.name] : model"
-          :lastValues="step.name ? lastValues[step.name] : lastValues"
-          :is-compare="isCompare"
-          :prop="`${step.name}`"
-          :size="size"
-          :disabled="disabled"
-          :label-width="config.labelWidth || labelWidth"
-          @change="changeHandler"
-          @addDiffCount="onAddDiffCount()"
-        ></Container>
-      </template>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject, ref, watchEffect } from 'vue';
-
-import { TMagicStep, TMagicSteps } from '@tmagic/design';
-
-import { FormState, StepConfig } from '../schema';
-
-import Container from './Container.vue';
-
-defineOptions({
-  name: 'MFormStep',
-});
-
-const props = withDefaults(
-  defineProps<{
-    model: any;
-    lastValues?: any;
-    isCompare?: boolean;
-    config: StepConfig;
-    stepActive?: number;
-    labelWidth?: string;
-    size?: string;
-    disabled?: boolean;
-  }>(),
-  {
-    stepActive: 1,
-  },
-);
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-const active = ref(1);
-
-watchEffect(() => {
-  active.value = props.stepActive;
-});
-
-const stepClick = (index: number) => {
-  active.value = index + 1;
-  mForm?.$emit('update:stepActive', active.value);
-};
-
-const changeHandler = () => {
-  emit('change', props.model);
-};
-const onAddDiffCount = () => emit('addDiffCount');
-</script>