@tmagic/form 1.2.13 → 1.2.15

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.13",
+  "version": "1.2.15",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.2.13",
-    "@tmagic/utils": "1.2.13",
+    "@tmagic/design": "1.2.15",
+    "@tmagic/utils": "1.2.15",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.37"
@@ -50,14 +50,14 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^3.1.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.1.3",
+    "typescript": "^5.0.4",
+    "vite": "^4.2.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.0.11"
+    "vue-tsc": "^1.2.0"
   }
 }

package/src/containers/Fieldset.vue

@@ -10,6 +10,7 @@
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
         :true-label="1"
         :false-label="0"
+        @update:modelValue="change"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></TMagicCheckbox>
     </component>
@@ -61,7 +62,7 @@
 </template>
 
 <script lang="ts" setup name="MFormFieldset">
-import { computed, inject, watch } from 'vue';
+import { computed, inject } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
 
@@ -115,13 +116,5 @@ const change = () => {
 
 const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
 
-if (props.config.checkbox && name.value) {
-  watch(
-    () => props.model[name.value]?.value,
-    () => {
-      emit('change', props.model);
-    },
-  );
-}
 const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/containers/Table.vue

@@ -534,7 +534,7 @@ const clearHandler = () => {
 };
 
 const excelHandler = (file: any) => {
-  if (!file || !file.raw) {
+  if (!file?.raw) {
     return false;
   }
   const reader = new FileReader();

package/src/containers/Tabs.vue

@@ -1,71 +1,77 @@
 <template>
-  <TMagicTabs
+  <component
     v-model="activeTabName"
-    :class="config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'"
-    :type="config.tabType"
-    :editable="config.editable || false"
-    :tab-position="config.tabPosition || 'top'"
+    v-bind="
+      tabsComponent.props({
+        type: config.tabType,
+        editable: config.editable || false,
+        tabPosition: config.tabPosition || 'top',
+      })
+    "
+    :is="tabsComponent.component"
+    :class="`tmagic-design-tabs ${config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'}`"
     @tab-click="tabClickHandler"
     @tab-add="onTabAdd"
     @tab-remove="onTabRemove"
   >
-    <template v-for="(tab, tabIndex) in tabs">
-      <component
-        v-if="display(tab.display) && tabItems(tab).length"
-        :is="uiComponent.component"
-        :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
-        :name="filter(tab.status) || tabIndex.toString()"
-        :lazy="tab.lazy || false"
-      >
-        <template #label>
-          <span>
-            {{ filter(tab.title)
-            }}<el-badge :hidden="!diffCount[tabIndex]" :value="diffCount[tabIndex]" class="diff-count-badge"></el-badge>
-          </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>
-    </template>
-  </TMagicTabs>
+    <component
+      v-for="(tab, tabIndex) in tabs"
+      :is="tabPaneComponent.component"
+      :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" name="MFormTabs">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash-es';
 
-import { getConfig, TMagicTabs } from '@tmagic/design';
+import { getConfig, TMagicBadge } from '@tmagic/design';
 
 import { FormState, TabConfig, TabPaneConfig } from '../schema';
 import { display as displayFunc, filterFunction } from '../utils/form';
@@ -76,7 +82,8 @@ type DiffCount = {
   [tabIndex: number]: number;
 };
 
-const uiComponent = getConfig('components').tabPane;
+const tabPaneComponent = getConfig('components').tabPane;
+const tabsComponent = getConfig('components').tabs;
 
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;
@@ -135,7 +142,7 @@ const tabs = computed(() => {
     if (!props.config.name) throw new Error('dynamic tab 必须配置name');
     return props.model[props.config.name] || [];
   }
-  return props.config.items;
+  return props.config.items.filter((item) => displayFunc(mForm, item.display, props));
 });
 
 const filter = (config: any) => filterFunction(mForm, config, props);
@@ -193,8 +200,6 @@ const onTabRemove = (tabName: string) => {
   mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
 };
 
-const display = (displayConfig: any) => displayFunc(mForm, displayConfig, props);
-
 const changeHandler = () => {
   emit('change', props.model);
   if (typeof props.config.onChange === 'function') {

package/src/fields/Select.vue

@@ -5,8 +5,8 @@
     v-loading="loading"
     class="m-select"
     ref="tMagicSelect"
-    clearable
-    filterable
+    :clearable="typeof config.clearable !== 'undefined' ? config.clearable : true"
+    :filterable="typeof config.filterable !== 'undefined' ? config.filterable : true"
     :popper-class="`m-select-popper ${popperClass}`"
     :size="size"
     :remote="remote"

package/src/fields/Text.vue

@@ -11,14 +11,14 @@
   >
     <template #append v-if="config.append">
       <span v-if="typeof config.append === 'string'">{{ config.append }}</span>
-      <el-button
+      <TMagicButton
         v-if="typeof config.append === 'object' && config.append.type === 'button'"
         style="color: #409eff"
         :size="size"
         @click.prevent="buttonClickHandler"
       >
         {{ config.append.text }}
-      </el-button>
+      </TMagicButton>
     </template>
   </TMagicInput>
 </template>
@@ -26,7 +26,7 @@
 <script lang="ts" setup name="MFormText">
 import { inject } from 'vue';
 
-import { TMagicInput } from '@tmagic/design';
+import { TMagicButton, TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
 import { FormState, TextConfig } from '../schema';

package/src/schema.ts

@@ -432,6 +432,7 @@ export interface SelectConfig extends FormItem, Input {
   multiple?: boolean;
   valueKey?: string;
   allowCreate?: boolean;
+  filterable?: boolean;
   group?: boolean;
   options: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
   remote: true;

package/types/Form.vue.d.ts

@@ -13,7 +13,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled?: boolean | undefined;
     height?: string | undefined;
     stepActive?: string | number | undefined;
-    size?: "small" | "default" | "large" | undefined;
+    size?: "default" | "small" | "large" | undefined;
     inline?: boolean | undefined;
     labelPosition?: string | undefined;
     keyProp?: string | undefined;
@@ -53,7 +53,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled?: boolean | undefined;
     height?: string | undefined;
     stepActive?: string | number | undefined;
-    size?: "small" | "default" | "large" | undefined;
+    size?: "default" | "small" | "large" | undefined;
     inline?: boolean | undefined;
     labelPosition?: string | undefined;
     keyProp?: string | undefined;
@@ -90,8 +90,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     labelPosition: string;
 }>;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -99,7 +99,7 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-declare type __VLS_WithDefaults<P, D> = {
+type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
         default: D[K];
     } : P[K];