chore: revert fix(Icon): Cannot access Icon before initialization #2680 (#2...

vben

2023-04-06 553ee9c7aed3c679c4d00d1c1c6278b8578020d5

chore: revert fix(Icon): Cannot access Icon before initialization #2680 (#2683)

 src/components/Application/src/search/AppSearchModal.vue

@@ -61,7 +61,8 @@
  import { computed, unref, ref, watch, nextTick } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import AppSearchFooter from './AppSearchFooter.vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon';
  // @ts-ignore
  import vClickOutside from '/@/directives/clickOutside';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRefs } from '@vben/hooks';

 src/components/ClickOutSide/src/ClickOutSide.vue

@@ -8,7 +8,7 @@
  import { onClickOutside } from '@vueuse/core';

  const emit = defineEmits(['mounted', 'clickOutside']);
  const wrap = ref<ElRef>(null);
  const wrap = ref(null);

  onClickOutside(wrap, () => {
    emit('clickOutside');

 src/components/ContextMenu/src/ContextMenu.vue

@@ -2,7 +2,7 @@
  import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
  import type { FunctionalComponent, CSSProperties, PropType } from 'vue';
  import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon';
  import { Menu, Divider } from 'ant-design-vue';

  const prefixCls = 'context-menu';

 src/components/Cropper/src/CropperAvatar.vue

@@ -45,7 +45,7 @@
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import type { ButtonProps } from '/@/components/Button';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon';

  const props = {
    width: { type: [String, Number], default: '200px' },

 src/components/Form/src/components/ApiCascader.vue

@@ -19,6 +19,7 @@
  </a-cascader>
</template>
<script lang="ts">
  import { type Recordable } from '@vben/types';
  import { defineComponent, PropType, ref, unref, watch, watchEffect } from 'vue';
  import { Cascader } from 'ant-design-vue';
  import { propTypes } from '/@/utils/propTypes';
@@ -46,7 +47,7 @@
        type: Array,
      },
      api: {
        type: Function as PropType<(arg?: Recordable) => Promise<Option[]>>,
        type: Function as PropType<(arg?: Recordable<any>) => Promise<Option[]>>,
        default: null,
      },
      numberToString: propTypes.bool,
@@ -58,12 +59,12 @@
      immediate: propTypes.bool.def(true),
      // init fetch params
      initFetchParams: {
        type: Object as PropType<Recordable>,
        type: Object as PropType<Recordable<any>>,
        default: () => ({}),
      },
      // 是否有下级，默认是
      isLeaf: {
        type: Function as PropType<(arg: Recordable) => boolean>,
        type: Function as PropType<(arg: Recordable<any>) => boolean>,
        default: null,
      },
      displayRenderArray: {
@@ -92,7 +93,7 @@

      function generatorOptions(options: any[]): Option[] {
        const { labelField, valueField, numberToString, childrenField, isLeaf } = props;
        return options.reduce((prev, next: Recordable) => {
        return options.reduce((prev, next: Recordable<any>) => {
          if (next) {
            const value = next[valueField];
            const item = {

 src/components/Form/src/components/ApiTree.vue

@@ -10,7 +10,8 @@
</template>

<script lang="ts">
  import { computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
  import { type Recordable, type AnyFunction } from '@vben/types';
  import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
  import { Tree } from 'ant-design-vue';
  import { isArray, isFunction } from '/@/utils/is';
  import { get } from 'lodash-es';
@@ -21,15 +22,15 @@
    name: 'ApiTree',
    components: { ATree: Tree, LoadingOutlined },
    props: {
      api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
      api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
      params: { type: Object },
      immediate: { type: Boolean, default: true },
      resultField: propTypes.string.def(''),
      afterFetch: { type: Function as PropType<Fn> },
      afterFetch: { type: Function as PropType<AnyFunction> },
    },
    emits: ['options-change', 'change'],
    setup(props, { attrs, emit }) {
      const treeData = ref<Recordable[]>([]);
      const treeData = ref<Recordable<any>[]>([]);
      const isFirstLoaded = ref<Boolean>(false);
      const loading = ref(false);
      const getAttrs = computed(() => {
@@ -81,7 +82,7 @@
        if (!isArray(result)) {
          result = get(result, props.resultField);
        }
        treeData.value = (result as Recordable[]) || [];
        treeData.value = (result as Recordable<any>[]) || [];
        isFirstLoaded.value = true;
        emit('options-change', treeData.value);
      }

 src/components/Form/src/components/ApiTreeSelect.vue

@@ -10,7 +10,8 @@
</template>

<script lang="ts">
  import { computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
  import { type Recordable } from '@vben/types';
  import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
  import { TreeSelect } from 'ant-design-vue';
  import { isArray, isFunction } from '/@/utils/is';
  import { get } from 'lodash-es';
@@ -21,14 +22,14 @@
    name: 'ApiTreeSelect',
    components: { ATreeSelect: TreeSelect, LoadingOutlined },
    props: {
      api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
      api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
      params: { type: Object },
      immediate: { type: Boolean, default: true },
      resultField: propTypes.string.def(''),
    },
    emits: ['options-change', 'change'],
    setup(props, { attrs, emit }) {
      const treeData = ref<Recordable[]>([]);
      const treeData = ref<Recordable<any>[]>([]);
      const isFirstLoaded = ref<Boolean>(false);
      const loading = ref(false);
      const getAttrs = computed(() => {
@@ -77,7 +78,7 @@
        if (!isArray(result)) {
          result = get(result, props.resultField);
        }
        treeData.value = (result as Recordable[]) || [];
        treeData.value = (result as Recordable<any>[]) || [];
        isFirstLoaded.value = true;
        emit('options-change', treeData.value);
      }

 src/components/Form/src/components/FormItem.vue

@@ -1,8 +1,9 @@
<script lang="tsx">
  import { type Recordable, type Nullable } from '@vben/types';
  import type { PropType, Ref } from 'vue';
  import { computed, defineComponent, toRefs, unref } from 'vue';
  import type { FormActionType, FormProps, FormSchema } from '../types/form';
  import type { Rule } from 'ant-design-vue/lib/form';
  import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
  import type { TableActionType } from '/@/components/Table';
  import { Col, Divider, Form } from 'ant-design-vue';
  import { componentMap } from '../componentMap';
@@ -31,11 +32,11 @@
        default: () => ({}),
      },
      allDefaultValues: {
        type: Object as PropType<Recordable>,
        type: Object as PropType<Recordable<any>>,
        default: () => ({}),
      },
      formModel: {
        type: Object as PropType<Recordable>,
        type: Object as PropType<Recordable<any>>,
        default: () => ({}),
      },
      setFormModel: {
@@ -72,7 +73,7 @@
            ...mergeDynamicData,
            ...allDefaultValues,
            ...formModel,
          } as Recordable,
          } as Recordable<any>,
          schema: schema,
        };
      });
@@ -93,7 +94,7 @@
            componentProps,
          );
        }
        return componentProps as Recordable;
        return componentProps as Recordable<any>;
      });

      const getDisable = computed(() => {
@@ -138,7 +139,7 @@
        return { isShow, isIfShow };
      }

      function handleRules(): Rule[] {
      function handleRules(): ValidationRule[] {
        const {
          rules: defRules = [],
          component,
@@ -149,10 +150,10 @@
        } = props.schema;

        if (isFunction(dynamicRules)) {
          return dynamicRules(unref(getValues)) as Rule[];
          return dynamicRules(unref(getValues)) as ValidationRule[];
        }

        let rules: Rule[] = cloneDeep(defRules) as Rule[];
        let rules: ValidationRule[] = cloneDeep(defRules) as ValidationRule[];
        const { rulesMessageJoinLabel: globalRulesMessageJoinLabel } = props.formProps;

        const joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel')
@@ -235,7 +236,7 @@
        if (characterInx !== -1 && !rules[characterInx].validator) {
          rules[characterInx].message =
            rules[characterInx].message ||
            t('component.form.maxTip', [rules[characterInx].max] as Recordable);
            t('component.form.maxTip', [rules[characterInx].max] as Recordable<any>);
        }
        return rules;
      }
@@ -254,7 +255,7 @@
        const eventKey = `on${upperFirst(changeEvent)}`;

        const on = {
          [eventKey]: (...args: Nullable<Recordable>[]) => {
          [eventKey]: (...args: Nullable<Recordable<any>>[]) => {
            const [e] = args;
            if (propsData[eventKey]) {
              propsData[eventKey](...args);
@@ -267,7 +268,7 @@
        const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;

        const { autoSetPlaceHolder, size } = props.formProps;
        const propsData: Recordable = {
        const propsData: Recordable<any> = {
          allowClear: true,
          getPopupContainer: (trigger: Element) => trigger.parentNode,
          size,
@@ -284,11 +285,11 @@
        propsData.codeField = field;
        propsData.formValues = unref(getValues);

        const bindValue: Recordable = {
        const bindValue: Recordable<any> = {
          [valueField || (isCheck ? 'checked' : 'value')]: props.formModel[field],
        };

        const compAttr: Recordable = {
        const compAttr: Recordable<any> = {
          ...propsData,
          ...on,
          ...bindValue,
@@ -365,7 +366,7 @@
              name={field}
              colon={colon}
              class={{ 'suffix-item': showSuffix }}
              {...(itemProps as Recordable)}
              {...(itemProps as Recordable<any>)}
              label={renderLabelHelpMessage()}
              rules={handleRules()}
              labelCol={labelCol}

 src/components/Icon/index.ts

@@ -4,4 +4,4 @@

export { Icon, IconPicker, SvgIcon };

// export default Icon;
export default Icon;

 src/components/Menu/src/components/MenuItemContent.vue

@@ -7,7 +7,7 @@
<script lang="ts">
  import { computed, defineComponent } from 'vue';

  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { contentProps } from '../props';

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

@@ -19,6 +19,7 @@
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  import { basicProps } from '../props';

  export default defineComponent({

 src/components/Page/src/PageWrapper.vue

@@ -33,9 +33,17 @@
  </div>
</template>
<script lang="ts">
  import type { CSSProperties, PropType, provide } from 'vue';
  import {
    CSSProperties,
    PropType,
    provide,
    defineComponent,
    computed,
    watch,
    ref,
    unref,
  } from 'vue';

  import { defineComponent, computed, watch, ref, unref } from 'vue';
  import PageFooter from './PageFooter.vue';

  import { useDesign } from '/@/hooks/web/useDesign';

 src/components/SimpleMenu/src/SimpleSubMenu.vue

@@ -48,7 +48,7 @@

  import { defineComponent, computed } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';

  import MenuItem from './components/MenuItem.vue';
  import SubMenu from './components/SubMenuItem.vue';

 src/components/SimpleMenu/src/components/MenuItem.vue

@@ -17,8 +17,7 @@
</template>

<script lang="ts">
  import type { PropType } from 'vue';
  import { defineComponent, ref, computed, unref, getCurrentInstance, watch } from 'vue';
  import { PropType, defineComponent, ref, computed, unref, getCurrentInstance, watch } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { propTypes } from '/@/utils/propTypes';
  import { useMenuItem } from './useMenu';

 src/components/SimpleMenu/src/components/SubMenuItem.vue

@@ -75,7 +75,7 @@
  import { useMenuItem } from './useMenu';
  import { useSimpleRootMenuContext } from './useSimpleMenuContext';
  import { CollapseTransition } from '/@/components/Transition';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon';
  import { Popover } from 'ant-design-vue';
  import { isBoolean, isObject } from '/@/utils/is';
  import { mitt } from '/@/utils/mitt';

 src/components/Table/src/components/TableAction.vue

@@ -34,7 +34,7 @@
  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
  import { MoreOutlined } from '@ant-design/icons-vue';
  import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import { ActionItem, TableActionType } from '/@/components/Table';
  import { PopConfirmButton } from '/@/components/Button';
  import { Dropdown } from '/@/components/Dropdown';

 src/layouts/default/header/components/Breadcrumb.vue

@@ -21,7 +21,7 @@
  import { defineComponent, ref, watchEffect } from 'vue';

  import { Breadcrumb } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';

 src/layouts/default/header/components/ErrorAction.vue

@@ -13,7 +13,7 @@
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { Tooltip, Badge } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { useErrorLogStore } from '/@/store/modules/errorLog';

 src/layouts/default/header/components/user-dropdown/DropMenuItem.vue

@@ -11,7 +11,7 @@

  import { computed, defineComponent, getCurrentInstance } from 'vue';

  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import { propTypes } from '/@/utils/propTypes';

  export default defineComponent({

 src/layouts/default/setting/index.vue

@@ -7,7 +7,7 @@
<script lang="ts">
  import { defineComponent } from 'vue';
  import SettingDrawer from './SettingDrawer';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon';

  import { useDrawer } from '/@/components/Drawer';


 src/views/demo/page/account/center/Application.vue

@@ -30,7 +30,7 @@
<script lang="ts">
  import { defineComponent } from 'vue';
  import { List, Card, Row, Col } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import { applicationList } from './data';

  export default defineComponent({

 src/views/demo/page/account/center/Article.vue

@@ -42,7 +42,7 @@
<script lang="ts">
  import { defineComponent } from 'vue';
  import { List, Tag } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import { actions, articleList } from './data';

  export default defineComponent({

 src/views/demo/page/account/center/index.vue

@@ -56,7 +56,7 @@
  import { Tag, Tabs, Row, Col } from 'ant-design-vue';
  import { defineComponent, computed } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import Article from './Article.vue';
  import Application from './Application.vue';
  import Project from './Project.vue';

 src/views/demo/page/account/setting/AccountBind.vue

@@ -26,7 +26,7 @@
  import { List } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';

  import { accountBindList } from './data';


 src/views/demo/page/list/basic/index.vue

@@ -51,12 +51,11 @@
  </PageWrapper>
</template>
<script lang="ts">
  import { Progress, Row, Col } from 'ant-design-vue';
  import { Progress, Row, Col, List } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import { cardList } from './data';
  import { PageWrapper } from '/@/components/Page';
  import { List } from 'ant-design-vue';

  export default defineComponent({
    components: {

 src/views/demo/page/list/card/index.vue

@@ -34,7 +34,7 @@
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import { cardList } from './data';
  import { PageWrapper } from '/@/components/Page';
  import { Card, Row, Col, List } from 'ant-design-vue';

 src/views/demo/page/list/search/index.vue

@@ -55,7 +55,7 @@
<script lang="ts">
  import { Tag, List } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';
  import { BasicForm } from '/@/components/Form/index';
  import { actions, searchList, schemas } from './data';
  import { PageWrapper } from '/@/components/Page';

 src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue

@@ -17,7 +17,7 @@
  import { IVFormComponent } from '../../../typings/v-form-component';
  import { remove } from '../../../utils';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';

  export default defineComponent({
    name: 'FormNodeOperate',

 src/views/form-design/components/VFormDesign/components/FormOptions.vue

@@ -38,7 +38,7 @@
  import { remove } from '../../../utils';
  import message from '../../../utils/message';
  import { Input } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';

  export default defineComponent({
    name: 'FormOptions',

 src/views/form-design/components/VFormDesign/components/RuleProps.vue

@@ -38,7 +38,7 @@
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { isArray } from 'lodash-es';
  import { Form, FormItem, AutoComplete, Input } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon';

  export default defineComponent({
    name: 'RuleProps',

 src/views/form-design/components/VFormDesign/modules/Toolbar.vue

@@ -31,7 +31,7 @@
  import { UseRefHistoryReturn } from '@vueuse/core';
  import { IFormConfig } from '../../../typings/v-form-component';
  import { Tooltip, Divider } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Icon from '/@/components/Icon/index';

  interface IToolbarsConfig {
    type: string;

 src/views/form-design/components/VFormItem/index.vue

@@ -46,8 +46,8 @@
  import { asyncComputed } from '@vueuse/core';
  import { handleAsyncOptions } from '../../utils';
  import { omit } from 'lodash-es';
  import { type Recordable } from '@vben/types';
  import { Tooltip, FormItem, Divider, Col } from 'ant-design-vue';
  // import FormItem from '/@/components/Form/src/components/FormItem.vue';
  import { Icon } from '/@/components/Icon';
  import { useFormModelState } from '../../hooks/useFormDesignState';

@@ -142,7 +142,7 @@
          newConfig.rules = rules;
        }
        return newConfig;
      }) as Recordable;
      }) as Recordable<any>;

      const componentItem = computed(() => componentMap.get(props.schema.component as string));