diff --git a/.eslintrc.js b/.eslintrc.js
index d4635233..38cebff5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,7 +5,7 @@ module.exports = {
},
extends: [
// 'airbnb-base',
- '@antfu/eslint-config-vue',
+ '@antfu',
'plugin:vue/vue3-recommended',
],
parser: 'vue-eslint-parser',
diff --git a/package.json b/package.json
index db933f38..f15f88c3 100644
--- a/package.json
+++ b/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",
diff --git a/packages/anu-vue/src/components/alert/AAlert.vue b/packages/anu-vue/src/components/alert/AAlert.vue
index 76e14b73..e15a8df6 100644
--- a/packages/anu-vue/src/components/alert/AAlert.vue
+++ b/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
diff --git a/packages/anu-vue/src/components/avatar/AAvatar.vue b/packages/anu-vue/src/components/avatar/AAvatar.vue
index b332ff0f..f44f051b 100644
--- a/packages/anu-vue/src/components/avatar/AAvatar.vue
+++ b/packages/anu-vue/src/components/avatar/AAvatar.vue
@@ -1,7 +1,7 @@
diff --git a/packages/anu-vue/src/components/list/AList.vue b/packages/anu-vue/src/components/list/AList.vue
index 15d5aacb..8534c4e5 100644
--- a/packages/anu-vue/src/components/list/AList.vue
+++ b/packages/anu-vue/src/components/list/AList.vue
@@ -24,7 +24,9 @@ defineOptions({
defineSlots()
-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)),
@@ -32,7 +34,7 @@ const { options, select: selectListItem, value } = useGroupModel({
})
// 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', {
diff --git a/packages/anu-vue/src/components/rating/ARating.vue b/packages/anu-vue/src/components/rating/ARating.vue
index 627fcd00..0ce61b28 100644
--- a/packages/anu-vue/src/components/rating/ARating.vue
+++ b/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
}
diff --git a/packages/anu-vue/src/components/select/ASelect.vue b/packages/anu-vue/src/components/select/ASelect.vue
index 1d8e283b..f247a66d 100644
--- a/packages/anu-vue/src/components/select/ASelect.vue
+++ b/packages/anu-vue/src/components/select/ASelect.vue
@@ -63,7 +63,7 @@ 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()
@@ -71,24 +71,26 @@ const handleInputClick = () => {
}
// đ 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])))
diff --git a/packages/anu-vue/src/components/table/useTable.ts b/packages/anu-vue/src/components/table/useTable.ts
index d2214099..c006bef5 100644
--- a/packages/anu-vue/src/components/table/useTable.ts
+++ b/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 = (rows: Ref[]>, cols: Ref) => {
+export function getComputedCols(rows: Ref[]>, cols: Ref) {
return computed(() => {
// If custom cols are provided => Use them
if (cols.value.length)
@@ -16,6 +16,6 @@ export const getComputedCols = (rows: Ref[]>
})
}
-export const getSortedCols = (cols: ComputedRef) => {
+export function getSortedCols(cols: ComputedRef) {
return computed(() => cols.value.filter(col => col.isSortable && col.sortBy !== undefined))
}
diff --git a/packages/anu-vue/src/components/tabs/ATabs.vue b/packages/anu-vue/src/components/tabs/ATabs.vue
index bb97e52c..7a31f00d 100644
--- a/packages/anu-vue/src/components/tabs/ATabs.vue
+++ b/packages/anu-vue/src/components/tabs/ATabs.vue
@@ -62,7 +62,7 @@ provide(TabBindingsSymbol, refTabs)
const areTabsOverflowed = ref()
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)
diff --git a/packages/anu-vue/src/components/textarea/ATextarea.vue b/packages/anu-vue/src/components/textarea/ATextarea.vue
index 84b77d63..2bf86a95 100644
--- a/packages/anu-vue/src/components/textarea/ATextarea.vue
+++ b/packages/anu-vue/src/components/textarea/ATextarea.vue
@@ -1,7 +1,7 @@
@@ -60,8 +59,8 @@ if (props.autoSize) {
>
diff --git a/packages/anu-vue/src/components/typography/utils.ts b/packages/anu-vue/src/components/typography/utils.ts
index 56ed8f3c..8d075a25 100644
--- a/packages/anu-vue/src/components/typography/utils.ts
+++ b/packages/anu-vue/src/components/typography/utils.ts
@@ -2,7 +2,7 @@ import type { Ref, Slots, ToRef } from 'vue'
import type { TypographyProps } from './props'
import type { ConfigurableValue } from '@/composables/useConfigurable'
-export const isTypographyUsed = (props: { [K in keyof TypographyProps]: ToRef }, slots: Slots) => {
+export function isTypographyUsed(props: { [K in keyof TypographyProps]: ToRef }, slots: Slots) {
const { title, subtitle, text } = props
const validateProp = (prop?: Ref): boolean => {
diff --git a/packages/anu-vue/src/composables/createTransition.ts b/packages/anu-vue/src/composables/createTransition.ts
index cd7074b1..026af46a 100644
--- a/packages/anu-vue/src/composables/createTransition.ts
+++ b/packages/anu-vue/src/composables/createTransition.ts
@@ -1,7 +1,7 @@
import { Transition, TransitionGroup, defineComponent, h } from 'vue'
import { capitalize } from '@/utils/helpers'
-export const createTransition = (name: string) => {
+export function createTransition(name: string) {
return defineComponent({
name: `A${capitalize(name)}Transition`,
props: {
diff --git a/packages/anu-vue/src/composables/useAnu.ts b/packages/anu-vue/src/composables/useAnu.ts
index 3e95e13f..7d4b8c2a 100644
--- a/packages/anu-vue/src/composables/useAnu.ts
+++ b/packages/anu-vue/src/composables/useAnu.ts
@@ -1,7 +1,7 @@
import type { ConfigThemes, PluginOptions } from '../plugin'
import { createCustomGlobalState } from '@/composables/useCustomCreateGlobalState'
-const getThemeColorsCss = (themes: ConfigThemes) => {
+function getThemeColorsCss(themes: ConfigThemes) {
return Object.values(themes)
.map(theme =>
`${theme.class ? `.${theme.class}` : ':root'}{${Object.entries(theme.colors).concat(Object.entries(theme.cssVars)).concat([['primary-hue', theme.colors.primary.split(',')[0]]]).map(([varName, val]) => `--a-${varName}:${val};`).join('')}}`,
diff --git a/packages/anu-vue/src/composables/useColor.ts b/packages/anu-vue/src/composables/useColor.ts
index f01769d8..14bf4bee 100644
--- a/packages/anu-vue/src/composables/useColor.ts
+++ b/packages/anu-vue/src/composables/useColor.ts
@@ -3,16 +3,18 @@ import type { ComputedRef, StyleValue } from 'vue'
import { useAnu } from '@/composables/useAnu'
import type { ColorProp } from '@/composables/useProps'
-export const isThemeColor = (color: ColorProp | null): ComputedRef => computed(() => {
- let activeThemeColors: string[] = []
+export function isThemeColor(color: ColorProp | null): ComputedRef {
+ return computed(() => {
+ let activeThemeColors: string[] = []
- const { activeTheme } = useAnu()
- activeThemeColors = Object.keys(activeTheme.value.theme.colors)
+ const { activeTheme } = useAnu()
+ activeThemeColors = Object.keys(activeTheme.value.theme.colors)
- return !!(color && (activeThemeColors as ColorProp[]).includes(color))
-})
+ return !!(color && (activeThemeColors as ColorProp[]).includes(color))
+ })
+}
-export const useColor = (color: MaybeRef, cssVarName: MaybeRef, as: 'text' | 'bg' = 'text') => {
+export function useColor(color: MaybeRef, cssVarName: MaybeRef, as: 'text' | 'bg' = 'text') {
const styles = computed(() => {
const _color = unref(color)
const cssVar = computed(() => `--a-${unref(cssVarName)}`)
diff --git a/packages/anu-vue/src/composables/useConfigurable.ts b/packages/anu-vue/src/composables/useConfigurable.ts
index 11f18aa6..4b1f2744 100644
--- a/packages/anu-vue/src/composables/useConfigurable.ts
+++ b/packages/anu-vue/src/composables/useConfigurable.ts
@@ -10,15 +10,17 @@ export type ClassAttr = Class | Class[]
export type AttrsType = Record | undefined
export type ConfigurableValue = undefined | ContentType | [ContentType, ClassAttr] | [ContentType, ClassAttr, AttrsType]
-export const useConfigurable = (value: MaybeRef) => computed(() => {
- const _value = resolveUnref(value)
+export function useConfigurable(value: MaybeRef) {
+ return computed(() => {
+ const _value = resolveUnref(value)
- const [content, classes, attrs] = _value === undefined
- ? []
- : (typeof _value === 'string' || typeof _value === 'number')
- ? [_value]
- : _value
+ const [content, classes, attrs] = _value === undefined
+ ? []
+ : (typeof _value === 'string' || typeof _value === 'number')
+ ? [_value]
+ : _value
- return { content, classes, attrs }
-},
-)
+ return { content, classes, attrs }
+ },
+ )
+}
diff --git a/packages/anu-vue/src/composables/useDOMScrollLock.ts b/packages/anu-vue/src/composables/useDOMScrollLock.ts
index eef3f56f..9fbf4047 100644
--- a/packages/anu-vue/src/composables/useDOMScrollLock.ts
+++ b/packages/anu-vue/src/composables/useDOMScrollLock.ts
@@ -4,7 +4,7 @@ import { ref, watch } from 'vue'
// Thanks: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
// â Caveat: If scroll-behavior: smooth is applied to body then dialog close will scroll the body
-export const useDOMScrollLock = (modelValue: Ref) => {
+export function useDOMScrollLock(modelValue: Ref) {
const refRoot = ref()
const scrollbarWidth = useCssVar('--scrollbar-width', refRoot)
diff --git a/packages/anu-vue/src/composables/useIndeterminateCheckbox.ts b/packages/anu-vue/src/composables/useIndeterminateCheckbox.ts
index 9ef30408..b4762e0d 100644
--- a/packages/anu-vue/src/composables/useIndeterminateCheckbox.ts
+++ b/packages/anu-vue/src/composables/useIndeterminateCheckbox.ts
@@ -1,7 +1,7 @@
import type { MaybeComputedRef } from '@vueuse/core'
import type { Ref } from 'vue'
-export const useIndeterminateCheckbox = (selected: Ref, options: MaybeComputedRef) => {
+export function useIndeterminateCheckbox(selected: Ref, options: MaybeComputedRef) {
const _options = resolveRef(options)
const vModel = computed({
diff --git a/packages/anu-vue/src/composables/useLayer.ts b/packages/anu-vue/src/composables/useLayer.ts
index 74c6fc72..dafac105 100644
--- a/packages/anu-vue/src/composables/useLayer.ts
+++ b/packages/anu-vue/src/composables/useLayer.ts
@@ -18,7 +18,7 @@ export interface LayerProps {
// type LooseAutocomplete = T | Omit
// TODO: Use `useColor` composable to removed the color calculation
-export const useProps = (propOverrides?: Partial) => {
+export function useProps(propOverrides?: Partial) {
let props = {
/**
* Layer color
@@ -53,7 +53,7 @@ export const useProps = (propOverrides?: Partial) =
interface UseLayerConfig {
statesClass?: string
}
-export const useLayer = () => {
+export function useLayer() {
// TODO(TS): Improve typing
const computeClassesStyles = (propColor: ColorProp, propVariant: string, propsStates: boolean, config: UseLayerConfig = {}) => {
// đ Styles
diff --git a/packages/anu-vue/src/composables/useSearch.ts b/packages/anu-vue/src/composables/useSearch.ts
index 9de2b3aa..858216ef 100644
--- a/packages/anu-vue/src/composables/useSearch.ts
+++ b/packages/anu-vue/src/composables/useSearch.ts
@@ -22,7 +22,7 @@ export type typeFilterBy = (string
For cases other than mentioned above you need to pass custom filter via filterBy param
*/
-export const useSearch = (search: MaybeRef, data: MaybeRef, filterBy: MaybeRef> | undefined = undefined, strict: MaybeRef = false): { results: ComputedRef | Ref } => {
+export function useSearch(search: MaybeRef, data: MaybeRef, filterBy: MaybeRef> | undefined = undefined, strict: MaybeRef = false): { results: ComputedRef | Ref } {
const extractStringValueFromObj = (obj: Record, key: string, strict: boolean): string | null => {
const extractedVal = obj[key]
diff --git a/packages/anu-vue/src/composables/useSort.ts b/packages/anu-vue/src/composables/useSort.ts
index 3c7beab5..fd460e4a 100644
--- a/packages/anu-vue/src/composables/useSort.ts
+++ b/packages/anu-vue/src/composables/useSort.ts
@@ -16,7 +16,7 @@ export type typeSortBy = string
))
)[]
-export const useSort = (data: MaybeRef, sortBy: MaybeRef | undefined = undefined, isAsc: MaybeRef = true): { results: ComputedRef | Ref } => {
+export function useSort(data: MaybeRef, sortBy: MaybeRef | undefined = undefined, isAsc: MaybeRef = true): { results: ComputedRef | Ref } {
const isDate = (val: unknown) => {
// @ts-expect-error Date can't be passed to isNaN
return val instanceof Date && !isNaN(val)
diff --git a/packages/anu-vue/src/composables/useTypographyColor.ts b/packages/anu-vue/src/composables/useTypographyColor.ts
index 6d3820db..3e083965 100644
--- a/packages/anu-vue/src/composables/useTypographyColor.ts
+++ b/packages/anu-vue/src/composables/useTypographyColor.ts
@@ -4,7 +4,7 @@ import type { ColorProp } from './useProps'
import { colord } from '@/utils/colord'
import { isThemeColor } from '@/composables/useColor'
-const calculateColor = (_isThemeColor: boolean, _color: ColorProp | null, _variant: string) => {
+function calculateColor(_isThemeColor: boolean, _color: ColorProp | null, _variant: string) {
const classes = []
const styles = []
@@ -39,7 +39,7 @@ const calculateColor = (_isThemeColor: boolean, _color: ColorProp | null, _varia
}
}
-export const useTypographyColor = (color: MaybeComputedRef, variant: MaybeComputedRef) => {
+export function useTypographyColor(color: MaybeComputedRef, variant: MaybeComputedRef) {
const typographyClasses = ref([])
const typographyStyles = ref([])
diff --git a/packages/anu-vue/src/transitions/TransitionExpand.vue b/packages/anu-vue/src/transitions/TransitionExpand.vue
index 36384640..6a92d6c6 100644
--- a/packages/anu-vue/src/transitions/TransitionExpand.vue
+++ b/packages/anu-vue/src/transitions/TransitionExpand.vue
@@ -1,6 +1,7 @@