fix!: enforcing types on parent projects

Due to an issue with the `@` import helper the typescript declarations
were not honoured correctly. This revamp allows the correct definitions
to be consumed on parent projects and enforce typings correctly.

src/components/NeCombobox.vue

@@ -34,7 +34,6 @@ export interface NeComboboxOption {
 }
 
 export interface Props {
-  modelValue: string | Array<NeComboboxOption>
   options: NeComboboxOption[]
   label?: string
   placeholder?: string
@@ -44,20 +43,19 @@ export interface Props {
   maxOptionsShown?: number
   multiple?: boolean
   disabled?: boolean
-  showOptionsType: boolean
+  showOptionsType?: boolean
   optional?: boolean
-  selectedLabel: string
+  selectedLabel?: string
   showSelectedLabel?: boolean
   noResultsLabel: string
-  limitedOptionsLabel: string
+  limitedOptionsLabel?: string
   noOptionsLabel: string
   acceptUserInput?: boolean
-  userInputLabel: string
+  userInputLabel?: string
   optionalLabel: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  options: () => [],
   label: '',
   placeholder: '',
   helperText: '',
@@ -68,9 +66,14 @@ const props = withDefaults(defineProps<Props>(), {
   showOptionsType: true,
   optional: false,
   showSelectedLabel: true,
-  acceptUserInput: false
+  acceptUserInput: false,
+  selectedLabel: 'Selected',
+  limitedOptionsLabel: 'Continue typing to show more options',
+  userInputLabel: 'User input'
 })
 
+const model = defineModel<string | Array<NeComboboxOption>>()
+
 const emit = defineEmits(['update:modelValue'])
 
 // expose focus function
@@ -174,7 +177,7 @@ onMounted(() => {
 })
 
 watch(
-  () => props.modelValue,
+  () => model,
   () => {
     if (props.multiple) {
       selectMultipleOptionsFromModelValue()
@@ -255,14 +258,14 @@ function onOptionSelected(selectedOption: NeComboboxOption) {
 }
 
 function selectSingleOptionFromModelValue() {
-  const optionFound = allOptions.value.find((option) => option.id === props.modelValue)
+  const optionFound = allOptions.value.find((option) => option.id === model.value)
 
   if (optionFound) {
     selected.value = optionFound
-  } else if (props.acceptUserInput && props.modelValue) {
+  } else if (props.acceptUserInput && model.value) {
     const userInputOption = {
-      id: props.modelValue as string,
-      label: props.modelValue as string,
+      id: model.value as string,
+      label: model.value as string,
       description: props.userInputLabel
     }
     userInputOptions.value.push(userInputOption)
@@ -273,7 +276,7 @@ function selectSingleOptionFromModelValue() {
 function selectMultipleOptionsFromModelValue() {
   const selectedList: NeComboboxOption[] = []
 
-  for (const selectedOption of props.modelValue as NeComboboxOption[]) {
+  for (const selectedOption of model.value as NeComboboxOption[]) {
     const optionFound = allOptions.value.find((option) => option.id === selectedOption.id)
 
     if (optionFound) {

src/components/NeExpandable.vue

@@ -7,7 +7,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { onMounted, ref, watch } from 'vue'
-import { NeButton } from '@/main'
+import NeButton from './NeButton.vue'
 
 const props = defineProps({
   label: {

src/components/NeFileInput.vue

@@ -7,15 +7,15 @@
 import { computed } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faFileArrowUp } from '@fortawesome/free-solid-svg-icons'
-import NeProgressBar from '@/components/NeProgressBar.vue'
+import NeProgressBar from './NeProgressBar.vue'
 
 interface FileInputProps {
   modelValue?: File | File[] | null
   label?: string
-  invalidMessage: string
-  dropzoneLabel: string
-  progress: number
-  showProgress: boolean
+  invalidMessage?: string
+  dropzoneLabel?: string
+  progress?: number
+  showProgress?: boolean
   accept?: string | undefined
 }
 

src/components/NeModal.vue

@@ -12,7 +12,7 @@ import NeButton, { type ButtonKind } from './NeButton.vue'
 import NeRoundedIcon from './NeRoundedIcon.vue'
 import type { PropType } from 'vue'
 
-type ModalKind = 'neutral' | 'info' | 'warning' | 'error' | 'success'
+export type ModalKind = 'neutral' | 'info' | 'warning' | 'error' | 'success'
 type PrimaryButtonKind = 'primary' | 'danger'
 type ModalSize = 'md' | 'lg' | 'xl' | 'xxl'
 

src/components/NePaginator.vue

@@ -9,7 +9,7 @@ import { range } from 'lodash-es'
 import { faChevronLeft as fasChevronLeft } from '@fortawesome/free-solid-svg-icons'
 import { faChevronRight as fasChevronRight } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { NeListbox } from '@/main'
+import NeListbox from './NeListbox.vue'
 
 const props = defineProps({
   currentPage: {

src/components/NeRadioSelection.vue

@@ -3,24 +3,26 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
-<script lang="ts" setup>
-import { computed, type PropType, type Ref, ref, watch } from 'vue'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleCheck } from '@fortawesome/free-solid-svg-icons'
-import NeFormItemLabel from '@/components/NeFormItemLabel.vue'
-import { v4 as uuidv4 } from 'uuid'
-
-export type RadioCardSize = 'md' | 'lg' | 'xl'
-
-type RadioOption = {
+<script lang="ts">
+export type RadioOption = {
   id: string
   label: string
   description?: string
   icon?: string
   iconStyle?: string
   disabled?: boolean
 }
+</script>
+
+<script generic="T extends RadioOption" lang="ts" setup>
+import { computed, type PropType, type Ref, ref, watch } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons'
+import NeFormItemLabel from './NeFormItemLabel.vue'
+import { v4 as uuidv4 } from 'uuid'
+
+export type RadioCardSize = 'md' | 'lg' | 'xl'
 
 const props = defineProps({
   modelValue: {
@@ -42,7 +44,7 @@ const props = defineProps({
   },
   options: {
     required: true,
-    type: Array<RadioOption>
+    type: Array<T>
   },
   card: {
     type: Boolean,

src/composables/useItemPagination.ts

@@ -27,7 +27,7 @@ export function useItemPagination<T>(
     onPageChange: settings.onPageChange
   })
 
-  const paginatedItems = computed(() => {
+  const paginatedItems = computed((): T[] => {
     const start = (currentPage.value - 1) * toValue(settings.itemsPerPage)
     const end = start + toValue(settings.itemsPerPage)
     const itemsArray = toValue(items)

src/composables/useSort.ts

@@ -4,10 +4,7 @@ export function useSort<T>(
   items: MaybeRefOrGetter<T[]>,
   sortKey: MaybeRefOrGetter<keyof T>,
   descending: MaybeRefOrGetter<boolean> = false,
-  sortFunctions: Record<keyof T, (a: T, b: T) => number> = {} as Record<
-    keyof T,
-    (a: T, b: T) => number
-  >
+  sortFunctions: Partial<Record<keyof T, (a: T, b: T) => number>>
 ) {
   const sortedItems = ref<T[]>([])
 

src/main.ts

@@ -1,51 +1,53 @@
 // style export
-import '@/main.css'
+import './main.css'
 
 // components export
-export { default as NeSkeleton } from '@/components/NeSkeleton.vue'
-export { default as NeSpinner } from '@/components/NeSpinner.vue'
-export { default as NeExpandable } from '@/components/NeExpandable.vue'
-export { default as NeProgressBar } from '@/components/NeProgressBar.vue'
-export { default as NeFileInput } from '@/components/NeFileInput.vue'
-export { default as NeInlineNotification } from '@/components/NeInlineNotification.vue'
-export { default as NeRoundedIcon } from '@/components/NeRoundedIcon.vue'
-export { default as NeSideDrawer } from '@/components/NeSideDrawer.vue'
-export { default as NeTooltip } from '@/components/NeTooltip.vue'
-export { default as NeBadge } from '@/components/NeBadge.vue'
-export { default as NeButton } from '@/components/NeButton.vue'
-export { default as NeCheckbox } from '@/components/NeCheckbox.vue'
-export { default as NeTable } from '@/components/NeTable.vue'
-export { default as NeTableHead } from '@/components/NeTableHead.vue'
-export { default as NeTableHeadCell } from '@/components/NeTableHeadCell.vue'
-export { default as NeTableBody } from '@/components/NeTableBody.vue'
-export { default as NeTableRow } from '@/components/NeTableRow.vue'
-export { default as NeTableCell } from '@/components/NeTableCell.vue'
-export { default as NeCombobox } from '@/components/NeCombobox.vue'
-export { default as NeDropdown } from '@/components/NeDropdown.vue'
-export { default as NeCard } from '@/components/NeCard.vue'
-export { default as NeLink } from '@/components/NeLink.vue'
-export { default as NeFormItemLabel } from '@/components/NeFormItemLabel.vue'
-export { default as NeRadioSelection } from '@/components/NeRadioSelection.vue'
-export { default as NePaginator } from '@/components/NePaginator.vue'
-export { default as NeEmptyState } from '@/components/NeEmptyState.vue'
-export { default as NeTabs } from '@/components/NeTabs.vue'
-export { default as NeTextArea } from '@/components/NeTextArea.vue'
-export { default as NeTextInput } from '@/components/NeTextInput.vue'
-export { default as NeToggle } from '@/components/NeToggle.vue'
-export { default as NeToastNotification } from '@/components/NeToastNotification.vue'
-export { default as NeModal } from '@/components/NeModal.vue'
-export { default as NeHeading } from '@/components/NeHeading.vue'
-export { default as NeListbox } from '@/components/NeListbox.vue'
-export { default as NeDropdownFilter } from '@/components/NeDropdownFilter.vue'
-export { default as NeSortDropdown } from '@/components/NeSortDropdown.vue'
+export { default as NeSkeleton } from './components/NeSkeleton.vue'
+export { default as NeSpinner } from './components/NeSpinner.vue'
+export { default as NeExpandable } from './components/NeExpandable.vue'
+export { default as NeProgressBar } from './components/NeProgressBar.vue'
+export { default as NeFileInput } from './components/NeFileInput.vue'
+export { default as NeInlineNotification } from './components/NeInlineNotification.vue'
+export { default as NeRoundedIcon } from './components/NeRoundedIcon.vue'
+export { default as NeSideDrawer } from './components/NeSideDrawer.vue'
+export { default as NeTooltip } from './components/NeTooltip.vue'
+export { default as NeBadge } from './components/NeBadge.vue'
+export { default as NeButton } from './components/NeButton.vue'
+export { default as NeCheckbox } from './components/NeCheckbox.vue'
+export { default as NeTable } from './components/NeTable.vue'
+export { default as NeTableHead } from './components/NeTableHead.vue'
+export { default as NeTableHeadCell } from './components/NeTableHeadCell.vue'
+export { default as NeTableBody } from './components/NeTableBody.vue'
+export { default as NeTableRow } from './components/NeTableRow.vue'
+export { default as NeTableCell } from './components/NeTableCell.vue'
+export { default as NeCombobox } from './components/NeCombobox.vue'
+export { default as NeDropdown } from './components/NeDropdown.vue'
+export { default as NeCard } from './components/NeCard.vue'
+export { default as NeLink } from './components/NeLink.vue'
+export { default as NeFormItemLabel } from './components/NeFormItemLabel.vue'
+export { default as NeRadioSelection } from './components/NeRadioSelection.vue'
+export { default as NePaginator } from './components/NePaginator.vue'
+export { default as NeEmptyState } from './components/NeEmptyState.vue'
+export { default as NeTabs } from './components/NeTabs.vue'
+export { default as NeTextArea } from './components/NeTextArea.vue'
+export { default as NeTextInput } from './components/NeTextInput.vue'
+export { default as NeToggle } from './components/NeToggle.vue'
+export { default as NeToastNotification } from './components/NeToastNotification.vue'
+export { default as NeModal } from './components/NeModal.vue'
+export { default as NeHeading } from './components/NeHeading.vue'
+export { default as NeListbox } from './components/NeListbox.vue'
+export { default as NeDropdownFilter } from './components/NeDropdownFilter.vue'
+export { default as NeSortDropdown } from './components/NeSortDropdown.vue'
 
 // types export
-export type { NeComboboxOption } from '@/components/NeCombobox.vue'
-export type { Tab } from '@/components/NeTabs.vue'
-export type { NeNotification } from '@/components/NeToastNotification.vue'
-export type { NeListboxOption } from '@/components/NeListbox.vue'
-export type { NeDropdownItem } from '@/components/NeDropdown.vue'
-export type { FilterOption, FilterKind } from '@/components/NeDropdownFilter.vue'
+export type { NeComboboxOption } from './components/NeCombobox.vue'
+export type { Tab } from './components/NeTabs.vue'
+export type { NeNotification } from './components/NeToastNotification.vue'
+export type { NeListboxOption } from './components/NeListbox.vue'
+export type { NeDropdownItem } from './components/NeDropdown.vue'
+export type { FilterOption, FilterKind } from './components/NeDropdownFilter.vue'
+export type { ModalKind } from './components/NeModal.vue'
+export type { RadioOption } from './components/NeRadioSelection.vue'
 
 // library functions export
 export {
@@ -55,23 +57,23 @@ export {
   byteFormat1024,
   byteFormat1000,
   kbpsFormat
-} from '@/lib/utils'
+} from './lib/utils'
 export {
   formatDateLoc,
   formatInTimeZoneLoc,
   getDateFnsLocale,
   formatDurationLoc,
   humanDistanceToNowLoc
-} from '@/lib/dateTime'
+} from './lib/dateTime'
 export {
   saveToStorage,
   getJsonFromStorage,
   getStringFromStorage,
   deleteFromStorage,
   savePreference,
   getPreference
-} from '@/lib/storage'
+} from './lib/storage'
 
 // composables export
-export { useItemPagination } from '@/composables/useItemPagination'
-export { useSort } from '@/composables/useSort'
+export { useItemPagination } from './composables/useItemPagination'
+export { useSort } from './composables/useSort'

tsconfig.app.json

@@ -5,9 +5,6 @@
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
-    "outDir": "dist",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "outDir": "dist"
   }
 }

vite.config.ts

@@ -1,5 +1,3 @@
-import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
@@ -38,10 +36,5 @@ export default defineConfig({
       }
     }
   },
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
+  plugins: [vue()]
 })