feat: remove lodash-es (#648)

Co-authored-by: Daniel Roe <daniel@roe.dev>

package.json

@@ -45,8 +45,9 @@
     "@vueuse/integrations": "^10.4.1",
     "@vueuse/math": "^10.4.1",
     "defu": "^6.1.2",
+    "ohash": "^1.1.3",
+    "scule": "^1.0.0",
     "fuse.js": "^6.6.2",
-    "lodash-es": "^4.17.21",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3"
   },
@@ -70,4 +71,4 @@
       "nuxt-component-meta@0.5.3": "patches/nuxt-component-meta@0.5.3.patch"
     }
   }
-}
+}

src/colors.ts

@@ -1,4 +1,5 @@
-import { omit, kebabCase, camelCase, upperFirst } from 'lodash-es'
+import { omit } from './runtime/utils/lodash'
+import { kebabCase, camelCase, upperFirst } from 'scule'
 
 const colorsToExclude = [
   'inherit',

src/runtime/components/data/Table.vue

@@ -69,9 +69,10 @@
 <script lang="ts">
 import { ref, computed, defineComponent, toRaw } from 'vue'
 import type { PropType } from 'vue'
-import { omit, capitalize, orderBy, get } from 'lodash-es'
+import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { twMerge } from 'tailwind-merge'
+import { omit, get } from '../../utils/lodash'
 import { defuTwMerge } from '../../utils'
 import UButton from '../elements/Button.vue'
 import UIcon from '../elements/Icon.vue'
@@ -158,7 +159,7 @@ export default defineComponent({
 
     const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
 
-    const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ['click'])).map((key) => ({ key, label: capitalize(key), sortable: false })))
+    const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ['click'])).map((key) => ({ key, label: upperFirst(key), sortable: false })))
 
     const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' }))
 
@@ -169,7 +170,20 @@ export default defineComponent({
 
       const { column, direction } = sort.value
 
-      return orderBy(props.rows, column, direction)
+      return props.rows.slice().sort((a, b) => {
+        const aValue = a[column]
+        const bValue = b[column]
+
+        if (aValue === bValue) {
+          return 0
+        }
+
+        if (direction === 'asc') {
+          return aValue < bValue ? -1 : 1
+        } else {
+          return aValue > bValue ? -1 : 1
+        }
+      })
     })
 
     const selected = computed({

src/runtime/components/elements/Accordion.vue

@@ -43,7 +43,7 @@
 import { ref, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'

src/runtime/components/elements/Alert.vue

@@ -45,7 +45,7 @@ import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
 import appConfig from '#build/app.config'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 
 // const appConfig = useAppConfig()
 

src/runtime/components/elements/Avatar.vue

@@ -29,8 +29,7 @@ import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
 import appConfig from '#build/app.config'
-import { omit } from 'lodash-es'
-
+import { omit } from '../../utils/lodash'
 // const appConfig = useAppConfig()
 
 export default defineComponent({

src/runtime/components/elements/AvatarGroup.ts

@@ -1,6 +1,6 @@
 import { h, cloneVNode, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge, getSlotsChildren } from '../../utils'
 import Avatar from './Avatar.vue'

src/runtime/components/elements/Badge.vue

@@ -7,7 +7,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'

src/runtime/components/elements/Button.vue

@@ -19,7 +19,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'

src/runtime/components/elements/ButtonGroup.ts

@@ -1,6 +1,6 @@
 import { h, cloneVNode, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge, getSlotsChildren } from '../../utils'
 import { useAppConfig } from '#imports'

src/runtime/components/elements/Dropdown.vue

@@ -49,7 +49,7 @@ import { defineComponent, ref, computed, onMounted } from 'vue'
 import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
 import { defu } from 'defu'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'

src/runtime/components/elements/Kbd.vue

@@ -7,7 +7,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'

src/runtime/components/elements/Link.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { isEqual } from 'lodash-es'
+import { isEqual } from 'ohash'
 import { defineComponent } from 'vue'
 import { NuxtLink } from '#components'
 

src/runtime/components/forms/Checkbox.vue

@@ -32,7 +32,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/FormGroup.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { computed, defineComponent, provide, inject } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge } from 'tailwind-merge'
 import type { FormError } from '../../types/form'
 import { defuTwMerge } from '../../utils'

src/runtime/components/forms/Input.vue

@@ -33,7 +33,7 @@
 <script lang="ts">
 import { ref, computed, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { defuTwMerge } from '../../utils'

src/runtime/components/forms/Radio.vue

@@ -29,7 +29,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/Range.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/Select.vue

@@ -55,7 +55,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
-import { get, omit } from 'lodash-es'
+import { get, omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { defuTwMerge } from '../../utils'

src/runtime/components/forms/SelectMenu.vue

@@ -131,7 +131,7 @@ import {
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'

src/runtime/components/forms/Textarea.vue

@@ -20,7 +20,7 @@
 <script lang="ts">
 import { ref, computed, watch, onMounted, nextTick, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useFormGroup } from '../../composables/useFormGroup'

src/runtime/components/forms/Toggle.vue

@@ -21,7 +21,7 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch } from '@headlessui/vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { defuTwMerge } from '../../utils'

src/runtime/components/layout/Card.vue

@@ -19,7 +19,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'

src/runtime/components/layout/Container.vue

@@ -7,7 +7,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'

src/runtime/components/layout/Skeleton.vue

@@ -5,7 +5,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'

src/runtime/components/navigation/CommandPalette.vue

@@ -68,7 +68,7 @@ import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { groupBy, map, omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
@@ -214,32 +214,50 @@ export default defineComponent({
       matchAllWhenSearchEmpty: true
     }))
 
-    const commands = computed(() => props.groups.filter(group => !group.search).reduce((acc, group) => {
-      return acc.concat(group.commands.map(command => ({ ...command, group: group.key })))
-    }, [] as Command[]))
+    const commands = computed(() => {
+      const commands: Command[] = []
+      for (const group of props.groups) {
+        if (!group.search) {
+          commands.push(...group.commands.map(command => ({ ...command, group: group.key })))
+        }
+      }
+      return commands
+    })
 
     const searchResults = ref<{ [key: string]: any }>({})
 
     const { results } = useFuse(query, commands, options)
 
-    const groups = computed(() => ([
-      ...map(groupBy(results.value, command => command.item.group), (results, key) => {
-        const commands = results.map((result) => {
+    const groups = computed(() => {
+      const groups: Group[] = []
+
+      const groupedCommands: Record<string, typeof results['value']> = {}
+      for (const command of results.value) {
+        groupedCommands[command.item.group] ||= []
+        groupedCommands[command.item.group].push(command)
+      }
+      for (const key in groupedCommands) {
+        const group = props.groups.find(group => group.key === key)
+        const commands = groupedCommands[key].slice(0, options.value.resultLimit).map((result) => {
           const { item, ...data } = result
 
           return {
             ...item,
             ...data
-          }
+          } as Command
         })
 
-        return {
-          ...props.groups.find(group => group.key === key),
-          commands: commands.slice(0, options.value.resultLimit)
-        } as Group
-      }),
-      ...props.groups.filter(group => !!group.search).map(group => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter(group => group.commands.length)
-    ]))
+        groups.push({ ...group, commands })
+      }
+
+      for (const group of props.groups) {
+        if (group.search && searchResults.value[group.key]?.length) {
+          groups.push({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })
+        }
+      }
+
+      return groups
+    })
 
     const debouncedSearch = useDebounceFn(async () => {
       const searchableGroups = props.groups.filter(group => !!group.search)

src/runtime/components/navigation/Pagination.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
+import { omit } from '../../utils/lodash'
 import { twMerge } from 'tailwind-merge'
 import UButton from '../elements/Button.vue'
 import { defuTwMerge } from '../../utils'