diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 03dbcb2..614a4c9 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -4,13 +4,15 @@ require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { root: true, extends: [ - 'plugin:vue/vue3-essential', 'plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting', 'plugin:storybook/recommended' ], + rules: { + "vue/component-name-in-template-casing": ["error"], + }, parserOptions: { ecmaVersion: 'latest' } diff --git a/package.json b/package.json index 04545c8..662b905 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,8 @@ "build": "run-p build-types \"build-only {@}\" --", "build-only": "vite build", "build-types": "vue-tsc --declaration --declarationMap --emitDeclarationOnly -p tsconfig.app.json --composite false", - "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", + "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore", + "lint-fix": "npm run lint -- --fix", "format": "prettier --write src/", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" diff --git a/src/components/NeCombobox.vue b/src/components/NeCombobox.vue index 7915703..5a6f51f 100644 --- a/src/components/NeCombobox.vue +++ b/src/components/NeCombobox.vue @@ -349,7 +349,7 @@ onClickOutside(comboboxRef, () => onClickOutsideCombobox()) { 'cursor-not-allowed opacity-50': disabled } ]" > - <font-awesome-icon :icon="fasChevronDown" class="h-3 w-3 shrink-0" aria-hidden="true" /> + <FontAwesomeIcon :icon="fasChevronDown" class="h-3 w-3 shrink-0" aria-hidden="true" /> </ComboboxButton> <div v-show="open || showOptions"> <ComboboxOptions @@ -378,7 +378,7 @@ onClickOutside(comboboxRef, () => onClickOutsideCombobox()) > <div class="flex items-center truncate"> <!-- option icon --> - <font-awesome-icon + <FontAwesomeIcon v-if="option.icon" :icon="option.icon" class="mr-2.5 h-4 w-4 shrink-0" @@ -403,7 +403,7 @@ onClickOutside(comboboxRef, () => onClickOutsideCombobox()) 'absolute inset-y-0 right-0 flex items-center pr-4 text-primary-700 dark:text-primary-500' ]" > - <font-awesome-icon :icon="fasCheck" class="h-4 w-4 shrink-0" aria-hidden="true" /> + <FontAwesomeIcon :icon="fasCheck" class="h-4 w-4 shrink-0" aria-hidden="true" /> </span> </li> </ComboboxOption> diff --git a/src/components/NeDropdown.vue b/src/components/NeDropdown.vue index bb52f03..e320e30 100644 --- a/src/components/NeDropdown.vue +++ b/src/components/NeDropdown.vue @@ -82,7 +82,7 @@ watch( <slot name="button"> <!-- default kebab button --> <NeButton class="py-2" kind="tertiary"> - <font-awesome-icon + <FontAwesomeIcon :icon="['fas', 'ellipsis-vertical']" aria-hidden="true" class="h-5 w-5 shrink-0" @@ -125,7 +125,7 @@ watch( ]" @click="onItemClick(item)" > - <font-awesome-icon + <FontAwesomeIcon v-if="item.icon" :icon="[item.iconStyle || 'fas', item.icon]" aria-hidden="true" diff --git a/src/components/NeExpandable.vue b/src/components/NeExpandable.vue index 01239ab..91d2090 100644 --- a/src/components/NeExpandable.vue +++ b/src/components/NeExpandable.vue @@ -55,7 +55,7 @@ function toggleExpanded() { <template v-if="!fullWidth"> <NeButton kind="tertiary" size="sm" class="-ml-2"> <template #suffix> - <font-awesome-icon + <FontAwesomeIcon :icon="internalIsExpanded ? faChevronUp : faChevronDown" class="h-3 w-3" aria-hidden="true" @@ -70,7 +70,7 @@ function toggleExpanded() { class="flex w-full items-center justify-between rounded border-b border-gray-300 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-200 dark:border-gray-500 dark:text-gray-50 dark:hover:bg-gray-700" > <span>{{ label }}</span> - <font-awesome-icon + <FontAwesomeIcon :icon="internalIsExpanded ? faChevronUp : faChevronDown" class="h-3 w-3" aria-hidden="true" diff --git a/src/components/NeInlineNotification.vue b/src/components/NeInlineNotification.vue index 2cfd509..9aee52b 100644 --- a/src/components/NeInlineNotification.vue +++ b/src/components/NeInlineNotification.vue @@ -115,7 +115,7 @@ const closeIconKindStyle: { [index: string]: string } = { <div :class="`rounded-md border-l-4 p-4 text-sm ${containerKindStyle[props.kind as string]}`"> <div class="flex"> <div class="flex-shrink-0"> - <font-awesome-icon + <FontAwesomeIcon :class="`h-4 w-4 ${iconKindStyle[props.kind as string]}`" :icon="iconName[props.kind as string]" aria-hidden="true" @@ -149,7 +149,7 @@ const closeIconKindStyle: { [index: string]: string } = { @click="isExpandedDetails = !isExpandedDetails" > <span>{{ showDetailsLabel }}</span> - <font-awesome-icon + <FontAwesomeIcon :icon="isExpandedDetails ? faChevronUp : faChevronDown" aria-hidden="true" class="ml-2 h-3 w-3" @@ -204,7 +204,7 @@ const closeIconKindStyle: { [index: string]: string } = { @click="emit('close')" > <span class="sr-only">{{ props.closeAriaLabel }}</span> - <font-awesome-icon :icon="faXmark" class="h-4 w-4" aria-hidden="true" /> + <FontAwesomeIcon :icon="faXmark" class="h-4 w-4" aria-hidden="true" /> </button> </div> </div> diff --git a/src/components/NeListbox.vue b/src/components/NeListbox.vue index 5723897..d9b1fe0 100644 --- a/src/components/NeListbox.vue +++ b/src/components/NeListbox.vue @@ -236,7 +236,7 @@ onClickOutside(listboxRef, () => onClickOutsideListbox()) { 'cursor-not-allowed opacity-50': disabled } ]" > - <font-awesome-icon :icon="fasChevronDown" class="h-3 w-3 shrink-0" aria-hidden="true" /> + <FontAwesomeIcon :icon="fasChevronDown" class="h-3 w-3 shrink-0" aria-hidden="true" /> </div> </ListboxButton> <Teleport to="body"> @@ -283,7 +283,7 @@ onClickOutside(listboxRef, () => onClickOutsideListbox()) 'absolute inset-y-0 right-0 flex items-center pr-4 text-primary-700 dark:text-primary-500' ]" > - <font-awesome-icon + <FontAwesomeIcon :icon="fasCheck" class="h-4 w-4 shrink-0" aria-hidden="true" diff --git a/src/components/NeModal.vue b/src/components/NeModal.vue index 90af088..0391441 100644 --- a/src/components/NeModal.vue +++ b/src/components/NeModal.vue @@ -141,7 +141,7 @@ function onSecondaryClick() { @click="onClose" > <span class="sr-only">{{ closeAriaLabel }}</span> - <font-awesome-icon + <FontAwesomeIcon :icon="['fas', 'xmark']" class="h-5 w-5" aria-hidden="true" diff --git a/src/components/NePaginator.vue b/src/components/NePaginator.vue index c675995..6a51059 100644 --- a/src/components/NePaginator.vue +++ b/src/components/NePaginator.vue @@ -150,7 +150,7 @@ function navigateToPage(page: number) { @click="navigateToPage(currentPage - 1)" > <span class="sr-only">{{ previousLabel }}</span> - <font-awesome-icon :icon="fasChevronLeft" class="h-3 w-3 shrink-0" aria-hidden="true" /> + <FontAwesomeIcon :icon="fasChevronLeft" class="h-3 w-3 shrink-0" aria-hidden="true" /> </button> </li> <!-- show all page numbers if there are no more than 8 pages in total --> @@ -231,7 +231,7 @@ function navigateToPage(page: number) { @click="navigateToPage(currentPage + 1)" > <span class="sr-only">{{ nextLabel }}</span> - <font-awesome-icon + <FontAwesomeIcon :icon="fasChevronRight" class="h-3 w-3 shrink-0" aria-hidden="true" diff --git a/src/components/NeTextArea.vue b/src/components/NeTextArea.vue index 33965b4..0ef4dd1 100644 --- a/src/components/NeTextArea.vue +++ b/src/components/NeTextArea.vue @@ -106,7 +106,7 @@ function emitModelValue(ev: any) { /> <!-- invalid icon --> <div v-if="invalidMessage" class="pointer-events-none absolute inset-y-0 right-0 pr-3 pt-2"> - <font-awesome-icon + <FontAwesomeIcon :icon="['fas', 'circle-exclamation']" class="h-4 w-4 text-rose-700 dark:text-rose-400" aria-hidden="true" diff --git a/src/components/NeTextInput.vue b/src/components/NeTextInput.vue index 824e567..d1978d7 100644 --- a/src/components/NeTextInput.vue +++ b/src/components/NeTextInput.vue @@ -171,7 +171,7 @@ function focus() { <span class="sr-only">{{ isPasswordVisible ? hidePasswordLabel : showPasswordLabel }}</span> - <font-awesome-icon + <FontAwesomeIcon :icon="['fas', isPasswordVisible ? 'eye-slash' : 'eye']" class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" @@ -183,7 +183,7 @@ function focus() { v-else-if="invalidMessage" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" > - <font-awesome-icon + <FontAwesomeIcon :icon="['fas', 'circle-exclamation']" class="h-4 w-4 text-rose-700 dark:text-rose-400" aria-hidden="true" diff --git a/src/components/NeToastNotification.vue b/src/components/NeToastNotification.vue index 50bdfd2..899b6f8 100644 --- a/src/components/NeToastNotification.vue +++ b/src/components/NeToastNotification.vue @@ -80,7 +80,7 @@ library.add(fasXmark) @click="$emit('close')" > <span class="sr-only">{{ srCloseLabel }}</span> - <font-awesome-icon :icon="['fas', 'xmark']" class="h-5 w-5" aria-hidden="true" /> + <FontAwesomeIcon :icon="['fas', 'xmark']" class="h-5 w-5" aria-hidden="true" /> </button> <!-- timestamp --> <NeTooltip diff --git a/stories/NeDropdown.stories.ts b/stories/NeDropdown.stories.ts index 34a7312..85ebbbc 100644 --- a/stories/NeDropdown.stories.ts +++ b/stories/NeDropdown.stories.ts @@ -97,7 +97,7 @@ const withSlotTemplate = <template #button>\ <NeButton>\ <template #suffix>\ - <font-awesome-icon :icon="[\'fas\', \'chevron-down\']" class="h-4 w-4" aria-hidden="true" />\ + <FontAwesomeIcon :icon="[\'fas\', \'chevron-down\']" class="h-4 w-4" aria-hidden="true" />\ </template>\ Menu\ </NeButton>\