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 @@