Merge pull request #85 from selemondev/fix-icon

fix: import paths

Author: selemondev

packages/nuxtlabs-ui-vue/README.md

@@ -145,20 +145,21 @@ app.mount('#app')
 
 2. Now you can use the component as shown below:
 
-```js
+```vue
 <script setup lang="ts">
 const items = [
   [{
     label: 'Profile',
     avatar: {
       src: 'https://avatars.githubusercontent.com/u/739984?v=4'
     }
-  }], 
+  }],
   [{
     label: 'Edit',
     icon: 'heroicons:pencil-square-20-solid',
     shortcuts: ['E'],
     click: () => {
+      // eslint-disable-next-line no-console
       console.log('Edit')
     }
   }, {
@@ -259,7 +260,7 @@ export default defineConfig({
 
 4. Now you can simply use any component that you want and it will be auto imported on demand ✨
 
-```js
+```vue
 <script setup lang='ts'>
 const items = [
   [{
@@ -272,6 +273,7 @@ const items = [
     icon: 'heroicons:pencil-square-20-solid',
     shortcuts: ['E'],
     click: () => {
+      // eslint-disable-next-line no-console
       console.log('Edit')
     }
   }, {
@@ -325,15 +327,17 @@ In regards to customization, NuxtLabs UI Vue offers two ways of customizing your
 
 Here is an example of customizing a `UButton` component through the `variants` property: 
 
-```js
+```vue
 <template>
-    <div>
-        <UButton :variants="{
-          'my-variant': {
-            rounded: 'rounded-full'
-          }
-        }" :variant="['my-variant']" color="red" label="Button" />
-    </div>
+  <div>
+    <UButton
+      :variants="{
+        'my-variant': {
+          rounded: 'rounded-full',
+        },
+      }" :variant="['my-variant']" color="red" label="Button"
+    />
+  </div>
 </template>
 ```
 

packages/nuxtlabs-ui-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxtlabs-ui-vue",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "exports": {
     ".": {

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

@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import { computed, defineComponent, 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'

packages/nuxtlabs-ui-vue/src/components/forms/Toggle/UToggle.vue

@@ -3,6 +3,7 @@ import { computed, defineComponent, useAttrs } from 'vue'
 import { omit } from 'lodash-es'
 import classNames from 'classnames'
 import { Switch as HSwitch } from '@headlessui/vue'
+import UIcon from '../../elements/Icon/UIcon.vue'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UToggle } from '@/Types/componentsTypes/components'

packages/nuxtlabs-ui-vue/src/components/navigation/Command-Palette/CommandPaletteGroup.vue

@@ -3,6 +3,8 @@ import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { ComboboxOption as HComboboxOption } from '@headlessui/vue'
 import UIcon from '../../elements/Icon/UIcon.vue'
+import UKbd from '@/components/elements/Kbd/UKbd.vue'
+import UAvatar from '@/components/elements/Avatar/UAvatar.vue'
 import type { VariantJSWithClassesListProps } from '@/utils/getVariantProps'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
@@ -35,7 +37,6 @@ const props = defineProps({
 const variant = computed(() => {
   const customProps = {
     ...props,
-    variant: props.variant,
   }
   return useVariants<UCommandPalette>(
     Components.UCommandPalette,

packages/nuxtlabs-ui-vue/src/components/navigation/VerticalNavigation/UVerticalNavigation.vue

@@ -8,6 +8,9 @@ import { getVariantPropsWithClassesList } from '@/utils/getVariantProps'
 import type { UVerticalNavigation } from '@/Types/componentsTypes/components'
 import { Components } from '@/Types/enums/Components'
 import { useVariants } from '@/composables/useVariants'
+import UAvatar from '@/components/elements/Avatar/UAvatar.vue'
+import ULink from '@/components/elements/Link/ULink.vue'
+import UIcon from '@/components/elements/Icon/UIcon.vue'
 import type { VerticalNavigationLink } from '@/Types/components/vertical-navigation'
 
 const props = defineProps({