Merge pull request #150 from selemondev/refactor

chore (app): refactor

packages/nuxt-ui-vue/package.json

@@ -43,7 +43,8 @@
     "defu": "^6.1.2",
     "esno": "^0.17.0",
     "fuse.js": "^6.6.2",
-    "lodash-es": "^4.17.21",
+    "ohash": "^1.1.3",
+    "scule": "^1.0.0",
     "tailwind-merge": "^1.14.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"

packages/nuxt-ui-vue/src/App.vue

@@ -1,3 +1,5 @@
 <template>
-  <div />
+  <div class="grid place-items-center w-full min-h-screen">
+    <!-- <UKbd>K</UKbd> -->
+  </div>
 </template>

packages/nuxt-ui-vue/src/components/data/Table/UTable.vue

@@ -1,9 +1,10 @@
 <script lang='ts'>
 import { computed, defineComponent, ref, toRaw } from 'vue'
 import type { PropType } from 'vue'
-import { capitalize, get, omit, orderBy } from 'lodash-es'
+import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { twMerge } from 'tailwind-merge'
+import { get, omit } from '../../../utils/lodash'
 import UButton from '../../elements/Button/UButton.vue'
 import UIcon from '../../elements/Icon/UIcon.vue'
 import UCheckbox from '../../forms/Checkbox/UCheckbox.vue'
@@ -95,7 +96,7 @@ export default defineComponent({
 
     const wrapperClass = computed(() => twMerge(variant.value.root, 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' }))
 
@@ -105,7 +106,18 @@ 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({

packages/nuxt-ui-vue/src/components/elements/Accordion/UAccordion.vue

@@ -1,9 +1,9 @@
 <script setup lang='ts'>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
 import classNames from 'classnames'
+import { omit } from '../../../utils/lodash'
 import UButton from '../Button/UButton.vue'
 import UIcon from '../Icon/UIcon.vue'
 import type { AccordionItem } from '@/Types/components/accordionItem'
@@ -15,6 +15,10 @@ import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import stateEmitter from '@/utils/stateEmitter'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UAccordion,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UAccordion>(),
   items: {
@@ -98,12 +102,6 @@ const transitions = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UAccordion,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">

packages/nuxt-ui-vue/src/components/elements/Alert/UAlert.vue

@@ -1,8 +1,9 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import classNames from 'classnames'
 import UIcon from '../Icon/UIcon.vue'
+import { omit } from '../../../utils/lodash'
 import UAvatar from '../Avatar/UAvatar.vue'
 import UButton from '../Button/UButton.vue'
 import type { UAlert } from '@/Types/componentsTypes/components'
@@ -14,6 +15,11 @@ import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UAlert,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UAlert>(),
   title: {
@@ -60,6 +66,10 @@ const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
+const attrs = useAttrs()
+
+const attrsOmitted = omit(attrs, ['class'])
+
 const variant = computed(() => {
   const customProps = {
     ...props,
@@ -94,15 +104,8 @@ function handleClose() {
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UAlert,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
-  <div :class="alertClass">
+  <div :class="alertClass" v-bind="attrsOmitted">
     <div
       class="flex gap-3"
       :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }"

packages/nuxt-ui-vue/src/components/elements/Avatar/UAvatar.vue

@@ -1,9 +1,9 @@
 <script setup lang='ts'>
 import type { PropType } from 'vue'
-import { omit } from 'lodash-es'
-import { computed, defineComponent, ref, useAttrs, watch } from 'vue'
+import { computed, ref, useAttrs, watch } from 'vue'
 import classNames from 'classnames'
 import { Icon } from '@iconify/vue'
+import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '../../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../../utils/getVariantProps'
 import type { UAvatar } from '../../../Types/componentsTypes/components'
@@ -14,6 +14,11 @@ import { Positions } from '@/Types/enums/Positions'
 
 export type AvatarSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 export type AvatarChipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+
+defineOptions({
+  name: Components.UAvatar,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UAvatar>(),
   name: {
@@ -149,12 +154,6 @@ const attrs = useAttrs()
 const attrsOmitted = omit(attrs, ['class'])
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UAvatar,
-})
-</script>
-
 <template>
   <span :class="[avatarWrapperClasses, avatarClasses]" :title="props.name">
     <img v-if="url && !error" v-bind="attrsOmitted" :class="avatarClasses" :src="url" :alt="props.name" @error="onError">

packages/nuxt-ui-vue/src/components/elements/Badge/UBadge.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import classNames from 'classnames'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
@@ -8,6 +8,11 @@ import type { UBadge } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
 
+defineOptions({
+  name: Components.UBadge,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UBadge>(),
   size: {
@@ -61,13 +66,6 @@ const badgeClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UBadge,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <span :class="badgeClass">
     <slot>{{ label }}</slot>

packages/nuxt-ui-vue/src/components/elements/Button/UButton.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useAttrs, useSlots } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import classNames from 'classnames'
 import type { RouteLocationRaw } from 'vue-router'
@@ -11,6 +11,11 @@ import UIcon from '../../elements/Icon/UIcon.vue'
 import { useVariants } from '../../../composables/useVariants'
 import nuxtLabsTheme from '../../../theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UButton,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UButton>(),
 
@@ -167,13 +172,6 @@ const buttonClass = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UButton,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <component :is="props.to ? 'a' : 'button'" :class="buttonClass" :aria-label="ariaLabel" v-bind="bind">
     <slot name="leading" :disabled="disabled" :loading="loading">

packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { getVariantPropsWithClassesList } from '../../../utils/getVariantProps'
 import type { UButtonGroup } from '../../../Types/componentsTypes/components'
 import { Components } from '../../../Types/enums/Components'
 import { useVariants } from '../../../composables/useVariants'
 
+defineOptions({
+  name: Components.UButtonGroup,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UButtonGroup>(),
   orientation: {
@@ -26,13 +31,6 @@ const variant = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UButtonGroup,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <div :class="variant.root">
     <slot />

packages/nuxt-ui-vue/src/components/elements/Dropdown/UDropdown.vue

@@ -1,9 +1,9 @@
 <script setup lang='ts'>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItem as HMenuItem, MenuItems as HMenuItems } from '@headlessui/vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import { omit } from 'lodash-es'
+import { omit } from '../../../utils/lodash'
 import ULink from '../Link/ULink.vue'
 import UIcon from '../Icon/UIcon.vue'
 import UAvatar from '../Avatar/UAvatar.vue'
@@ -18,6 +18,11 @@ import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UDropdown,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UDropdown>(),
   items: {
@@ -128,13 +133,6 @@ function onMouseLeave() {
 }
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UDropdown,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <HMenu v-slot="{ open }" as="div" :class="variant.root" @mouseleave="onMouseLeave">
     <HMenuButton

packages/nuxt-ui-vue/src/components/elements/Icon/UIcon.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { Icon, loadIcon } from '@iconify/vue'
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Components } from '../../../Types/enums/Components'
 import type { UIcon } from '../../../Types/componentsTypes/components'
 import { getVariantPropsWithClassesList } from '../../../utils/getVariantProps'
 import { useVariants } from '../../../composables/useVariants'
 
-export type IconSizes = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '6xl' | '8xl'
-export type IconNumberSize = number
-export interface Props {
-  name: string
-  size?: IconNumberSize | IconSizes
-}
+defineOptions({
+  name: Components.UIcon,
+})
 const props = defineProps({
   ...getVariantPropsWithClassesList<UIcon>(),
   size: {
@@ -56,12 +53,6 @@ const ariaProps = {
 fetchIcon()
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UIcon,
-})
-</script>
-
 <template>
   <span v-if="isFetching" :style="styleClass" :class="variant.root" v-bind="ariaProps" />
   <Icon v-else-if="icon" :class="iconClass" :style="styleClass" :icon="icon" v-bind="ariaProps" />

packages/nuxt-ui-vue/src/components/elements/Kbd/UKbd.vue

@@ -1,12 +1,17 @@
 <script setup lang='ts'>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { useVariants } from '@/composables/useVariants'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { Components } from '@/Types/enums/Components'
 import type { UKbd } from '@/Types/componentsTypes/components'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
+defineOptions({
+  name: Components.UKbd,
+  inheritAttrs: false,
+})
+
 const props = defineProps({
   ...getVariantPropsWithClassesList<UKbd>(),
   value: {
@@ -35,13 +40,6 @@ const variant = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: Components.UKbd,
-  inheritAttrs: false,
-})
-</script>
-
 <template>
   <kbd :class="[variant.root, nuxtLabsTheme.UKbd.base.size[size], variant.padding, variant.rounded, variant.font, variant.background, variant.ring]">
     <slot>{{ value }}</slot>