lodash-es instead of lodash (#4959)

* feat: lodash-es instead of lodash

* feat(_common): mergeWith

* fix(empty): some function

* feat: remove lodash

package.json

@@ -86,12 +86,12 @@
   "dependencies": {
     "@babel/runtime": "^7.22.6",
     "@popperjs/core": "^2.11.8",
-    "@types/lodash": "4.14.182",
+    "@types/lodash-es": "^4.17.12",
     "@types/sortablejs": "^1.15.1",
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.7.17",
     "dayjs": "1.11.10",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "sortablejs": "^1.15.0",
     "tdesign-icons-vue-next": "^0.3.4",

script/init/index.js

@@ -27,7 +27,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const _ = require('lodash');
+const { template } = require('lodash-es');
 const utils = require('../utils');
 const config = require('./config');
 
@@ -75,20 +75,20 @@ function deleteComponent(toBeCreatedFiles, component) {
 function outputFileWithTemplate(item, component, desc, _d) {
   const tplPath = path.resolve(__dirname, `./tpl/${item.template}`);
   let data = fs.readFileSync(tplPath).toString();
-  const compiled = _.template(data);
+  const compiled = template(data);
   data = compiled({
     component,
     upperComponent: getFirstLetterUpper(component),
   });
-  const _f = path.resolve(_d, item.file);
-  createFile(_f, data, desc);
+  const fFn = path.resolve(_d, item.file);
+  createFile(fFn, data, desc);
 }
 
 function addComponent(toBeCreatedFiles, component) {
   // At first, we need to create directories for components.
   Object.keys(toBeCreatedFiles).forEach((dir) => {
-    const _d = path.resolve(cwdPath, dir);
-    fs.mkdir(_d, { recursive: true }, (err) => {
+    const dFn = path.resolve(cwdPath, dir);
+    fs.mkdir(dFn, { recursive: true }, (err) => {
       if (err) {
         utils.log(err, 'error');
         return;
@@ -102,8 +102,8 @@ function addComponent(toBeCreatedFiles, component) {
             outputFileWithTemplate(item, component, contents.desc, _d);
           }
         } else {
-          const _f = path.resolve(_d, item);
-          createFile(_f, '', contents.desc);
+          const fFn = path.resolve(_d, item);
+          createFile(fFn, '', contents.desc);
         }
       });
     });

src/affix/affix.tsx

@@ -1,6 +1,6 @@
 import { ref, watch, nextTick, onMounted, onBeforeUnmount, defineComponent, onActivated, onDeactivated } from 'vue';
-import isFunction from 'lodash/isFunction';
-import isUndefined from 'lodash/isUndefined';
+import { isFunction } from 'lodash-es';
+import { isUndefined } from 'lodash-es';
 
 import { on, off, getScrollContainer } from '../utils/dom';
 import props from './props';

src/alert/alert.tsx

@@ -6,8 +6,8 @@ import {
   HelpCircleFilledIcon as TdHelpCircleFilledIcon,
   InfoCircleFilledIcon as TdInfoCircleFilledIcon,
 } from 'tdesign-icons-vue-next';
-import isString from 'lodash/isString';
-import isArray from 'lodash/isArray';
+import { isString } from 'lodash-es';
+import { isArray } from 'lodash-es';
 
 import { on, off, addClass } from '../utils/dom';
 import props from './props';

src/anchor/_example-ts/base.vue

@@ -12,7 +12,7 @@
 </template>
 <script lang="tsx" setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 const { appContext } = getCurrentInstance() || {};
 const path = computed(() => get(appContext, '$route.path', ''));
 </script>

src/anchor/_example-ts/container.vue

@@ -18,7 +18,7 @@
 <script lang="tsx" setup>
 import { computed, getCurrentInstance } from 'vue';
 import { AnchorProps } from 'tdesign-vue-next';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));
 const handleClick: AnchorProps['onClick'] = ({ e, href, title }) => {

src/anchor/_example-ts/cursor.vue

@@ -16,7 +16,7 @@
 </template>
 <script lang="tsx" setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));
 </script>

src/anchor/_example-ts/custom-scroll.vue

@@ -12,7 +12,7 @@
 </template>
 <script lang="tsx" setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance() || {};
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/_example-ts/large.vue

@@ -13,7 +13,7 @@
 </template>
 <script lang="tsx" setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));
 </script>

src/anchor/_example-ts/multiple.vue

@@ -14,7 +14,7 @@
 </template>
 <script lang="tsx" setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));
 </script>

src/anchor/_example-ts/small.vue

@@ -13,7 +13,7 @@
 </template>
 <script lang="tsx" setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));
 </script>

src/anchor/_example-ts/target.vue

@@ -12,7 +12,7 @@
 
 <script lang="tsx" setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));
 </script>

src/anchor/_example/base.vue

@@ -12,7 +12,7 @@
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance() || {};
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/_example/container.vue

@@ -17,7 +17,7 @@
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/_example/cursor.vue

@@ -16,7 +16,7 @@
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/_example/custom-scroll.vue

@@ -12,7 +12,7 @@
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance() || {};
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/_example/large.vue

@@ -13,7 +13,7 @@
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/_example/multiple.vue

@@ -14,7 +14,7 @@
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/_example/small.vue

@@ -13,7 +13,7 @@
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/_example/target.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { computed, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 
 const { appContext } = getCurrentInstance();
 const path = computed(() => get(appContext, '$route.path', ''));

src/anchor/anchor-item.tsx

@@ -3,8 +3,8 @@ import { ANCHOR_SHARP_REGEXP } from './utils';
 import props from './anchor-item-props';
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { AnchorInjectionKey } from './constants';
-import isFunction from 'lodash/isFunction';
-import isString from 'lodash/isString';
+import { isFunction } from 'lodash-es';
+import { isString } from 'lodash-es';
 
 const localProps = {
   ...props,

src/auto-complete/highlight-option.tsx

@@ -1,8 +1,8 @@
 import { computed, defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { usePrefixClass } from '../hooks/useConfig';
-import isString from 'lodash/isString';
-import escapeRegExp from 'lodash/escapeRegExp';
+import { isString } from 'lodash-es';
+import { escapeRegExp } from 'lodash-es';
 
 export interface HighlightOptionProps {
   content: string;

src/auto-complete/option-list.tsx

@@ -1,13 +1,13 @@
 import { ref, computed, defineComponent, PropType, h, watch, onBeforeUnmount } from 'vue';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import HighlightOption from './highlight-option';
 import { CommonClassNameType } from '../hooks/useCommonClassName';
 import { AutoCompleteOptionObj, TdAutoCompleteProps } from './type';
 import log from '../_common/js/log';
 import { useConfig, usePrefixClass } from '../hooks/useConfig';
 import { on, off } from '../utils/dom';
-import isString from 'lodash/isString';
-import escapeRegExp from 'lodash/escapeRegExp';
+import { isString } from 'lodash-es';
+import { escapeRegExp } from 'lodash-es';
 import { ARROW_UP_REG, ARROW_DOWN_REG, ENTER_REG } from '../_common/js/common';
 
 export default defineComponent({

src/breadcrumb/breadcrumb-item.tsx

@@ -7,7 +7,7 @@ import { isTextEllipsis } from '../utils/dom';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 
 interface LocalTBreadcrumb {
   separator: (() => void) | string;

src/calendar/calendar.tsx

@@ -1,9 +1,9 @@
 import { defineComponent, computed, watch } from 'vue';
 // 通用库
 import dayjs from 'dayjs';
-import remove from 'lodash/remove';
-import isFunction from 'lodash/isFunction';
-import isArray from 'lodash/isArray';
+import { remove } from 'lodash-es';
+import { isFunction } from 'lodash-es';
+import { isArray } from 'lodash-es';
 
 import props from './props';
 import * as utils from './utils';

src/calendar/hook/useColHeaders.ts

@@ -5,7 +5,7 @@ import { TdCalendarProps, WeekDay } from '../type';
 import { useConfig } from '../../hooks/useConfig';
 import { COMPONENT_NAME } from '../const';
 import * as utils from '../utils';
-import isObject from 'lodash/isObject';
+import { isObject } from 'lodash-es';
 
 export function useColHeaders(props: TdCalendarProps, state: CalendarState) {
   const { t, globalConfig } = useConfig(COMPONENT_NAME);

src/calendar/hook/useController.ts

@@ -1,5 +1,5 @@
-import isFunction from 'lodash/isFunction';
-import isBoolean from 'lodash/isBoolean';
+import { isFunction } from 'lodash-es';
+import { isBoolean } from 'lodash-es';
 import { computed, nextTick } from 'vue';
 import dayjs from 'dayjs';
 import { COMPONENT_NAME } from '../const';

src/calendar/hook/useState.ts

@@ -6,7 +6,7 @@ import { COMPONENT_NAME } from '../const';
 import { createDefaultCurDate } from '../utils';
 import { TdCalendarProps } from '../type';
 import { CalendarState } from '../interface';
-import isArray from 'lodash/isArray';
+import { isArray } from 'lodash-es';
 
 export function useState(props: TdCalendarProps) {
   const { globalConfig } = useConfig(COMPONENT_NAME);

src/card/card.tsx

@@ -4,7 +4,7 @@ import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { useTNodeJSX } from '../hooks/tnode';
 import TLoading from '../loading';
 import props from './props';
-import isString from 'lodash/isString';
+import { isString } from 'lodash-es';
 import { TdCardProps } from './type';
 
 export default defineComponent({

src/cascader/cascader.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, computed } from 'vue';
-import omit from 'lodash/omit';
+import { omit } from 'lodash-es';
 import Panel from './components/Panel';
 import SelectInput from '../select-input';
 import FakeArrow from '../common-components/fake-arrow';

src/cascader/core/effect.ts

@@ -1,7 +1,7 @@
-import isNumber from 'lodash/isNumber';
-import isFunction from 'lodash/isFunction';
-import isArray from 'lodash/isArray';
-import cloneDeep from 'lodash/cloneDeep';
+import { isNumber } from 'lodash-es';
+import { isFunction } from 'lodash-es';
+import { isArray } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 
 import type { TreeNode, CascaderContextType, TdCascaderProps, TreeNodeValue, TreeNodeModel } from '../interface';
 import { getFullPathLabel, getTreeValue, isEmptyValues } from './helper';

src/cascader/core/helper.ts

@@ -1,7 +1,7 @@
-import isNumber from 'lodash/isNumber';
-import isObject from 'lodash/isObject';
-import isArray from 'lodash/isArray';
-import isEmpty from 'lodash/isEmpty';
+import { isNumber } from 'lodash-es';
+import { isObject } from 'lodash-es';
+import { isArray } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 import {
   TreeNode,
   CascaderContextType,

src/cascader/hooks.ts

@@ -1,7 +1,7 @@
 import { Ref, reactive, computed, toRefs, watch, nextTick } from 'vue';
-import isEqual from 'lodash/isEqual';
-import isFunction from 'lodash/isFunction';
-import isString from 'lodash/isString';
+import { isEqual } from 'lodash-es';
+import { isFunction } from 'lodash-es';
+import { isString } from 'lodash-es';
 
 import TreeStore from '../_common/js/tree/tree-store';
 import { useDisabled } from '../hooks/useDisabled';

src/checkbox/checkbox.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, ref, toRefs, inject, watch, computed } from 'vue';
-import isString from 'lodash/isString';
+import { isString } from 'lodash-es';
 import props from './props';
 import useVModel from '../hooks/useVModel';
 import useRipple from '../hooks/useRipple';

src/checkbox/group.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, provide, computed, watchEffect, ref, toRefs } from 'vue';
-import intersection from 'lodash/intersection';
-import isObject from 'lodash/isObject';
-import isUndefined from 'lodash/isUndefined';
+import { intersection } from 'lodash-es';
+import { isObject } from 'lodash-es';
+import { isUndefined } from 'lodash-es';
 import Checkbox from './checkbox';
 import props from './checkbox-group-props';
 import { CheckboxOptionObj, TdCheckboxProps, CheckboxGroupValue } from './type';

src/color-picker/color-picker-panel.tsx

@@ -2,7 +2,7 @@ import { computed, defineComponent } from 'vue';
 import props from './props';
 import ColorPanel from './panel';
 import { usePrefixClass } from '../hooks/useConfig';
-import pickBy from 'lodash/pickBy';
+import { pickBy } from 'lodash-es';
 
 export default defineComponent({
   name: 'TColorPickerPanel',

src/color-picker/panel/format/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, PropType, ref, watch } from 'vue';
-import upperCase from 'lodash/upperCase';
+import { upperCase } from 'lodash-es';
 import { TdColorPickerProps } from '../../type';
 import props from '../../props';
 import { FORMATS } from '../../../_common/js/color-picker/constants';