fix: adjustments to types (#90)

Author: Tbaile

src/components/NeCombobox.vue

@@ -44,7 +44,7 @@ export interface Props {
   maxOptionsShown?: number
   multiple?: boolean
   disabled?: boolean
-  showOptionsType: boolean
+  showOptionsType?: boolean
   optional?: boolean
   selectedLabel: string
   showSelectedLabel?: boolean

src/components/NeFileInput.vue

@@ -12,10 +12,10 @@ import NeProgressBar from './NeProgressBar.vue'
 interface FileInputProps {
   modelValue?: File | File[] | null
   label?: string
-  invalidMessage: string
+  invalidMessage?: string
   dropzoneLabel: string
-  progress: number
-  showProgress: boolean
+  progress?: number
+  showProgress?: boolean
   accept?: string | undefined
 }
 

src/components/NeModal.vue

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

src/components/NeRadioSelection.vue

@@ -3,23 +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 { type IconDefinition } 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'
+<script lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 
-type RadioOption = {
+export type RadioOption = {
   id: string
   label: string
   description?: string
   icon?: IconDefinition
   disabled?: boolean
 }
+</script>
+
+<script lang="ts" setup generic="T extends RadioOption">
+import { computed, type PropType, type Ref, ref, watch } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+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: {
@@ -41,7 +44,7 @@ const props = defineProps({
   },
   options: {
     required: true,
-    type: Array<RadioOption>
+    type: Array<T>
   },
   card: {
     type: Boolean,

src/components/NeTable.vue

@@ -3,54 +3,41 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <script lang="ts" setup>
-import { computed, provide, type PropType } from 'vue'
+import { computed, provide } from 'vue'
 import NeTableSkeleton from './NeTableSkeleton.vue'
 
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 
-const props = defineProps({
-  ariaLabel: {
-    type: String,
-    required: true
-  },
-  cardBreakpoint: {
-    type: String as PropType<Breakpoint>,
-    default: 'md'
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  skeletonRows: {
-    type: Number,
-    default: 8
-  },
-  skeletonColumns: {
-    type: Number,
-    default: 4
-  },
-  sortKey: {
-    type: String,
-    default: ''
-  },
-  sortDescending: {
-    type: Boolean,
-    default: false
-  }
-})
+const {
+  ariaLabel,
+  cardBreakpoint = 'md',
+  loading = false,
+  skeletonRows = 8,
+  skeletonColumns = 4,
+  sortKey = '',
+  sortDescending = false
+} = defineProps<{
+  ariaLabel?: string
+  cardBreakpoint?: Breakpoint
+  loading?: boolean
+  skeletonRows?: number
+  skeletonColumns?: number
+  sortKey?: string
+  sortDescending?: boolean
+}>()
 
 // provide props to children components
 provide(
   'cardBreakpoint',
-  computed(() => props.cardBreakpoint)
+  computed(() => cardBreakpoint)
 )
 provide(
   'sortKey',
-  computed(() => props.sortKey)
+  computed(() => sortKey)
 )
 provide(
   'sortDescending',
-  computed(() => props.sortDescending)
+  computed(() => sortDescending)
 )
 
 const tableCardStyle: Record<Breakpoint, string> = {

src/components/NeTableHeadCell.vue

@@ -7,6 +7,11 @@ import { computed, inject, toValue } from 'vue'
 import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
+export type SortEvent = {
+  key: string
+  descending: boolean
+}
+
 const props = defineProps({
   columnKey: {
     type: String,
@@ -19,7 +24,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits<{
-  sort: [{ key: string; descending: boolean }]
+  sort: [SortEvent]
 }>()
 
 // inject from NeTable.vue

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

@@ -46,6 +46,9 @@ 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 { RadioOption } from './components/NeRadioSelection.vue'
+export type { SortEvent } from './components/NeTableHeadCell.vue'
+export type { ModalKind, PrimaryButtonKind, ModalSize } from './components/NeModal.vue'
 
 // library functions export
 export {

src/styles/theme.css

@@ -21,6 +21,9 @@
   --color-primary-900: var(--color-cyan-900);
   --color-primary-950: var(--color-cyan-950);
 
+  /* breakpoints */
+  --breakpoint-3xl: 112rem;
+
   /* animations */
   --animate-spin-fast: spin 0.5s linear infinite;
   --animate-spin-relaxed: spin 1.5s linear infinite;