@tmagic/form 1.4.7 → 1.4.8

package/src/FormBox.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="m-form-box" :style="style">
-    <div class="m-box-body" :style="bodyHeight ? { height: `${bodyHeight}px` } : {}">
-      <TMagicScrollbar>
-        <Form
-          ref="form"
-          :size="size"
-          :disabled="disabled"
-          :config="config"
-          :init-values="values"
-          :parent-values="parentValues"
-          :label-width="labelWidth"
-          :label-position="labelPosition"
-          :inline="inline"
-          @change="changeHandler"
-        ></Form>
-        <slot></slot>
-      </TMagicScrollbar>
-    </div>
-
-    <div class="dialog-footer" :style="`height: ${footerHeight}px`">
-      <div>
-        <slot name="left"></slot>
-      </div>
-      <div>
-        <slot name="footer">
-          <TMagicButton type="primary" :size="size" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
-            confirmText
-          }}</TMagicButton>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
-
-import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
-
-import Form from './Form.vue';
-import type { FormConfig } from './schema';
-
-defineOptions({
-  name: 'MFormBox',
-});
-
-const props = withDefaults(
-  defineProps<{
-    config?: FormConfig;
-    values?: Object;
-    parentValues?: Object;
-    width?: number;
-    height?: number;
-    labelWidth?: string;
-    disabled?: boolean;
-    size?: 'small' | 'default' | 'large';
-    confirmText?: string;
-    inline?: boolean;
-    labelPosition?: string;
-  }>(),
-  {
-    config: () => [],
-    values: () => ({}),
-    confirmText: '确定',
-  },
-);
-
-const emit = defineEmits(['submit', 'change', 'error']);
-
-const footerHeight = 60;
-
-const style = computed(() => {
-  const style: { width?: string; height?: string } = {};
-  if (typeof props.width === 'number') {
-    style.width = `${props.width}px`;
-  }
-  if (typeof props.height === 'number') {
-    style.height = `${props.height}px`;
-  }
-  return style;
-});
-
-const form = ref<InstanceType<typeof Form>>();
-const saveFetch = ref(false);
-
-const bodyHeight = ref(0);
-
-watchEffect(() => {
-  if (!props.height) {
-    return;
-  }
-  bodyHeight.value = props.height - footerHeight;
-});
-
-const submitHandler = async () => {
-  try {
-    const values = await form.value?.submitForm();
-    emit('submit', values);
-  } catch (e) {
-    emit('error', e);
-  }
-};
-
-const changeHandler = (value: any) => {
-  emit('change', value);
-};
-
-const show = () => {};
-
-const hide = () => {};
-
-defineExpose({
-  form,
-  saveFetch,
-
-  show,
-  hide,
-});
-</script>

package/src/FormDialog.vue

@@ -1,173 +0,0 @@
-<template>
-  <TMagicDialog
-    v-model="dialogVisible"
-    class="m-form-dialog"
-    top="20px"
-    append-to-body
-    :title="title"
-    :width="width"
-    :zIndex="zIndex"
-    :fullscreen="fullscreen"
-    :close-on-click-modal="false"
-    @close="closeHandler"
-  >
-    <div
-      v-if="dialogVisible"
-      class="m-dialog-body"
-      :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"
-    >
-      <Form
-        v-model="stepActive"
-        ref="form"
-        :size="size"
-        :disabled="disabled"
-        :config="config"
-        :init-values="values"
-        :parent-values="parentValues"
-        :label-width="labelWidth"
-        :label-position="labelPosition"
-        :inline="inline"
-        @change="changeHandler"
-      ></Form>
-      <slot></slot>
-    </div>
-
-    <template #footer>
-      <TMagicRow class="dialog-footer">
-        <TMagicCol :span="12" style="text-align: left">
-          <div style="min-height: 1px">
-            <slot name="left"></slot>
-          </div>
-        </TMagicCol>
-        <TMagicCol :span="12">
-          <slot name="footer">
-            <TMagicButton @click="cancel" size="small">取 消</TMagicButton>
-            <TMagicButton v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep"
-              >上一步</TMagicButton
-            >
-            <TMagicButton v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
-              >下一步</TMagicButton
-            >
-            <TMagicButton v-else type="primary" size="small" :disabled="disabled" :loading="saveFetch" @click="save">{{
-              confirmText
-            }}</TMagicButton>
-          </slot>
-        </TMagicCol>
-      </TMagicRow>
-    </template>
-  </TMagicDialog>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
-
-import Form from './Form.vue';
-import { FormConfig, StepConfig } from './schema';
-
-defineOptions({
-  name: 'MFormDialog',
-});
-
-const props = withDefaults(
-  defineProps<{
-    config?: FormConfig;
-    values?: Object;
-    parentValues?: Object;
-    width?: string | number;
-    labelWidth?: string;
-    fullscreen?: boolean;
-    disabled?: boolean;
-    title?: string;
-    inline?: boolean;
-    labelPosition?: string;
-    zIndex?: number;
-    size?: 'small' | 'default' | 'large';
-    confirmText?: string;
-  }>(),
-  {
-    config: () => [],
-    values: () => ({}),
-    confirmText: '确定',
-  },
-);
-
-const emit = defineEmits(['close', 'submit', 'error', 'change']);
-
-const form = ref<InstanceType<typeof Form>>();
-const dialogVisible = ref(false);
-const saveFetch = ref(false);
-const stepActive = ref(1);
-const bodyHeight = ref(`${document.body.clientHeight - 194}px`);
-
-const stepCount = computed(() => {
-  const { length } = props.config;
-  for (let index = 0; index < length; index++) {
-    if (props.config[index].type === 'step') {
-      return (props.config[index] as StepConfig).items.length;
-    }
-  }
-  return 0;
-});
-
-const hasStep = computed(() => {
-  const { length } = props.config;
-  for (let index = 0; index < length; index++) {
-    if (props.config[index].type === 'step') {
-      return true;
-    }
-  }
-
-  return false;
-});
-
-const closeHandler = () => {
-  stepActive.value = 1;
-  emit('close');
-};
-
-const save = async () => {
-  try {
-    const values = await form.value?.submitForm();
-    emit('submit', values);
-  } catch (e) {
-    emit('error', e);
-  }
-};
-
-const preStep = () => {
-  stepActive.value -= 1;
-};
-
-const nextStep = () => {
-  stepActive.value += 1;
-};
-
-const changeHandler = (value: any) => {
-  emit('change', value);
-};
-
-const show = () => {
-  dialogVisible.value = true;
-};
-
-const hide = () => {
-  dialogVisible.value = false;
-};
-
-const cancel = () => {
-  hide();
-};
-
-defineExpose({
-  form,
-  saveFetch,
-  dialogVisible,
-
-  cancel,
-  save,
-  show,
-  hide,
-});
-</script>

package/src/FormDrawer.vue

@@ -1,159 +0,0 @@
-<template>
-  <TMagicDrawer
-    class="m-form-drawer"
-    ref="drawer"
-    v-model="visible"
-    :title="title"
-    :close-on-press-escape="closeOnPressEscape"
-    :append-to-body="true"
-    :show-close="true"
-    :close-on-click-modal="true"
-    :size="width"
-    :zIndex="zIndex"
-    :before-close="beforeClose"
-    @open="openHandler"
-    @opened="openedHandler"
-    @close="closeHandler"
-    @closed="closedHandler"
-  >
-    <div v-if="visible" ref="drawerBody" class="m-drawer-body">
-      <Form
-        ref="form"
-        :size="size"
-        :disabled="disabled"
-        :config="config"
-        :init-values="values"
-        :parent-values="parentValues"
-        :label-width="labelWidth"
-        :label-position="labelPosition"
-        :inline="inline"
-        @change="changeHandler"
-      ></Form>
-      <slot></slot>
-    </div>
-
-    <template #footer>
-      <TMagicRow class="dialog-footer">
-        <TMagicCol :span="12" style="text-align: left">
-          <div style="min-height: 1px">
-            <slot name="left"></slot>
-          </div>
-        </TMagicCol>
-        <TMagicCol :span="12">
-          <slot name="footer">
-            <TMagicButton @click="handleClose">关闭</TMagicButton>
-            <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
-              confirmText
-            }}</TMagicButton>
-          </slot>
-        </TMagicCol>
-      </TMagicRow>
-    </template>
-  </TMagicDrawer>
-</template>
-
-<script setup lang="ts">
-import { ref, watchEffect } from 'vue';
-
-import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from '@tmagic/design';
-
-import Form from './Form.vue';
-import type { FormConfig } from './schema';
-
-defineOptions({
-  name: 'MFormDialog',
-});
-
-withDefaults(
-  defineProps<{
-    config?: FormConfig;
-    values?: Object;
-    parentValues?: Object;
-    width?: string | number;
-    labelWidth?: string;
-    disabled?: boolean;
-    closeOnPressEscape?: boolean;
-    title?: string;
-    zIndex?: number;
-    size?: 'small' | 'default' | 'large';
-    confirmText?: string;
-    inline?: boolean;
-    labelPosition?: string;
-    /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
-    beforeClose?: (done: (cancel?: boolean) => void) => void;
-  }>(),
-  {
-    closeOnPressEscape: true,
-    config: () => [],
-    values: () => ({}),
-    confirmText: '确定',
-  },
-);
-
-const emit = defineEmits(['close', 'closed', 'submit', 'error', 'change', 'open', 'opened']);
-
-const drawer = ref<InstanceType<typeof TMagicDrawer>>();
-const form = ref<InstanceType<typeof Form>>();
-const drawerBody = ref<HTMLDivElement>();
-const visible = ref(false);
-const saveFetch = ref(false);
-const bodyHeight = ref(0);
-
-watchEffect(() => {
-  if (drawerBody.value) {
-    bodyHeight.value = drawerBody.value.clientHeight;
-  }
-});
-
-const submitHandler = async () => {
-  try {
-    const values = await form.value?.submitForm();
-    emit('submit', values);
-  } catch (e) {
-    emit('error', e);
-  }
-};
-
-const changeHandler = (value: any) => {
-  emit('change', value);
-};
-
-const openHandler = () => {
-  emit('open');
-};
-
-const openedHandler = () => {
-  emit('opened');
-};
-
-const closeHandler = () => {
-  emit('close');
-};
-
-const closedHandler = () => {
-  emit('closed');
-};
-
-const show = () => {
-  visible.value = true;
-};
-
-const hide = () => {
-  visible.value = false;
-};
-
-/** 用于关闭 Drawer, 该方法会调用传入的 before-close 方法 */
-const handleClose = () => {
-  drawer.value?.handleClose();
-};
-
-defineExpose({
-  form,
-  saveFetch,
-  bodyHeight,
-
-  show,
-  hide,
-  handleClose,
-});
-</script>

package/src/containers/Col.vue

@@ -1,52 +0,0 @@
-<template>
-  <TMagicCol v-show="display && config.type !== 'hidden'" :span="span">
-    <Container
-      :model="model"
-      :lastValues="lastValues"
-      :is-compare="isCompare"
-      :config="config"
-      :prop="prop"
-      :label-width="config.labelWidth || labelWidth"
-      :expand-more="expandMore"
-      :size="size"
-      :disabled="disabled"
-      @change="changeHandler"
-      @add-diff-count="onAddDiffCount"
-    ></Container>
-  </TMagicCol>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { TMagicCol } from '@tmagic/design';
-
-import { ChildConfig, FormState } from '../schema';
-import { display as displayFunction } from '../utils/form';
-
-import Container from './Container.vue';
-
-defineOptions({
-  name: 'MFormCol',
-});
-
-const props = defineProps<{
-  model: any;
-  lastValues?: any;
-  isCompare?: boolean;
-  config: ChildConfig;
-  labelWidth?: string;
-  expandMore?: boolean;
-  span?: number;
-  size?: string;
-  prop?: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-const display = computed(() => displayFunction(mForm, props.config.display, props));
-const changeHandler = () => emit('change', props.model);
-const onAddDiffCount = () => emit('addDiffCount');
-</script>