chore: fix lint issues

.eslintrc.cjs

@@ -16,4 +16,15 @@ module.exports = {
     'max-statements-per-line': ['error', { max: 2 }],
     'vue/one-component-per-file': 'off',
   },
+
+  overrides: [
+    {
+      files: ['*.story.vue'],
+      rules: {
+        'no-console': 'off',
+        'no-alert': 'off',
+        'unused-imports/no-unused-vars': 'off',
+      },
+    },
+  ],
 }

docs/.vitepress/theme/index.ts

@@ -26,7 +26,7 @@ export default {
       'home-features-after': () => h('div', [h(HomePageDemo), h(HomePage)]),
     })
   },
-  enhanceApp({ app, router, siteData }) {
+  enhanceApp({ app }) {
     for (const path in baseModules)
       app.component(path.match(regex)?.[1] ?? '', (baseModules[path] as any)?.default)
 

docs/components/demo/AlertDialog/css/index.vue

@@ -13,6 +13,7 @@ import {
 import './styles.css'
 
 function handleAction() {
+  // eslint-disable-next-line no-alert
   alert('clicked action button!')
 }
 </script>

docs/components/demo/AlertDialog/tailwind/index.vue

@@ -12,6 +12,7 @@ import {
 } from 'radix-vue'
 
 function handleAction() {
+  // eslint-disable-next-line no-alert
   alert('clicked action button!')
 }
 </script>

docs/components/demo/ContextMenu/css/index.vue

@@ -24,6 +24,7 @@ const checkboxTwo = ref(false)
 const person = ref('pedro')
 
 function handleClick() {
+  // eslint-disable-next-line no-alert
   alert('hello!')
 }
 </script>

docs/components/demo/ContextMenu/tailwind/index.vue

@@ -23,6 +23,7 @@ const checkboxTwo = ref(false)
 const person = ref('pedro')
 
 function handleClick() {
+  // eslint-disable-next-line no-alert
   alert('hello!')
 }
 </script>

docs/components/demo/DropdownMenu/css/index.vue

@@ -26,6 +26,7 @@ const checkboxTwo = ref(false)
 const person = ref('pedro')
 
 function handleClick() {
+  // eslint-disable-next-line no-alert
   alert('hello!')
 }
 </script>

docs/components/demo/DropdownMenu/tailwind/index.vue

@@ -25,6 +25,7 @@ const checkboxTwo = ref(false)
 const person = ref('pedro')
 
 function handleClick() {
+  // eslint-disable-next-line no-alert
   alert('hello!')
 }
 </script>

docs/components/demo/Listbox/tailwind/tailwind.config.js

@@ -7,7 +7,7 @@ module.exports = {
     extend: {
       colors: {
         ...green,
-        ...grass
+        ...grass,
       },
     },
   },

docs/components/demo/Menubar/css/index.vue

@@ -24,11 +24,9 @@ const checkboxOne = ref(false)
 const checkboxTwo = ref(false)
 const person = ref('pedro')
 function handleClick() {
+  // eslint-disable-next-line no-alert
   alert('hello!')
 }
-
-const RADIO_ITEMS = ['Andy', 'Benoît', 'Luis']
-const CHECK_ITEMS = ['Always Show Bookmarks Bar', 'Always Show Full URLs']
 </script>
 
 <template>

docs/components/demo/Menubar/tailwind/index.vue

@@ -23,11 +23,9 @@ const checkboxOne = ref(false)
 const checkboxTwo = ref(false)
 const person = ref('pedro')
 function handleClick() {
+  // eslint-disable-next-line no-alert
   alert('hello!')
 }
-
-const RADIO_ITEMS = ['Andy', 'Benoît', 'Luis']
-const CHECK_ITEMS = ['Always Show Bookmarks Bar', 'Always Show Full URLs']
 </script>
 
 <template>

docs/components/demo/PinInput/css/index.vue

@@ -4,7 +4,10 @@ import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
 import './styles.css'
 
 const value = ref<string[]>([])
-const handleComplete = (e: string[]) => alert(e.join(''))
+function handleComplete(e: string[]) {
+  // eslint-disable-next-line no-alert
+  alert(e.join(''))
+}
 </script>
 
 <template>

docs/components/demo/PinInput/tailwind/index.vue

@@ -3,7 +3,10 @@ import { ref } from 'vue'
 import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
 
 const value = ref<string[]>([])
-const handleComplete = (e: string[]) => alert(e.join(''))
+function handleComplete(e: string[]) {
+  // eslint-disable-next-line no-alert
+  alert(e.join(''))
+}
 </script>
 
 <template>

docs/components/demo/RangeCalendar/tailwind/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
       colors: {
         ...blackA,
         ...grass,
-        ...green
+        ...green,
       },
     },
   },

docs/components/demo/Select/css/index.vue

@@ -21,10 +21,6 @@ import './styles.css'
 
 const fruit = ref()
 
-function handleClick() {
-  alert('hello!')
-}
-
 const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
 </script>

docs/components/demo/Select/tailwind/index.vue

@@ -20,10 +20,6 @@ import {
 
 const fruit = ref()
 
-function handleClick() {
-  alert('hello!')
-}
-
 const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
 </script>

docs/components/demo/Splitter/tailwind/tailwind.config.js

@@ -5,8 +5,8 @@ module.exports = {
   content: ['./**/*.vue'],
   theme: {
     extend: {
-      colors: { 
-        ...green, 
+      colors: {
+        ...green,
       },
     },
   },

packages/radix-vue/src/Collapsible/Collapsible.test.ts

@@ -5,7 +5,6 @@ import { mount } from '@vue/test-utils'
 import { findByText } from '@testing-library/vue'
 import Collapsible from './story/_Collapsible.vue'
 
-const TRIGGER_TEXT = 'Trigger'
 const CONTENT_TEXT = 'Content'
 
 describe('given a default Collapsible', async () => {

packages/radix-vue/src/Combobox/ComboboxItem.vue

@@ -48,7 +48,7 @@ const emits = defineEmits<ComboboxItemEmits<T>>()
 const { disabled } = toRefs(props)
 
 const rootContext = injectComboboxRootContext()
-const groupContext = injectComboboxGroupContext({ id: '', options: ref([]) })
+injectComboboxGroupContext({ id: '', options: ref([]) })
 const { forwardRef } = useForwardExpose()
 
 const isSelected = computed(() =>

packages/radix-vue/src/ContextMenu/story/_ContextMenu.vue

@@ -24,6 +24,7 @@ const checkboxTwo = ref(false)
 const person = ref('pedro')
 
 function handleClick() {
+  // eslint-disable-next-line no-alert
   alert('hello!')
 }
 </script>

packages/radix-vue/src/DismissableLayer/DismissableLayer.test.ts

@@ -22,12 +22,10 @@ describe('given a default DismissableLayer', () => {
   })
 
   describe('after clicking a trigger', () => {
-    let outsideButton: DOMWrapper<HTMLButtonElement>
     beforeEach(async () => {
       await fireEvent.click(trigger.element)
       const buttons = wrapper.findAll('button')
       buttons.find(i => i.text() === CLOSE_LABEL)?.element.focus()
-      outsideButton = buttons.find(i => i.text() === OUTSIDE_LABEL)!
     })
 
     it('should render the content', () => {

packages/radix-vue/src/DismissableLayer/story/_DismissableBox.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { DismissableLayer } from '../'
+
+// eslint-disable-next-line import/no-self-import
 import DismissableBox from './_DismissableBox.vue'
 
 const open = ref(false)
@@ -19,8 +21,8 @@ const buttonRef = ref<HTMLElement>()
     <DismissableBox
       v-if="open"
       @dismiss="open = false"
-      @focusOutside.prevent
-      @pointerDownOutside="
+      @focus-outside.prevent
+      @pointer-down-outside="
         (ev) => {
           if (ev.target === buttonRef) {
             ev.preventDefault();

packages/radix-vue/src/DropdownMenu/story/_DropdownMenu.vue

@@ -34,6 +34,7 @@ function handleClick() {
 
 function handleCheck(ev: any) {
   // checkboxOne.value = ev;
+  // eslint-disable-next-line no-console
   console.log(ev)
 }
 </script>

packages/radix-vue/src/Listbox/Listbox.test.ts

@@ -206,7 +206,6 @@ describe('given multiple `true` Listbox', () => {
 })
 
 describe('given Listbox in a form', async () => {
-  let content: DOMWrapper<Element>
   let items: DOMWrapper<Element>[]
 
   const wrapper = mount({
@@ -218,7 +217,6 @@ describe('given Listbox in a form', async () => {
   })
 
   beforeEach(() => {
-    content = wrapper.find('[role=listbox]')
     items = wrapper.findAll('[role=option]')
   })
 
@@ -249,7 +247,6 @@ describe('given Listbox in a form', async () => {
 
     it('should trigger submit once', () => {
       expect(handleSubmit).toHaveBeenCalledTimes(2)
-      console.log(handleSubmit.mock.results)
       expect(handleSubmit.mock.results[1].value).toStrictEqual({ test: items[4].text() })
     })
   })

packages/radix-vue/src/Menu/story/MenuWithLabels.story.vue

@@ -61,13 +61,13 @@ const foodGroups: Array<{
         <MenuGroup v-for="(foodGroup, index) in foodGroups" :key="index">
           <MenuLabel
             v-if="foodGroup.label"
-            class="flex items-center justify-between leading-[1] cursor-default select-none whitespace-nowrap h-[25px] px-[10px] text-black rounded-[3] text-gray-400 my-2"
+            class="flex items-center justify-between leading-[1] cursor-default select-none whitespace-nowrap h-[25px] px-[10px] rounded-[3] text-gray-400 my-2"
           >
             {{ foodGroup.label }}
           </MenuLabel>
           <MenuItem
-            v-for="(food, index) in foodGroup.foods"
-            :key="index"
+            v-for="(food, foodIndex) in foodGroup.foods"
+            :key="foodIndex"
             class="flex items-center justify-between leading-[1] cursor-default select-none whitespace-nowrap h-[25px] px-[10px] text-black rounded-[3px] outline-none data-[highlighted]:bg-black data-[highlighted]:text-white data-[disabled]:text-gray-100"
             @select="handleSelect(food.value)"
           >

packages/radix-vue/src/Menu/story/_Menu.vue

@@ -5,11 +5,6 @@ import MenuWithAnchor from './_MenuWithAnchor.vue'
 
 const emits = defineEmits<MenuItemEmits>()
 
-function handleSelect(text: string) {
-  // console.log({ text })
-  // window.alert(text);
-}
-
 const foodGroups: Array<{
   label?: string
   foods: Array<{ value: string; label: string; disabled?: boolean }>
@@ -63,10 +58,10 @@ const foodGroups: Array<{
         {{ foodGroup.label }}
       </MenuLabel>
       <MenuItem
-        v-for="(food, index) in foodGroup.foods"
-        :key="index"
+        v-for="(food, i) in foodGroup.foods"
+        :key="i"
         class="flex items-center justify-between leading-[1] cursor-default select-none whitespace-nowrap h-[25px] px-[10px] text-black rounded-[3px] outline-none data-[highlighted]:bg-black data-[highlighted]:text-white data-[disabled]:text-gray-100"
-        @select="handleSelect(food.value); emits('select', $event)"
+        @select="emits('select', $event)"
       >
         {{ food.label }}
       </MenuItem>

packages/radix-vue/src/Menubar/story/_Menubar.vue

@@ -25,6 +25,7 @@ const checkboxOne = ref(false)
 const checkboxTwo = ref(false)
 const person = ref('pedro')
 function handleClick() {
+  // eslint-disable-next-line no-alert
   alert('hello!')
 }
 </script>

packages/radix-vue/src/NavigationMenu/NavigationMenu.test.ts

@@ -29,7 +29,7 @@ describe('given default NavigationMenu', () => {
     wrapper = mount(NavigationMenu, { attachTo: document.body })
 
     // @ts-expect-error simple mock
-    vi.mocked(useDebounceFn).mockImplementation((cb: (val: string) => void, delay: string) => {
+    vi.mocked(useDebounceFn).mockImplementation((cb: (val: string) => void, _delay: string) => {
       return function (arg: string) {
         cb(arg)
       }

packages/radix-vue/src/Presence/Presence.test.ts

@@ -62,7 +62,7 @@ const styles = `
 describe('given a Presence with animated content', () => {
   const wrapper = mount(defineComponent({
     components: { Presence },
-    setup: (props) => {
+    setup: (_props) => {
       const el = ref()
 
       onMounted(() => {

packages/radix-vue/src/Select/BubbleSelect.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
-import { usePrevious } from '@vueuse/core'
 import { VisuallyHidden } from '@/VisuallyHidden'
 
 interface BubbleSelectProps {
@@ -17,7 +16,6 @@ interface BubbleSelectProps {
 
 const props = defineProps<BubbleSelectProps>()
 const { value } = toRefs(props)
-const prevValue = usePrevious(value)
 const selectElement = ref<HTMLElement>()
 
 // This would bubble "change" event to form, with the target as Select element.

packages/radix-vue/src/Splitter/utils/validation.ts

@@ -28,6 +28,7 @@ export function validatePanelGroupLayout({
   else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
+    // eslint-disable-next-line no-constant-condition
     if (true) {
       console.warn(
         `WARNING: Invalid layout total size: ${nextLayout