Merge pull request #836 from colinin/fix-components

fix(components): fix components

apps/vue/src/components/Form/src/componentMap.ts

@@ -36,10 +36,22 @@ import { Input as BInput } from '/@/components/Input';
 import { CodeEditorX } from '/@/components/CodeEditor';
 
 const componentMap = new Map<ComponentType, Component>();
+const customComponentMap = new Map<ComponentType, Component>();
 
-componentMap.set('CodeEditorX', CodeEditorX);
+customComponentMap.set('CodeEditorX', CodeEditorX);
+customComponentMap.set('Input', BInput);
+customComponentMap.set('ApiSelect', ApiSelect);
+customComponentMap.set('ApiTree', ApiTree);
+customComponentMap.set('ApiTreeSelect', ApiTreeSelect);
+customComponentMap.set('ApiRadioGroup', ApiRadioGroup);
+customComponentMap.set('ApiCascader', ApiCascader);
+customComponentMap.set('StrengthMeter', StrengthMeter);
+customComponentMap.set('InputCountDown', CountdownInput);
+customComponentMap.set('IconPicker', IconPicker);
+customComponentMap.set('Upload', BasicUpload);
+customComponentMap.set('ApiTransfer', ApiTransfer);
+customComponentMap.set('RadioButtonGroup', RadioButtonGroup);
 
-componentMap.set('Input', BInput);
 componentMap.set('InputGroup', Input.Group);
 componentMap.set('InputPassword', Input.Password);
 componentMap.set('InputSearch', Input.Search);
@@ -48,34 +60,26 @@ componentMap.set('InputNumber', InputNumber);
 componentMap.set('AutoComplete', AutoComplete);
 
 componentMap.set('Select', Select);
-componentMap.set('ApiSelect', ApiSelect);
-componentMap.set('ApiTree', ApiTree);
 componentMap.set('TreeSelect', TreeSelect);
-componentMap.set('ApiTreeSelect', ApiTreeSelect);
-componentMap.set('ApiRadioGroup', ApiRadioGroup);
 componentMap.set('Switch', Switch);
-componentMap.set('RadioButtonGroup', RadioButtonGroup);
 componentMap.set('RadioGroup', Radio.Group);
 componentMap.set('Checkbox', Checkbox);
 componentMap.set('CheckboxGroup', Checkbox.Group);
-componentMap.set('ApiCascader', ApiCascader);
 componentMap.set('Cascader', Cascader);
 componentMap.set('Slider', Slider);
 componentMap.set('Rate', Rate);
-componentMap.set('ApiTransfer', ApiTransfer);
 
 componentMap.set('DatePicker', DatePicker);
 componentMap.set('MonthPicker', DatePicker.MonthPicker);
 componentMap.set('RangePicker', DatePicker.RangePicker);
 componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
-componentMap.set('StrengthMeter', StrengthMeter);
-componentMap.set('IconPicker', IconPicker);
-componentMap.set('InputCountDown', CountdownInput);
-
-componentMap.set('Upload', BasicUpload);
 componentMap.set('Divider', Divider);
 
+customComponentMap.forEach((v, k) => {
+  componentMap.set(k, v);
+});
+
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);
 }
@@ -84,4 +88,4 @@ export function del(compName: ComponentType) {
   componentMap.delete(compName);
 }
 
-export { componentMap };
+export { componentMap, customComponentMap };

apps/vue/src/components/FormDesign/src/components/VFormCreate/components/FormRender.vue

@@ -75,4 +75,9 @@
   .v-form-render-item {
     overflow: hidden;
   }
+
+  .grid-row {
+    width: 100%;
+    padding: 10px;
+  }
 </style>

apps/vue/src/components/FormDesign/src/core/formItemConfig.ts

@@ -3,7 +3,7 @@
  */
 import { IVFormComponent } from '../typings/v-form-component';
 import { isArray } from 'lodash-es';
-import { componentMap as VbenCmp, add } from '/@/components/Form/src/componentMap';
+import { customComponentMap as VbenCmp, add } from '/@/components/Form/src/componentMap';
 import { ComponentType } from '/@/components/Form/src/types';
 
 import { componentMap as Cmp } from '../components';

apps/vue/src/components/Modal/src/components/ModalFooter.vue

@@ -2,7 +2,7 @@
   <div>
     <slot name="insertFooter"></slot>
     <a-button v-bind="cancelButtonProps" @click="handleCancel" v-if="showCancelBtn">
-      {{ cancelText }}
+      {{ getCancelText }}
     </a-button>
     <slot name="centerFooter"></slot>
     <a-button
@@ -12,20 +12,30 @@
       v-bind="okButtonProps"
       v-if="showOkBtn"
     >
-      {{ okText }}
+      {{ getOkText }}
     </a-button>
     <slot name="appendFooter"></slot>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-
+  import { computed, defineComponent } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
   import { basicProps } from '../props';
   export default defineComponent({
     name: 'BasicModalFooter',
     props: basicProps,
     emits: ['ok', 'cancel'],
-    setup(_, { emit }) {
+    setup(props, { emit }) {
+      const { t } = useI18n();
+
+      const getOkText = computed(() => {
+        return props.okText || t('common.okText');
+      });
+
+      const getCancelText = computed(() => {
+        return props.cancelText || t('common.cancelText');
+      });
+
       function handleOk(e: Event) {
         emit('ok', e);
       }
@@ -34,7 +44,7 @@
         emit('cancel', e);
       }
 
-      return { handleOk, handleCancel };
+      return { handleOk, handleCancel, getOkText, getCancelText, };
     },
   });
 </script>

apps/vue/src/components/Modal/src/props.ts

@@ -1,9 +1,6 @@
 import type { PropType, CSSProperties } from 'vue';
 import type { ModalWrapperProps } from './typing';
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
-import { useI18n } from '/@/hooks/web/useI18n';
-
-const { t } = useI18n();
 
 export const modalProps = {
   visible: { type: Boolean },
@@ -13,8 +10,8 @@ export const modalProps = {
   // open drag
   draggable: { type: Boolean, default: true },
   centered: { type: Boolean },
-  cancelText: { type: String, default: t('common.cancelText') },
-  okText: { type: String, default: t('common.okText') },
+  cancelText: { type: String, default: 'Cancel' },
+  okText: { type: String, default: 'Ok' },
 
   closeFunc: Function as PropType<() => Promise<boolean>>,
 };

apps/vue/src/utils/index.ts

@@ -1,5 +1,5 @@
 import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
-import type { App, Plugin } from 'vue';
+import type { App, Component } from 'vue';
 
 import { unref } from 'vue';
 import { isObject } from '/@/utils/is';
@@ -59,7 +59,7 @@ export function openWindow(
 export function getDynamicProps<T, U>(props: T): Partial<U> {
   const ret: Recordable = {};
 
-  Object.keys(props).map((key) => {
+  Object.keys(props as any).map((key) => {
     ret[key] = unref((props as Recordable)[key]);
   });
 
@@ -81,14 +81,29 @@ export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormal
   };
 }
 
-export const withInstall = <T>(component: T, alias?: string) => {
-  if (!component) return;
-  const comp = component as any;
-  comp.install = (app: App) => {
-    app.component(comp.name || comp.displayName, component);
+// https://github.com/vant-ui/vant/issues/8302
+type EventShim = {
+  new (...args: any[]): {
+    $props: {
+      onClick?: (...args: any[]) => void;
+    };
+  };
+};
+
+export type WithInstall<T> = T & {
+  install(app: App): void;
+} & EventShim;
+
+export type CustomComponent = Component & { displayName?: string };
+
+export const withInstall = <T extends CustomComponent>(component: T, alias?: string) => {
+  (component as Record<string, unknown>).install = (app: App) => {
+    const compName = component.name || component.displayName;
+    if (!compName) return;
+    app.component(compName, component);
     if (alias) {
       app.config.globalProperties[alias] = component;
     }
   };
-  return component as T & Plugin;
+  return component as WithInstall<T>;
 };