feat: remove lodash-es (#648)

Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Younes Barrad
2023-09-14 17:47:09 +01:00
committed by GitHub
parent 5fc44b97c6
commit d6476d17f9
39 changed files with 173 additions and 91 deletions

View File

@@ -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"
}
}
}
}

18
pnpm-lock.yaml generated
View File

@@ -61,9 +61,12 @@ importers:
fuse.js:
specifier: ^6.6.2
version: 6.6.2
lodash-es:
specifier: ^4.17.21
version: 4.17.21
ohash:
specifier: ^1.1.3
version: 1.1.3
scule:
specifier: ^1.0.0
version: 1.0.0
tailwind-merge:
specifier: ^1.14.0
version: 1.14.0
@@ -2666,8 +2669,8 @@ packages:
'@types/node': 20.5.7
dev: true
/@types/lodash-es@4.17.8:
resolution: {integrity: sha512-euY3XQcZmIzSy7YH5+Unb3b2X12Wtk54YWINBvvGQ5SmMvwb11JQskGsfkH/5HXK77Kr8GF0wkVDIxzAisWtog==}
/@types/lodash-es@4.17.9:
resolution: {integrity: sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==}
dependencies:
'@types/lodash': 4.14.197
dev: true
@@ -7476,6 +7479,7 @@ packages:
/lodash-es@4.17.21:
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
dev: true
/lodash._reinterpolate@3.0.0:
resolution: {integrity: sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==}
@@ -8981,8 +8985,8 @@ packages:
/nuxt-lodash@2.5.0(rollup@3.28.1):
resolution: {integrity: sha512-nd7YrKzJH7kqMEwyAlwk0T8Fi/G1heAaWJENFm6SUIwYgR6AOigp/ryLya+JBEP+ZmGrJbIHq+mhWNdvKsLK7g==}
dependencies:
'@nuxt/kit': 3.7.0(rollup@3.28.1)
'@types/lodash-es': 4.17.8
'@nuxt/kit': 3.7.1(rollup@3.28.1)
'@types/lodash-es': 4.17.9
lodash-es: 4.17.21
transitivePeerDependencies:
- rollup

View File

@@ -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',

View File

@@ -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({

View File

@@ -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'

View File

@@ -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()

View File

@@ -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({

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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'

View File

@@ -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)

View File

@@ -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'

View File

@@ -52,7 +52,7 @@ import { ref, computed, watch, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
import { useResizeObserver } from '@vueuse/core'
import { omit } from 'lodash-es'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import type { TabItem } from '../../types/tabs'

View File

@@ -40,7 +40,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 UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'

View File

@@ -14,7 +14,7 @@ import type { PropType, Ref } from 'vue'
import { defu } from 'defu'
import { onClickOutside } from '@vueuse/core'
import type { VirtualElement } from '@popperjs/core'
import { omit } from 'lodash-es'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'

View File

@@ -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 } from 'tailwind-merge'
import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { defuTwMerge } from '../../utils'

View File

@@ -41,7 +41,7 @@
<script lang="ts">
import { ref, computed, onMounted, onUnmounted, watchEffect, 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 UAvatar from '../elements/Avatar.vue'

View File

@@ -20,7 +20,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 UNotification from './Notification.vue'
import { useToast } from '../../composables/useToast'

View File

@@ -29,7 +29,7 @@
import { computed, ref, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { omit } from 'lodash-es'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
import { usePopper } from '../../composables/usePopper'

View File

@@ -18,7 +18,7 @@
import { computed, defineComponent } from 'vue'
import type { WritableComputedRef, PropType } from 'vue'
import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { omit } from 'lodash-es'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'

View File

@@ -27,7 +27,7 @@
import { computed, ref, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { omit } from 'lodash-es'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UKbd from '../elements/Kbd.vue'
import { usePopper } from '../../composables/usePopper'

View File

@@ -2,7 +2,6 @@ import { ref, onMounted, watchEffect } from 'vue'
import type { Ref } from 'vue'
import { popperGenerator, defaultModifiers, VirtualElement } from '@popperjs/core/lib/popper-lite'
import type { Instance } from '@popperjs/core'
import { omitBy, isUndefined } from 'lodash-es'
import flip from '@popperjs/core/lib/modifiers/flip'
import offset from '@popperjs/core/lib/modifiers/offset'
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow'
@@ -43,36 +42,49 @@ export function usePopper ({
if (!(popperEl instanceof HTMLElement)) { return }
if (!referenceEl) { return }
instance.value = createPopper(referenceEl, popperEl, omitBy({
placement,
strategy,
modifiers: [{
name: 'flip',
enabled: !locked
}, {
name: 'preventOverflow',
options: {
padding: overflowPadding
const config: Record<string, any> = {
modifiers: [
{
name: 'flip',
enabled: !locked
},
{
name: 'preventOverflow',
options: {
padding: overflowPadding
}
},
{
name: 'offset',
options: {
offset: [offsetSkid, offsetDistance]
}
},
{
name: 'computeStyles',
options: {
adaptive,
gpuAcceleration
}
},
{
name: 'eventListeners',
options: {
scroll,
resize
}
}
}, {
name: 'offset',
options: {
offset: [offsetSkid, offsetDistance]
}
}, {
name: 'computeStyles',
options: {
adaptive,
gpuAcceleration
}
}, {
name: 'eventListeners',
options: {
scroll,
resize
}
}]
}, isUndefined))
]
}
if (placement) {
config.placement = placement
}
if (strategy) {
config.strategy = strategy
}
instance.value = createPopper(referenceEl, popperEl, config)
onInvalidate(instance.value.destroy)
})

View File

@@ -0,0 +1,33 @@
export function omit<T extends Record<string, any>, K extends keyof T> (
object: T,
keysToOmit: K[] | any[]
): Pick<T, Exclude<keyof T, K>> {
const result = { ...object }
for (const key of keysToOmit) {
delete result[key]
}
return result
}
export function get (object: Record<string, any>, path: (string | number)[] | string, defaultValue?: any): any {
if (typeof path === 'string') {
path = path.split('.').map(key => {
const numKey = Number(key)
return isNaN(numKey) ? key : numKey
})
}
let result: any = object
for (const key of path) {
if (result === undefined || result === null) {
return defaultValue
}
result = result[key]
}
return result !== undefined ? result : defaultValue
}