Merge pull request #76 from selemondev/feat/auto-imports

feat(app): auto imports
selemondev · Aug 15, 2023 · 3ecc8b4 · 3ecc8b4
2 parents 5b57fd5 + 2fd26ea
commit 3ecc8b4
Show file tree

Hide file tree

Showing 28 changed files with 260 additions and 492 deletions.
diff --git a/package.json b/package.json
@@ -21,9 +21,6 @@
     "@antfu/eslint-config": "^0.39.8",
     "@types/node": "^20.4.9",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-c8": "^0.33.0",
-    "@vitest/coverage-v8": "^0.33.0",
-    "@vitest/ui": "^0.33.0",
     "@vue/test-utils": "^2.4.1",
     "bumpp": "^9.1.1",
     "eslint": "8.46.0",

diff --git a/packages/nuxtlabs-ui-vue/package.json b/packages/nuxtlabs-ui-vue/package.json
@@ -2,6 +2,21 @@
   "name": "nuxtlabs-ui-vue",
   "version": "0.0.0",
   "private": true,
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "require": "./dist/nuxtlabs-ui-vue.cjs",
+      "import": "./dist/nuxtlabs-ui-vue.mjs"
+    },
+    "./dist/theme/nuxtlabsTheme": "./dist/theme/nuxtlabsTheme"
+  },
+  "main": "./dist/nuxtlabs-ui-vue.cjs",
+  "module": "./dist/nuxtlabs-ui-vue.mjs",
+  "types": "./dist/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "vite build && pnpm run build:theme",
     "build:watch": "vite build --watch",
@@ -13,6 +28,9 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
+  "peerDependencies": {
+    "vue": "^3.3.4"
+  },
   "dependencies": {
     "@headlessui/vue": "^1.7.15",
     "@popperjs/core": "^2.11.8",

diff --git a/packages/nuxtlabs-ui-vue/src/App.vue b/packages/nuxtlabs-ui-vue/src/App.vue
@@ -1,50 +1,26 @@
-<script setup lang="ts">
+<script setup lang='ts'>
 import { ref } from 'vue'
 
-const people = [{
-  id: 'benjamincanac',
-  label: 'benjamincanac',
-  href: 'https://github.com/benjamincanac',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
-},
-{
-  id: 'Atinux',
-  label: 'Atinux',
-  href: 'https://github.com/Atinux',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' },
-},
-{
-  id: 'smarroufin',
-  label: 'smarroufin',
-  href: 'https://github.com/smarroufin',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' },
-},
-{
-  id: 'nobody',
-  label: 'Nobody',
-  icon: 'heroicons:user-circle',
-}]
-
-const selected = ref(people[0])
+const isOpen = ref(false)
 </script>
 
 <template>
-  {{ selected }}
   <div class="grid place-items-center w-full min-h-screen">
-    <div class="">
-      <USelectMenu
-        v-model="selected" :options="people"
+    <UButton label="Open" @click="isOpen = true" />
+    <USlideover v-model="isOpen" prevent-close>
+      <UCard
+        class="flex flex-col flex-1"
+        :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
       >
-        <template #label>
-          <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4" />
-          <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" />
-
-          {{ selected.label }}
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Slideover
+            </h3>
+            <UButton intent="ghost" icon="heroicons:x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
         </template>
-      </USelectMenu>
-    </div>
+      </UCard>
+    </USlideover>
   </div>
 </template>
diff --git a/packages/nuxtlabs-ui-vue/src/Types/componentsTypes/components.ts b/packages/nuxtlabs-ui-vue/src/Types/componentsTypes/components.ts
@@ -73,7 +73,7 @@ export interface UAccordion extends UComponentRoot {
   itemPadding?: string
   itemIcon?: string
   transition?: objectProp
-  default: DefaultStyle
+  default?: DefaultStyle
 }
 
 export interface UAlert extends UComponentRoot {
@@ -86,7 +86,8 @@ export interface UAlert extends UComponentRoot {
   avatarBase?: string
   avatarSize?: string
   color?: string
-  variant?: string
+  intent?: string
+  default?: objectProp
 }
 
 export interface UAvatar extends UComponentRoot {
@@ -201,7 +202,7 @@ export interface UContextMenu extends UComponentRoot {
   shadow?: string
   rounded?: string
   ring?: string
-  base?: string
+  contextMenuBase?: string
   enterActiveClass?: string
   enterFromClass?: string
   enterToClass?: string
@@ -215,7 +216,7 @@ export interface UContextMenu extends UComponentRoot {
 }
 
 export interface UCheckbox extends UComponentRoot {
-  base?: string
+  checkboxBase?: string
   rounded?: string
   color?: string
   background?: string
@@ -247,22 +248,22 @@ export interface UDropdown extends UComponentRoot {
   shadow?: string
   rounded?: string
   ring?: string
-  base?: string
+  dropdownBase?: string
   divide?: string
   padding?: string
-  itemBase: string
-  itemRounded: string
-  itemPadding: string
-  itemSize: string
-  itemActive: string
-  itemInActive: string
-  itemDisabled: string
-  itemIconBase: string
-  itemIconActive: string
-  itemIconInActive: string
-  itemAvatarBase: string
-  itemAvatarSize: string
-  itemShortcuts: string
+  itemBase?: string
+  itemRounded?: string
+  itemPadding?: string
+  itemSize?: string
+  itemActive?: string
+  itemInActive?: string
+  itemDisabled?: string
+  itemIconBase?: string
+  itemIconActive?: string
+  itemIconInActive?: string
+  itemAvatarBase?: string
+  itemAvatarSize?: string
+  itemShortcuts?: string
   transition?: objectProp
   popper?: objectProp
 }
@@ -272,7 +273,7 @@ export interface UIcon extends UComponentRoot {
 }
 
 export interface UInput extends UComponentRoot {
-  base?: string
+  inputBase?: string
   rounded?: string
   placeholder?: string
   size?: objectProp
@@ -299,7 +300,7 @@ export interface UModal extends UComponentRoot {
   container?: string
   padding?: string
   margin?: string
-  base?: string
+  modalBase?: string
   overlayBase?: string
   overlayBackground?: string
   overlayEnterTransition?: string
@@ -347,7 +348,7 @@ export interface UNotification extends UComponentRoot {
 }
 
 export interface UPagination extends UComponentRoot {
-  base?: string
+  paginationBase?: string
   rounded?: string
   defaultSize?: string
   defaultActiveButtonColor?: string
@@ -378,19 +379,19 @@ export interface UPopover extends UComponentRoot {
 }
 
 export interface URadio extends UComponentRoot {
-  base?: string
+  radioBase?: string
   color?: string
   background?: string
   border?: string
   ring?: string
   label?: string
   required?: string
   help?: string
-  default: objectProp
+  default?: objectProp
 }
 
 export interface URange extends UComponentRoot {
-  base?: string
+  rangeBase?: string
   rounded?: string
   background?: string
   ring?: string
@@ -405,7 +406,7 @@ export interface URange extends UComponentRoot {
 }
 
 export interface USelect extends UComponentRoot {
-  base?: string
+  selectBase?: string
   rounded?: string
   placeholder?: string
   size?: objectProp
@@ -424,7 +425,7 @@ export interface USelectMenu extends UComponentRoot {
   container?: string
   width?: string
   height?: string
-  base?: string
+  selectMenuBase?: string
   background?: string
   shadow?: string
   rounded?: string
@@ -471,7 +472,7 @@ export interface USlideover extends UComponentRoot {
   overlayLeaveTransition?: string
   overlayLeaveFrom?: string
   overlayLeaveTo?: string
-  base?: string
+  slideOverBase?: string
   background?: string
   ring?: string
   rounded?: string
@@ -511,7 +512,7 @@ export interface UTable extends UComponentRoot {
 
 export interface UTabs extends UComponentRoot {
   container?: string
-  base?: string
+  tabsBase?: string
   listBase?: string
   listBackground?: string
   listRounded?: string
@@ -537,7 +538,7 @@ export interface UTabs extends UComponentRoot {
 }
 
 export interface UTextarea extends UComponentRoot {
-  base?: string
+  textAreaBase?: string
   rounded?: string
   placeholder?: string
   size?: objectProp
@@ -579,7 +580,7 @@ export interface UTooltip extends UComponentRoot {
   shadow?: string
   rounded?: string
   ring?: string
-  base?: string
+  toolTipBase?: string
   shortcuts?: string
   transitionEnterActiveClass?: string
   transitionEnterFromClass?: string
@@ -593,7 +594,7 @@ export interface UTooltip extends UComponentRoot {
 }
 
 export interface UVerticalNavigation extends UComponentRoot {
-  base?: string
+  verticalNavigationBase?: string
   ring?: string
   padding?: string
   width?: string

diff --git a/packages/nuxtlabs-ui-vue/src/componentResolver.ts b/packages/nuxtlabs-ui-vue/src/componentResolver.ts
@@ -0,0 +1,11 @@
+import type { ComponentResolver } from 'unplugin-vue-components'
+
+export function NuxtLabsUIComponentResolver(): ComponentResolver {
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      if (name.match(/^U[A-Z]/))
+        return { name, from: 'nuxtlabs-ui-vue' }
+    },
+  }
+}
diff --git a/packages/nuxtlabs-ui-vue/src/components/elements/Dropdown/UDropdown.vue b/packages/nuxtlabs-ui-vue/src/components/elements/Dropdown/UDropdown.vue
@@ -154,7 +154,7 @@ export default defineComponent({
 
     <div v-if="open && props.items" ref="container" :class="[variant.container, variant.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="nuxtLabsTheme.UDropdown.base.transition">
-        <HMenuItems :class="[variant.base, variant.divide, variant.ring, variant.rounded, variant.shadow, variant.background, variant.height]" static>
+        <HMenuItems :class="[variant.dropdownBase, variant.divide, variant.ring, variant.rounded, variant.shadow, variant.background, variant.height]" static>
           <div v-for="(subItems, index) of props.items" :key="index" :class="variant.padding">
             <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
               <ULink

diff --git a/packages/nuxtlabs-ui-vue/src/components/forms/Checkbox/UCheckbox.vue b/packages/nuxtlabs-ui-vue/src/components/forms/Checkbox/UCheckbox.vue
@@ -85,7 +85,7 @@ function onChange(event: Event) {
 
 const inputClass = computed(() => {
   return classNames(
-    variant.value.base,
+    variant.value.checkboxBase,
     variant.value.rounded,
     variant.value.background,
     variant.value.border,
@@ -121,7 +121,7 @@ export default defineComponent({
         @change="onChange"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 text-sm">
+    <div v-if="label || $slots.label" :class="variant.checkBoxSpace">
       <label :for="name" :class="variant.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="variant.required">*</span>

diff --git a/packages/nuxtlabs-ui-vue/src/components/forms/Input/UInput.vue b/packages/nuxtlabs-ui-vue/src/components/forms/Input/UInput.vue
@@ -155,7 +155,7 @@ const trailingIconName = computed(() => {
 const inputClass = computed(() => {
   const variants = nuxtLabsTheme.UInput.base.color[props.color as string]?.[props.intent as string] || nuxtLabsTheme.UInput.base.intent[props.intent]
   return classNames(
-    variant.value.base,
+    variant.value.inputBase,
     variant.value.rounded,
     variant.value.placeholder,
     nuxtLabsTheme.UInput.base.size[props.size],

diff --git a/packages/nuxtlabs-ui-vue/src/components/forms/Radio/URadio.vue b/packages/nuxtlabs-ui-vue/src/components/forms/Radio/URadio.vue
@@ -76,7 +76,7 @@ const pick = computed({
 
 const inputClass = computed(() => {
   return classNames(
-    variant.value.base,
+    variant.value.radioBase,
     variant.value.background,
     variant.value.border,
     nuxtLabsTheme.URadio.base.ring.replaceAll('{color}', props.color),

diff --git a/packages/nuxtlabs-ui-vue/src/components/forms/Range/URange.vue b/packages/nuxtlabs-ui-vue/src/components/forms/Range/URange.vue
@@ -86,7 +86,7 @@ const wrapperClass = computed(() => {
 
 const inputClass = computed(() => {
   return classNames(
-    variant.value.base,
+    variant.value.rangeBase,
     variant.value.background,
     variant.value.rounded,
     nuxtLabsTheme.URange.base.ring.replaceAll('{color}', props.color),

diff --git a/packages/nuxtlabs-ui-vue/src/components/forms/Select/USelect.vue b/packages/nuxtlabs-ui-vue/src/components/forms/Select/USelect.vue
@@ -201,7 +201,7 @@ const selectClass = computed(() => {
   const variants = nuxtLabsTheme.USelect.base.color[props.color as string]?.[props.intent as string] || nuxtLabsTheme.USelect.base.intent[props.intent]
 
   return classNames(
-    variant.value.base,
+    variant.value.selectBase,
     variant.value.rounded,
     nuxtLabsTheme.USelect.base.size[props.size],
     props.padded ? nuxtLabsTheme.USelect.base.padding[props.size] : 'p-0',

diff --git a/packages/nuxtlabs-ui-vue/src/components/forms/SelectMenu/USelectMenu.vue b/packages/nuxtlabs-ui-vue/src/components/forms/SelectMenu/USelectMenu.vue
@@ -205,7 +205,7 @@ export default defineComponent({
       const variants = nuxtLabsTheme.USelect.base.color[props.color as string]?.[props.intent as string] || nuxtLabsTheme.USelect.base.intent[props.intent]
 
       return classNames(
-        nuxtLabsTheme.USelect.base.base,
+        nuxtLabsTheme.USelect.base.selectBase,
         nuxtLabsTheme.USelect.base.rounded,
         'text-left cursor-default',
         nuxtLabsTheme.USelect.base.size[props.size],
@@ -373,7 +373,7 @@ export default defineComponent({
     <div v-if="open" ref="container" :class="[variant.container, variant.width]">
       <Transition appear v-bind="nuxtLabsTheme.USelectMenu.base.transition">
         <!-- @vue-ignore -->
-        <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[variant.base, nuxtLabsTheme.USelect.base.divide, variant.ring, variant.rounded, variant.shadow, variant.background, variant.padding, variant.height]">
+        <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[variant.selectMenuBase, nuxtLabsTheme.USelect.base.divide, variant.ring, variant.rounded, variant.shadow, variant.background, variant.padding, variant.height]">
           <HComboboxInput
             v-if="searchable"
             ref="searchInput"

diff --git a/packages/nuxtlabs-ui-vue/src/components/forms/Textarea/UTextarea.vue b/packages/nuxtlabs-ui-vue/src/components/forms/Textarea/UTextarea.vue
@@ -147,7 +147,7 @@ const textareaClass = computed(() => {
   const variants = nuxtLabsTheme.UTextarea.base.color[props.color as string]?.[props.intent as string] || nuxtLabsTheme.UTextarea.base.intent[props.intent]
 
   return classNames(
-    variant.value.base,
+    variant.value.textAreaBase,
     variant.value.rounded,
     variant.value.placeholder,
     nuxtLabsTheme.UTextarea.base.size[props.size],