@tmagic/form 1.4.7 → 1.4.8

package/src/containers/Tabs.vue

@@ -1,226 +0,0 @@
-<template>
-  <component
-    v-model="activeTabName"
-    v-bind="
-      tabsComponent?.props({
-        type: config.tabType,
-        editable: config.editable || false,
-        tabPosition: config.tabPosition || 'top',
-      }) || {}
-    "
-    :is="tabsComponent?.component || 'el-tabs'"
-    :class="`tmagic-design-tabs ${config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'}`"
-    @tab-click="tabClickHandler"
-    @tab-add="onTabAdd"
-    @tab-remove="onTabRemove"
-  >
-    <component
-      v-for="(tab, tabIndex) in tabs"
-      :is="tabPaneComponent?.component || 'el-tab-pane'"
-      :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
-      v-bind="
-        tabPaneComponent?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
-      "
-    >
-      <template #label>
-        <span>
-          {{ filter(tab.title)
-          }}<TMagicBadge
-            :hidden="!diffCount[tabIndex]"
-            :value="diffCount[tabIndex]"
-            class="diff-count-badge"
-          ></TMagicBadge>
-        </span>
-      </template>
-      <Container
-        v-for="item in tabItems(tab)"
-        :key="item[mForm?.keyProp || '__key']"
-        :config="item"
-        :disabled="disabled"
-        :model="
-          config.dynamic
-            ? (name ? model[name] : model)[tabIndex]
-            : tab.name
-            ? (name ? model[name] : model)[tab.name]
-            : name
-            ? model[name]
-            : model
-        "
-        :last-values="
-          isEmpty(lastValues)
-            ? {}
-            : config.dynamic
-            ? (name ? lastValues[name] : lastValues)[tabIndex]
-            : tab.name
-            ? (name ? lastValues[name] : lastValues)[tab.name]
-            : name
-            ? lastValues[name]
-            : lastValues
-        "
-        :is-compare="isCompare"
-        :prop="config.dynamic ? `${prop}${prop ? '.' : ''}${String(tabIndex)}` : prop"
-        :size="size"
-        :label-width="tab.labelWidth || labelWidth"
-        :expand-more="expandMore"
-        @change="changeHandler"
-        @addDiffCount="onAddDiffCount(tabIndex)"
-      ></Container>
-    </component>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue';
-import { cloneDeep, isEmpty } from 'lodash-es';
-
-import { getConfig, TMagicBadge } from '@tmagic/design';
-
-import { FormState, TabConfig, TabPaneConfig } from '../schema';
-import { display as displayFunc, filterFunction } from '../utils/form';
-
-import Container from './Container.vue';
-
-defineOptions({
-  name: 'MFormTabs',
-});
-
-type DiffCount = {
-  [tabIndex: number]: number;
-};
-
-const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components')?.tabs;
-
-const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
-  const { config, model, prop } = props;
-  const { active } = config;
-
-  if (typeof active === 'function') return active(mForm, { model, formValue: mForm?.values, prop });
-  if (+activeTabName >= props.config.items.length) return '0';
-  if (typeof active !== 'undefined') return active;
-
-  return '0';
-};
-
-const tabClick = (mForm: FormState | undefined, tab: any, props: any) => {
-  const { config, model, prop } = props;
-
-  // 兼容vue2的element-ui
-  tab.name = tab.paneName;
-
-  if (typeof config.onTabClick === 'function') {
-    config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
-  }
-
-  const tabConfig = config.items.find((item: TabPaneConfig) => tab.name === item.status);
-  if (tabConfig && typeof tabConfig.onTabClick === 'function') {
-    tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
-  }
-};
-
-const props = withDefaults(
-  defineProps<{
-    model: any;
-    lastValues?: any;
-    isCompare?: boolean;
-    config: TabConfig;
-    name: string;
-    size?: string;
-    labelWidth?: string;
-    prop?: string;
-    expandMore?: boolean;
-    disabled?: boolean;
-  }>(),
-  {
-    lastValues: () => ({}),
-    isCompare: false,
-  },
-);
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-const activeTabName = ref(getActive(mForm, props, ''));
-const diffCount = ref<DiffCount>({});
-
-const tabs = computed(() => {
-  if (props.config.dynamic) {
-    if (!props.config.name) throw new Error('dynamic tab 必须配置name');
-    return props.model[props.config.name] || [];
-  }
-  return props.config.items.filter((item) => displayFunc(mForm, item.display, props));
-});
-
-const filter = (config: any) => filterFunction(mForm, config, props);
-
-watchEffect(() => {
-  if (typeof props.config.activeChange === 'function') {
-    props.config.activeChange(mForm, activeTabName.value, {
-      model: props.model,
-      prop: props.prop,
-    });
-  }
-});
-
-const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items);
-
-const tabClickHandler = (tab: any) => tabClick(mForm, tab, props);
-
-const onTabAdd = () => {
-  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
-
-  if (typeof props.config.onTabAdd === 'function') {
-    props.config.onTabAdd(mForm, {
-      model: props.model,
-      prop: props.prop,
-      config: props.config,
-    });
-  } else if (tabs.value.length > 0) {
-    const newObj = cloneDeep(tabs.value[0]);
-    newObj.title = `标签${tabs.value.length + 1}`;
-    props.model[props.config.name].push(newObj);
-  }
-  emit('change', props.model);
-  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
-};
-
-const onTabRemove = (tabName: string) => {
-  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
-
-  if (typeof props.config.onTabRemove === 'function') {
-    props.config.onTabRemove(mForm, tabName, {
-      model: props.model,
-      prop: props.prop,
-      config: props.config,
-    });
-  } else {
-    props.model[props.config.name].splice(+tabName, 1);
-
-    // 防止删除后没有选中的问题
-    if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
-      activeTabName.value = (+activeTabName.value - 1).toString();
-      tabClick(mForm, { name: activeTabName.value }, props);
-    }
-  }
-  emit('change', props.model);
-  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
-};
-
-const changeHandler = () => {
-  emit('change', props.model);
-  if (typeof props.config.onChange === 'function') {
-    props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
-  }
-};
-
-// 在tabs组件中收集事件触发次数，即该tab下的差异数
-const onAddDiffCount = (tabIndex: number) => {
-  if (!diffCount.value[tabIndex]) {
-    diffCount.value[tabIndex] = 1;
-  } else {
-    diffCount.value[tabIndex] += 1;
-  }
-  // 继续抛出给更高层级的组件
-  emit('addDiffCount');
-};
-</script>

package/src/fields/Cascader.vue

@@ -1,131 +0,0 @@
-<template>
-  <TMagicCascader
-    v-model="value"
-    ref="tMagicCascader"
-    style="width: 100%"
-    clearable
-    filterable
-    :size="size"
-    :placeholder="config.placeholder"
-    :disabled="disabled"
-    :options="options"
-    :popper-class="config.popperClass"
-    :props="{
-      multiple: config.multiple ?? false,
-      emitPath: config.emitPath ?? true,
-      checkStrictly: checkStrictly ?? false,
-    }"
-    @change="changeHandler"
-  ></TMagicCascader>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue';
-
-import { TMagicCascader } from '@tmagic/design';
-
-import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '../schema';
-import { getConfig } from '../utils/config';
-import { filterFunction } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
-
-defineOptions({
-  name: 'MFormCascader',
-});
-
-const props = defineProps<FieldProps<CascaderConfig>>();
-
-const emit = defineEmits(['change']);
-
-const mForm = inject<FormState | undefined>('mForm');
-
-useAddField(props.prop);
-
-const requestFunc = getConfig('request') as Function;
-
-const tMagicCascader = ref<InstanceType<typeof TMagicCascader>>();
-
-const options = ref<CascaderOption[]>([]);
-const remoteData = ref<any>(null);
-
-const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
-const valueSeparator = computed(() => filterFunction(mForm, props.config.valueSeparator, props));
-
-const value = computed({
-  get() {
-    if (typeof props.model[props.name] === 'string' && valueSeparator.value) {
-      return props.model[props.name].split(valueSeparator.value);
-    }
-    return props.model[props.name];
-  },
-  set(value) {
-    let result = value;
-    if (valueSeparator.value) {
-      result = value.join(valueSeparator.value);
-    }
-    props.model[props.name] = result;
-  },
-});
-
-const setRemoteOptions = async function () {
-  const { config } = props;
-  const { option } = config;
-  if (!option) return;
-  let { body } = option;
-
-  const postOptions: Record<string, any> = {
-    url: option.url,
-    cache: option.cache,
-    timeout: option.timeout,
-    data: {},
-  };
-
-  if (body && mForm) {
-    if (typeof body === 'function' && props.model && mForm) {
-      body = body(mForm, {
-        model: props.model,
-        formValue: mForm.values,
-        formValues: mForm.values,
-        config: props.config,
-      });
-    }
-    postOptions.data = body;
-  }
-
-  const res = await requestFunc(postOptions);
-
-  remoteData.value = res[option.root];
-  if (remoteData.value && typeof option?.item === 'function') {
-    options.value = option.item(res[option.root]);
-  }
-};
-
-// 初始化
-if (typeof props.config.options === 'function' && props.model && mForm) {
-  watchEffect(() => {
-    typeof props.config.options === 'function' &&
-      Promise.resolve(
-        props.config.options(mForm, {
-          model: props.model,
-          prop: props.prop,
-          formValue: mForm?.values,
-        }),
-      ).then((data) => {
-        options.value = data;
-      });
-  });
-} else if (!props.config.options?.length || props.config.remote) {
-  Promise.resolve(setRemoteOptions());
-} else if (Array.isArray(props.config.options)) {
-  watchEffect(() => {
-    options.value = props.config.options as CascaderOption[];
-  });
-}
-
-const changeHandler = () => {
-  if (!tMagicCascader.value) return;
-  tMagicCascader.value.setQuery('');
-  tMagicCascader.value.setPreviousQuery(null);
-  emit('change', props.model[props.name]);
-};
-</script>

package/src/fields/Checkbox.vue

@@ -1,58 +0,0 @@
-<template>
-  <TMagicCheckbox
-    v-model="model[name]"
-    :size="size"
-    :trueValue="activeValue"
-    :falseValue="inactiveValue"
-    :disabled="disabled"
-    @change="changeHandler"
-    >{{ config.text }}</TMagicCheckbox
-  >
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { TMagicCheckbox } from '@tmagic/design';
-
-import type { CheckboxConfig, FieldProps } from '../schema';
-import { useAddField } from '../utils/useAddField';
-
-defineOptions({
-  name: 'MFormCheckbox',
-});
-
-const props = defineProps<FieldProps<CheckboxConfig>>();
-
-const emit = defineEmits(['change']);
-
-useAddField(props.prop);
-
-const activeValue = computed(() => {
-  if (typeof props.config.activeValue === 'undefined') {
-    if (props.config.filter === 'number') {
-      return 1;
-    }
-  } else {
-    return props.config.activeValue;
-  }
-
-  return undefined;
-});
-
-const inactiveValue = computed(() => {
-  if (typeof props.config.inactiveValue === 'undefined') {
-    if (props.config.filter === 'number') {
-      return 0;
-    }
-  } else {
-    return props.config.inactiveValue;
-  }
-
-  return undefined;
-});
-
-const changeHandler = (value: number | boolean) => {
-  emit('change', value);
-};
-</script>

package/src/fields/CheckboxGroup.vue

@@ -1,43 +0,0 @@
-<template>
-  <TMagicCheckboxGroup v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
-    <TMagicCheckbox v-for="option in options" :value="option.value" :key="option.value" :disabled="option.disabled"
-      >{{ option.text }}
-    </TMagicCheckbox>
-  </TMagicCheckboxGroup>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-
-import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
-
-import type { CheckboxGroupConfig, FieldProps, FormState } from '../schema';
-import { filterFunction } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
-
-defineOptions({
-  name: 'MFormCheckGroup',
-});
-
-const props = defineProps<FieldProps<CheckboxGroupConfig>>();
-
-const emit = defineEmits(['change']);
-
-useAddField(props.prop);
-
-// 初始化选项
-if (props.model && !props.model[props.name]) {
-  props.model[props.name] = [];
-}
-
-const changeHandler = (v: Array<string | number | boolean>) => {
-  emit('change', v);
-};
-
-const mForm = inject<FormState | undefined>('mForm');
-const options = computed(() => {
-  if (Array.isArray(props.config.options)) return props.config.options;
-  if (typeof props.config.options === 'function') return filterFunction(mForm, props.config.options, props);
-  return [];
-});
-</script>

package/src/fields/ColorPicker.vue

@@ -1,30 +0,0 @@
-<template>
-  <TMagicColorPicker
-    v-model="model[name]"
-    :size="size"
-    :disabled="disabled"
-    :showAlpha="true"
-    @change="changeHandler"
-  ></TMagicColorPicker>
-</template>
-
-<script lang="ts" setup>
-import { TMagicColorPicker } from '@tmagic/design';
-
-import type { ColorPickConfig, FieldProps } from '../schema';
-import { useAddField } from '../utils/useAddField';
-
-defineOptions({
-  name: 'MFormColorPicker',
-});
-
-const props = defineProps<FieldProps<ColorPickConfig>>();
-
-const emit = defineEmits<{
-  change: [value: string];
-}>();
-
-useAddField(props.prop);
-
-const changeHandler = (value: string) => emit('change', value);
-</script>

package/src/fields/Date.vue

@@ -1,38 +0,0 @@
-<template>
-  <TMagicDatePicker
-    v-model="model[name]"
-    type="date"
-    :size="size"
-    :placeholder="config.placeholder"
-    :disabled="disabled"
-    :format="config.format"
-    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
-    @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 { useAddField } from '../utils/useAddField';
-
-defineOptions({
-  name: 'MFormDate',
-});
-
-const props = defineProps<FieldProps<DateConfig>>();
-
-const emit = defineEmits<{
-  change: [value: string];
-}>();
-
-useAddField(props.prop);
-
-props.model[props.name] = datetimeFormatter(props.model[props.name], '');
-
-const changeHandler = (v: string) => {
-  emit('change', v);
-};
-</script>

package/src/fields/DateTime.vue

@@ -1,47 +0,0 @@
-<template>
-  <TMagicDatePicker
-    v-model="model[name]"
-    popper-class="magic-datetime-picker-popper"
-    type="datetime"
-    :size="size"
-    :placeholder="config.placeholder"
-    :disabled="disabled"
-    :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"
-  ></TMagicDatePicker>
-</template>
-
-<script lang="ts" setup>
-import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
-
-import type { DateTimeConfig, FieldProps } from '../schema';
-import { useAddField } from '../utils/useAddField';
-
-defineOptions({
-  name: 'MFormDateTime',
-});
-
-const props = defineProps<FieldProps<DateTimeConfig>>();
-
-const emit = defineEmits<{
-  change: [value: string];
-}>();
-
-useAddField(props.prop);
-
-const value = props.model?.[props.name].toString();
-if (props.model) {
-  if (value === 'Invalid Date') {
-    props.model[props.name] = '';
-  } else {
-    props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat);
-  }
-}
-
-const changeHandler = (v: string) => {
-  emit('change', v);
-};
-</script>

package/src/fields/Daterange.vue

@@ -1,99 +0,0 @@
-<template>
-  <TMagicDatePicker
-    v-model="value"
-    type="datetimerange"
-    range-separator="-"
-    start-placeholder="开始日期"
-    end-placeholder="结束日期"
-    :size="size"
-    :unlink-panels="true"
-    :disabled="disabled"
-    :default-time="config.defaultTime"
-    @change="changeHandler"
-  ></TMagicDatePicker>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-
-import { TMagicDatePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
-
-import type { DaterangeConfig, FieldProps } from '../schema';
-import { useAddField } from '../utils/useAddField';
-
-defineOptions({
-  name: 'MFormDateRange',
-});
-
-const props = defineProps<FieldProps<DaterangeConfig>>();
-
-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>([]);
-
-if (props.model !== undefined) {
-  if (names?.length) {
-    watch(
-      [() => props.model[names[0]], () => props.model[names[1]]],
-      ([start, end], [preStart, preEnd]) => {
-        if (!value.value) {
-          value.value = [];
-        }
-        if (!start || !end) value.value = [];
-        if (start !== preStart) value.value[0] = new Date(start);
-        if (end !== preEnd) value.value[1] = new Date(end);
-      },
-      {
-        immediate: true,
-      },
-    );
-  } else if (props.name && props.model[props.name]) {
-    watch(
-      () => props.model[props.name],
-      (start, preStart) => {
-        if (start !== preStart) value.value = start.map((item: string) => (item ? new Date(item) : undefined));
-      },
-      {
-        immediate: true,
-      },
-    );
-  }
-}
-
-const setValue = (v: Date[] | Date) => {
-  names?.forEach((item, index) => {
-    if (!props.model) {
-      return;
-    }
-    if (Array.isArray(v)) {
-      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
-    } else {
-      props.model[item] = undefined;
-    }
-  });
-};
-
-const changeHandler = (v: Date[]) => {
-  const value = v || [];
-
-  if (props.name) {
-    emit(
-      'change',
-      value.map((item?: Date) => {
-        if (item) return datetimeFormatter(item, '');
-        return undefined;
-      }),
-    );
-  } else {
-    if (names?.length) {
-      setValue(value);
-    }
-    emit('change', value);
-  }
-};
-</script>

package/src/fields/Display.vue

@@ -1,21 +0,0 @@
-<template>
-  <span v-if="model">{{ model[name] }}</span>
-</template>
-
-<script setup lang="ts">
-import type { DisplayConfig, FieldProps } from '../schema';
-import { useAddField } from '../utils/useAddField';
-
-defineOptions({
-  name: 'MFormDisplay',
-});
-
-const props = defineProps<FieldProps<DisplayConfig>>();
-
-if (props.config.initValue && props.model) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
-  props.model[props.name] = props.config.initValue;
-}
-
-useAddField(props.prop);
-</script>