chore: fixed linting issues

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   },
   extends: [
     // 'airbnb-base',
-    '@antfu/eslint-config-vue',
+    '@antfu',
     'plugin:vue/vue3-recommended',
   ],
   parser: 'vue-eslint-parser',

package.json

@@ -19,7 +19,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@antfu/eslint-config-vue": "^0.35.1",
+    "@antfu/eslint-config": "^0.38.4",
     "@antfu/ni": "^0.19.0",
     "@types/node": "^18.11.19",
     "@typescript-eslint/eslint-plugin": "^5.50.0",

packages/anu-vue/src/components/alert/AAlert.vue

@@ -75,7 +75,7 @@ const { styles, classes } = getLayerClasses(
 
 // 👉 Append icon
 const appendIcon = props.appendIcon || (props.dismissible ? 'i-bx-x' : null)
-const handleAppendIconClick = () => {
+function handleAppendIconClick() {
   isAlertVisible.value = false
 
   // Emit append icon click event

packages/anu-vue/src/components/avatar/AAvatar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useLayer } from '@/composables/useLayer';
-import { toRef } from 'vue';
-import { avatarProps } from './props';
+import { toRef } from 'vue'
+import { avatarProps } from './props'
+import { useLayer } from '@/composables/useLayer'
 
 const props = defineProps(avatarProps)
 

packages/anu-vue/src/components/badge/ABadge.vue

@@ -99,7 +99,7 @@ defineSlots<{
   default: {}
 }>()
 
-const formatMaxContent = (content: unknown) => {
+function formatMaxContent(content: unknown) {
   if (!isNumeric(content) || props.max === undefined)
     return content
 

packages/anu-vue/src/components/base-input/ABaseInput.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { baseInputProps } from './props'
+import type { baseInputSlots } from './slots'
 import { ALoader } from '@/components/loader'
 import { useConfigurable } from '@/composables/useConfigurable'
 import TransitionExpand from '@/transitions/TransitionExpand.vue'
-import { baseInputProps } from './props'
-import type { baseInputSlots } from './slots'
 
 // TODO: Provide a way to attach classes to root element
 const props = defineProps(baseInputProps)

packages/anu-vue/src/components/base-input/index.ts

@@ -1,8 +1,8 @@
+import ABaseInput from './ABaseInput.vue'
+
 export * from './props'
 export * from './slots'
 export { ABaseInput }
 
-import ABaseInput from './ABaseInput.vue'
-
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type ABaseInput = InstanceType<typeof ABaseInput>

packages/anu-vue/src/components/chip/AChip.vue

@@ -72,7 +72,7 @@ const { styles, classes } = getLayerClasses(
   isClickable,
 )
 
-const closeChip = () => {
+function closeChip() {
   emit('update:modelValue', false)
   emit('click:close')
 }

packages/anu-vue/src/components/data-table/ADataTable.vue

@@ -52,9 +52,11 @@ watch(() => props.cols, _cols => {
 }, { immediate: true })
 
 // Little helper utility to generate columns from column names applying column defaults
-const genColsFromNames = (names: string[]) => names.map(rowProperty => {
-  return defu({ ...dataTableColDefaults, name: rowProperty }) as DataTablePropColumn
-})
+function genColsFromNames(names: string[]) {
+  return names.map(rowProperty => {
+    return defu({ ...dataTableColDefaults, name: rowProperty }) as DataTablePropColumn
+  })
+}
 
 /*
   This is where we component optimization starts.
@@ -100,15 +102,15 @@ if (!props.cols.length) {
 const q = ref(typeof props.search === 'boolean' ? '' : props.search)
 watch(q, value => {
   emit('update:search', value)
-  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+
   fetchRows()
 })
 
 // 👉 Sorted cols computed
 const sortedCols = computed(() => cols.value.filter(col => col.isSortable && col.sortBy !== undefined))
 
 // 👉 fetch rows
-const fetchRows = () => {
+function fetchRows() {
   // Use type check instead of isSST to prevent type aliases further
   if (typeof props.rows === 'function') {
     (props.rows as ItemsFunction)({
@@ -185,7 +187,7 @@ const {
 fetchRows()
 
 // 👉 Handle header click
-const handleHeaderClick = (clickedCol: any) => {
+function handleHeaderClick(clickedCol: any) {
   // TODO: Remove this and fix handler type error
   clickedCol = clickedCol as DataTablePropColumn
   const tableCol = cols.value.find(_col => clickedCol.name === _col.name)

packages/anu-vue/src/components/dialog/ADialog.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import type { Ref } from 'vue'
 import { ACard, cardProps } from '@/components/card'
 import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
 import { defuProps } from '@/composables/useProps'
 import { useTeleport } from '@/composables/useTeleport'
-import type { Ref } from 'vue'
 
 const props = defineProps(defuProps({
   /**

packages/anu-vue/src/components/drawer/ADrawer.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { defu } from 'defu'
+import type { PropType, Ref } from 'vue'
 import { ACard, cardProps } from '@/components/card'
 import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
 import { useTeleport } from '@/composables/useTeleport'
-import { defu } from 'defu'
-import type { PropType, Ref } from 'vue'
 
 const props = defineProps(defu({
   /**

packages/anu-vue/src/components/floating/index.ts

@@ -1,4 +1,5 @@
 import AFloating from './AFloating.vue'
+
 export * from './events'
 export { sameWidth as sameWidthFloatingUIMiddleware } from './middlewares'
 export * from './props'

packages/anu-vue/src/components/floating/middlewares.ts

@@ -1,14 +1,16 @@
 import type { ElementRects } from '@floating-ui/vue'
 import type { Ref } from 'vue'
 
-export const sameWidth = (floatingEl: Ref<HTMLElement>) => ({
-  name: 'sameWidth',
-  fn: ({ rects, x, y }: { rects: ElementRects; x: number; y: number }) => {
+export function sameWidth(floatingEl: Ref<HTMLElement>) {
+  return {
+    name: 'sameWidth',
+    fn: ({ rects, x, y }: { rects: ElementRects; x: number; y: number }) => {
     // Set width of reference to floating
-    const _floatingEL = unrefElement(floatingEl)
-    if (_floatingEL)
-      _floatingEL.style.minWidth = `${rects.reference.width}px`
+      const _floatingEL = unrefElement(floatingEl)
+      if (_floatingEL)
+        _floatingEL.style.minWidth = `${rects.reference.width}px`
 
-    return { x, y }
-  },
-})
+      return { x, y }
+    },
+  }
+}

packages/anu-vue/src/components/input/AInput.vue

@@ -23,7 +23,7 @@ const input = ref<HTMLInputElement>()
 
 const isInputTypeFile = attrs.type && attrs.type === 'file'
 
-const handleInputWrapperClick = () => {
+function handleInputWrapperClick() {
   input.value?.focus()
 }
 </script>

packages/anu-vue/src/components/list/AList.vue

@@ -24,15 +24,17 @@ defineOptions({
 
 defineSlots<typeof listSlots>()
 
-const extractItemValueFromItemOption = (item: ListPropItems[number]) => isObject(item) ? (item.value || item) : item
+function extractItemValueFromItemOption(item: ListPropItems[number]) {
+  return isObject(item) ? (item.value || item) : item
+}
 
 const { options, select: selectListItem, value } = useGroupModel({
   options: props.items.map(i => extractItemValueFromItemOption(i)),
   multi: props.multi,
 })
 
 // const isActive = computed(() => options.value[itemIndex].isSelected)
-const handleListItemClick = (item: ListPropItems[number]) => {
+function handleListItemClick(item: ListPropItems[number]) {
   selectListItem(extractItemValueFromItemOption(item))
   emit('update:modelValue', value.value)
   emit('click:item', {

packages/anu-vue/src/components/rating/ARating.vue

@@ -105,11 +105,11 @@ const items = computed(() =>
   ),
 )
 
-const handleClick = () => {
+function handleClick() {
   emit('update:modelValue', rating.value)
 }
 
-const onMouseEnter = (e: MouseEvent, index: number) => {
+function onMouseEnter(e: MouseEvent, index: number) {
   isHovered.value = true
 
   const { offsetX, target } = e
@@ -121,7 +121,7 @@ const onMouseEnter = (e: MouseEvent, index: number) => {
   }
 }
 
-const onMouseLeave = () => {
+function onMouseLeave() {
   isHovered.value = false
 }
 </script>

packages/anu-vue/src/components/select/ASelect.vue

@@ -63,32 +63,34 @@ onClickOutside(
 // !SECTION
 // TODO: You can use it as utility in another components
 // TODO: Add some style to indicate currently selected item
-const handleInputClick = () => {
+function handleInputClick() {
   if (!(props.disabled || props.readonly)) {
     isOptionsVisible.value = !isOptionsVisible.value
     selectRef.value?.focus()
   }
 }
 
 // 👉 Options
-const handleOptionClick = (value: any, item?: ListPropItems[number]) => {
+function handleOptionClick(value: any, item?: ListPropItems[number]) {
   const valueToEmit = (item && props.emitObject) ? item : value
   emit('change', valueToEmit)
   emit('input', valueToEmit)
   emit('update:modelValue', valueToEmit)
 }
-const closeOptions = (event: MouseEvent) => {
+function closeOptions(event: MouseEvent) {
   if (event.target !== refFloating.value)
     isOptionsVisible.value = false
 }
 
 // 👉 Middleware
-const middleware = () => [
-  offset(6),
-  sameWidthFloatingUIMiddleware(refFloating),
-  flip(),
-  shift({ padding: 10 }),
-]
+function middleware() {
+  return [
+    offset(6),
+    sameWidthFloatingUIMiddleware(refFloating),
+    flip(),
+    shift({ padding: 10 }),
+  ]
+}
 
 const slots = useSlots()
 const cardSlotsToPass = computed(() => Object.fromEntries(Object.entries(selectCardSlots).filter(([slotName]) => slots[slotName])))

packages/anu-vue/src/components/table/useTable.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { SortBy } from '@/components/data-table'
 
-export const getComputedCols = <PropColumn>(rows: Ref<Record<string, unknown>[]>, cols: Ref<PropColumn[]>) => {
+export function getComputedCols<PropColumn>(rows: Ref<Record<string, unknown>[]>, cols: Ref<PropColumn[]>) {
   return computed<PropColumn[]>(() => {
   // If custom cols are provided => Use them
     if (cols.value.length)
@@ -16,6 +16,6 @@ export const getComputedCols = <PropColumn>(rows: Ref<Record<string, unknown>[]>
   })
 }
 
-export const getSortedCols = <PropColumn extends { isSortable: boolean; sortBy: SortBy }>(cols: ComputedRef<PropColumn[]>) => {
+export function getSortedCols<PropColumn extends { isSortable: boolean; sortBy: SortBy }>(cols: ComputedRef<PropColumn[]>) {
   return computed(() => cols.value.filter(col => col.isSortable && col.sortBy !== undefined))
 }

packages/anu-vue/src/components/tabs/ATabs.vue

@@ -62,7 +62,7 @@ provide(TabBindingsSymbol, refTabs)
 const areTabsOverflowed = ref<boolean>()
 const shouldShowArrows = computed(() => !props.vertical && areTabsOverflowed.value)
 
-const checkAreTabsOverflowed = () => {
+function checkAreTabsOverflowed() {
   if (props.vertical)
     return
 
@@ -105,7 +105,7 @@ const tabJustifyClasses = computed(() => {
 
 const activeIndicatorStyle = ref({})
 
-const calculateActiveIndicatorStyle = () => {
+function calculateActiveIndicatorStyle() {
   if (!refActiveTab.value)
     return
 
@@ -129,7 +129,7 @@ const calculateActiveIndicatorStyle = () => {
   }
 }
 
-const handleTabClick = (tab: TabProps | string, index: number) => {
+function handleTabClick(tab: TabProps | string, index: number) {
   const value = options.value[index].value
   selectTab(value)
   emit('update:modelValue', value)
@@ -157,7 +157,7 @@ onMounted(() => {
 
 // Arrow navigation & Scroll snapping
 const scrollSnapAlign = refAutoReset<'start' | 'end' | 'center' | undefined>(undefined, 1500)
-const scrollForward = async () => {
+async function scrollForward() {
   scrollSnapAlign.value = 'end'
   await nextTick()
   refTabsWrapper.value?.scrollBy({
@@ -166,7 +166,7 @@ const scrollForward = async () => {
   })
 }
 
-const scrollBackward = async () => {
+async function scrollBackward() {
   scrollSnapAlign.value = 'start'
   await nextTick()
   refTabsWrapper.value?.scrollBy({
@@ -178,7 +178,7 @@ const scrollBackward = async () => {
 // scroll
 const isLeftNavArrowEnabled = ref()
 const isRightNavArrowEnabled = ref(true)
-const handleScroll = () => {
+function handleScroll() {
   if (refTabsWrapper.value) {
     isLeftNavArrowEnabled.value = !(refTabsWrapper.value.scrollLeft === 0)
 

packages/anu-vue/src/components/textarea/ATextarea.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ABaseInput, baseInputProps } from '@/components/base-input';
-import { defu } from 'defu';
-import type { ExtractPropTypes } from 'vue';
+import { defu } from 'defu'
+import type { ExtractPropTypes } from 'vue'
+import { ABaseInput, baseInputProps } from '@/components/base-input'
 
 const props = defineProps(defu({
   modelValue: String,
@@ -32,18 +32,17 @@ const _baseInputProps = reactivePick(props, Object.keys(baseInputProps) as Array
 
 const textarea = ref<HTMLTextAreaElement>()
 
-const handleInputWrapperClick = () => {
+function handleInputWrapperClick() {
   textarea.value?.focus()
 }
 
-
 const refBaseInput = ref<ABaseInput>()
 if (props.autoSize) {
   const refInputWrapper = computed(() => refBaseInput.value?.refInputWrapper)
   useTextareaAutosize({
     element: textarea,
     input: textareaValue,
-    styleTarget: refInputWrapper
+    styleTarget: refInputWrapper,
   })
 }
 </script>
@@ -60,8 +59,8 @@ if (props.autoSize) {
   >
     <!-- ℹ️ Recursively pass down slots to child -->
     <template
-    v-for="name in Object.keys($slots).filter(slotName => slotName !== 'default')"
-    #[name]="slotProps"
+      v-for="name in Object.keys($slots).filter(slotName => slotName !== 'default')"
+      #[name]="slotProps"
     >
       <slot
         v-if="name !== 'default'"
@@ -73,8 +72,8 @@ if (props.autoSize) {
       <textarea
         v-bind="{ ...$attrs, ...slotProps }"
         ref="textarea"
-        class="a-textarea-textarea bg-transparent resize-none"
         v-model="textareaValue"
+        class="a-textarea-textarea bg-transparent resize-none"
       />
     </template>
   </ABaseInput>