Merge pull request #158 from selemondev/refactor-app

refactor(app): refactor app

package.json

@@ -30,6 +30,7 @@
     "simple-git-hooks": "^2.9.0",
     "taze": "^0.11.2",
     "typescript": "^5.1.6",
+    "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.1",

packages/nuxt-ui-vue/components.d.ts

@@ -0,0 +1,50 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CommandPalette: typeof import('./src/components/navigation/Command-Palette/CommandPalette.vue')['default']
+    CommandPaletteGroup: typeof import('./src/components/navigation/Command-Palette/CommandPaletteGroup.vue')['default']
+    RouteLocationRaw: typeof import('vue-router')['RouteLocationRaw']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    UAccordion: typeof import('./src/components/elements/Accordion/UAccordion.vue')['default']
+    UAlert: typeof import('./src/components/elements/Alert/UAlert.vue')['default']
+    UAvatar: typeof import('./src/components/elements/Avatar/UAvatar.vue')['default']
+    UAvatarGroup: typeof import('./src/components/elements/Avatar/UAvatarGroup.vue')['default']
+    UBadge: typeof import('./src/components/elements/Badge/UBadge.vue')['default']
+    UButton: typeof import('./src/components/elements/Button/UButton.vue')['default']
+    UButtonGroup: typeof import('./src/components/elements/Button/UButtonGroup.vue')['default']
+    UCard: typeof import('./src/components/layouts/Card/UCard.vue')['default']
+    UCheckbox: typeof import('./src/components/forms/Checkbox/UCheckbox.vue')['default']
+    UContainer: typeof import('./src/components/layouts/Container/UContainer.vue')['default']
+    UContextMenu: typeof import('./src/components/overlays/ContextMenu/UContextMenu.vue')['default']
+    UDropdown: typeof import('./src/components/elements/Dropdown/UDropdown.vue')['default']
+    UFormGroup: typeof import('./src/components/forms/FormGroup/UFormGroup.vue')['default']
+    UIcon: typeof import('./src/components/elements/Icon/UIcon.vue')['default']
+    UInput: typeof import('./src/components/forms/Input/UInput.vue')['default']
+    UKbd: typeof import('./src/components/elements/Kbd/UKbd.vue')['default']
+    ULink: typeof import('./src/components/elements/Link/ULink.vue')['default']
+    UModal: typeof import('./src/components/overlays/Modal/UModal.vue')['default']
+    UNotification: typeof import('./src/components/overlays/Notification/UNotification.vue')['default']
+    UNotifications: typeof import('./src/components/overlays/Notification/UNotifications.vue')['default']
+    UPagination: typeof import('./src/components/navigation/Pagination/UPagination.vue')['default']
+    UPopover: typeof import('./src/components/overlays/Popover/UPopover.vue')['default']
+    URadio: typeof import('./src/components/forms/Radio/URadio.vue')['default']
+    URange: typeof import('./src/components/forms/Range/URange.vue')['default']
+    USelect: typeof import('./src/components/forms/Select/USelect.vue')['default']
+    USelectMenu: typeof import('./src/components/forms/SelectMenu/USelectMenu.vue')['default']
+    USkeleton: typeof import('./src/components/layouts/Skeleton/USkeleton.vue')['default']
+    USlideover: typeof import('./src/components/overlays/Slideover/USlideover.vue')['default']
+    UTable: typeof import('./src/components/data/Table/UTable.vue')['default']
+    UTabs: typeof import('./src/components/navigation/Tabs/UTabs.vue')['default']
+    UTextarea: typeof import('./src/components/forms/Textarea/UTextarea.vue')['default']
+    UToggle: typeof import('./src/components/forms/Toggle/UToggle.vue')['default']
+    UTooltip: typeof import('./src/components/overlays/Tooltip/UTooltip.vue')['default']
+    UVerticalNavigation: typeof import('./src/components/navigation/VerticalNavigation/UVerticalNavigation.vue')['default']
+  }
+}

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

@@ -1,3 +1,7 @@
+<script setup lang='ts'>
+
+</script>
+
 <template>
   <div />
 </template>

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

@@ -1,18 +1,11 @@
 <script lang='ts'>
-import { computed, defineComponent, ref, toRaw } from 'vue'
-import type { PropType } from 'vue'
 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'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UTable } from '@/Types/componentsTypes/components'
-import { Components } from '@/Types/enums/Components'
-import { useVariants } from '@/composables/useVariants'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 import type { Button } from '@/Types/components/button'
 

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

@@ -1,19 +1,11 @@
 <script setup lang='ts'>
-import { computed, ref } from 'vue'
-import type { PropType } from 'vue'
 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 { omit } from '@/utils/lodash'
 import type { AccordionItem } from '@/Types/components/accordionItem'
 import type { UAccordion } from '@/Types/componentsTypes/components'
-import { Components } from '@/Types/enums/Components'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
-import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
+import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import stateEmitter from '@/utils/stateEmitter'
-import { useVariants } from '@/composables/useVariants'
 
 defineOptions({
   name: Components.UAccordion,

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

@@ -1,19 +1,9 @@
 <script setup lang='ts'>
-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'
-import { Components } from '@/Types/enums/Components'
 import type { Avatar } from '@/Types/components/avatar'
 import type { Button } from '@/Types/components/button'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
-import { useVariants } from '@/composables/useVariants'
 
 defineOptions({
   name: Components.UAlert,
@@ -114,7 +104,7 @@ function handleClose() {
 
       <UAvatar v-if="avatar" v-bind="{ size: variant.avatarSize, ...avatar }" :class="variant.avatarBase" />
 
-      <div class="w-0 flex-1">
+      <div class="flex-1 w-0">
         <p :class="nuxtLabsTheme.UAlert.base.title">
           <slot name="title" :title="title">
             {{ title }}
@@ -126,14 +116,14 @@ function handleClose() {
           </slot>
         </p>
 
-        <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
+        <div v-if="(description || $slots.description) && actions.length" class="flex items-center gap-2 mt-3">
           <UButton
             v-for="(action, index) of actions" :key="index"
             v-bind="{ ...nuxtLabsTheme.UAlert.base.default.actionButton, ...action }" @click.stop="action.click"
           />
         </div>
       </div>
-      <div class="flex-shrink-0 flex items-center gap-3">
+      <div class="flex items-center flex-shrink-0 gap-3">
         <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
           <UButton
             v-for="(action, index) of actions" :key="index"

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

@@ -1,16 +1,6 @@
 <script setup lang='ts'>
-import type { PropType } 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'
-import { Components } from '../../../Types/enums/Components'
-import { useVariants } from '../../../composables/useVariants'
-import nuxtLabsTheme from '../../../theme/nuxtLabsTheme'
-import { Positions } from '@/Types/enums/Positions'
+import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
+import type { UAvatar } from '@/Types/componentsTypes/components'
 
 export type AvatarSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 export type AvatarChipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

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

@@ -1,13 +1,8 @@
 <script lang="ts">
-import { cloneVNode, computed, defineComponent, h } from 'vue'
-import type { PropType, VNode } from 'vue'
-import classNames from 'classnames'
-import nuxtLabsTheme from '../../../theme/nuxtLabsTheme'
+import { cloneVNode } from 'vue'
 import { getSlotsFromChildren } from './Types'
 import UAvatar from './UAvatar.vue'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UAvatarGroup } from '@/Types/componentsTypes/components'
-import { Components } from '@/Types/enums/Components'
 
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 

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

@@ -1,12 +1,6 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
-import classNames from 'classnames'
-import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import type { UBadge } from '@/Types/componentsTypes/components'
-import { Components } from '@/Types/enums/Components'
-import { useVariants } from '@/composables/useVariants'
 
 defineOptions({
   name: Components.UBadge,

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

@@ -1,15 +1,6 @@
 <script setup lang='ts'>
-import { computed, useAttrs, useSlots } from 'vue'
-import type { PropType } from 'vue'
-import classNames from 'classnames'
-import type { RouteLocationRaw } from 'vue-router'
 import type { VariantJSWithClassesListProps } from '../../../utils/getVariantProps'
-import { getVariantPropsWithClassesList } from '../../../utils/getVariantProps'
 import type { UButton } from '../../../Types/componentsTypes/components'
-import { Components } from '../../../Types/enums/Components'
-import UIcon from '../../elements/Icon/UIcon.vue'
-import { useVariants } from '../../../composables/useVariants'
-import nuxtLabsTheme from '../../../theme/nuxtLabsTheme'
 
 defineOptions({
   name: Components.UButton,

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-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,

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

@@ -1,20 +1,9 @@
 <script setup lang='ts'>
-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 '../../../utils/lodash'
-import ULink from '../Link/ULink.vue'
-import UIcon from '../Icon/UIcon.vue'
-import UAvatar from '../Avatar/UAvatar.vue'
-import UKbd from '../Kbd/UKbd.vue'
-import { usePopper } from '@/composables/usePopper'
 import type { DropdownItem } from '@/Types/components/dropdown'
 import type { PopperOptions } from '@/Types/components/popper'
-import { Components } from '@/Types/enums/Components'
 import type { UDropdown } from '@/Types/componentsTypes/components'
-import { useVariants } from '@/composables/useVariants'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 

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

@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import { Icon, loadIcon } from '@iconify/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'
 
 defineOptions({
   name: Components.UIcon,

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

@@ -1,9 +1,5 @@
 <script setup lang='ts'>
-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'
 

packages/nuxt-ui-vue/src/components/elements/Link/ULink.vue

@@ -1,8 +1,4 @@
 <script setup lang='ts'>
-import { RouterLink } from 'vue-router'
-import { isEqual } from 'ohash'
-import { Components } from '@/Types/enums/Components'
-
 defineOptions({
   name: Components.ULink,
   inheritAttrs: false,

packages/nuxt-ui-vue/src/components/forms/Checkbox/UCheckbox.vue

@@ -1,13 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import classNames from 'classnames'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UCheckbox } from '@/Types/componentsTypes/components'
-import { Components } from '@/Types/enums/Components'
-import { useFormEvents } from '@/composables/useFormEvents'
-import { useVariants } from '@/composables/useVariants'
-import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
 defineOptions({
   name: Components.UCheckbox,

packages/nuxt-ui-vue/src/components/forms/FormGroup/UFormGroup.vue

@@ -1,15 +1,8 @@
 <script lang='ts'>
-import { computed, defineComponent, inject, provide } from 'vue'
-import type { Ref } from 'vue'
 import { twMerge } from 'tailwind-merge'
-import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UFormGroup } from '@/Types/componentsTypes/components'
 import type { FormError } from '@/Types/components/form'
-import { Components } from '@/Types/enums/Components'
-import { useVariants } from '@/composables/useVariants'
-import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
 export default defineComponent({
   name: Components.UFormGroup,

packages/nuxt-ui-vue/src/components/forms/Input/UInput.vue

@@ -1,14 +1,6 @@
 <script setup lang='ts'>
-import { computed, onMounted, ref, useSlots } from 'vue'
-import classNames from 'classnames'
-import UIcon from '../../elements/Icon/UIcon.vue'
-import { useFormEvents } from '@/composables/useFormEvents'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
-import { useVariants } from '@/composables/useVariants'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
-import { Components } from '@/Types/enums/Components'
 import type { UInput } from '@/Types/componentsTypes/components'
-import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
 defineOptions({
   name: Components.UInput,

packages/nuxt-ui-vue/src/components/forms/Radio/URadio.vue

@@ -1,13 +1,6 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
-import classNames from 'classnames'
 import type { URadio } from '@/Types/componentsTypes/components'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
-import { Components } from '@/Types/enums/Components'
-import { useVariants } from '@/composables/useVariants'
-import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
-import { useFormEvents } from '@/composables/useFormEvents'
 
 defineOptions({
   name: Components.URadio,
@@ -107,7 +100,7 @@ const inputClass = computed(() => {
         @change="onChange"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 text-sm">
+    <div v-if="label || $slots.label" class="text-sm ms-3">
       <label :for="`${name}-${value}`" :class="variant.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="variant.required">*</span>

packages/nuxt-ui-vue/src/components/forms/Range/URange.vue

@@ -1,14 +1,6 @@
 <script setup lang='ts'>
-import { computed, useAttrs } from 'vue'
-import classNames from 'classnames'
-import { omit } from '../../../utils/lodash'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { URange } from '@/Types/componentsTypes/components'
-import { Components } from '@/Types/enums/Components'
-import { useFormEvents } from '@/composables/useFormEvents'
-import { useVariants } from '@/composables/useVariants'
-import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
 defineOptions({
   name: Components.URange,

packages/nuxt-ui-vue/src/components/forms/Select/USelect.vue

@@ -1,15 +1,6 @@
 <script setup lang='ts'>
-import { computed, useAttrs, useSlots } from 'vue'
-import type { ComputedRef } from 'vue'
-import classNames from 'classnames'
-import { get, omit } from '../../../utils/lodash'
 import type { USelect } from '@/Types/componentsTypes/components'
-import { Components } from '@/Types/enums/Components'
-import { useFormEvents } from '@/composables/useFormEvents'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
-import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
-import { useVariants } from '@/composables/useVariants'
-import nuxtLabsTheme from '@/theme/nuxtLabsTheme'
 
 defineOptions({
   name: Components.USelect,