chore: fix lint issues

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/Calendar/story/CalendarValidation.story.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import Calendar from './_DummyCalendar.vue'
 import type { CalendarRootProps } from '../'
-import { CalendarDate, type DateValue, isWeekend } from '@internationalized/date'
-import { ref } from 'vue'
+import { CalendarDate, isWeekend } from '@internationalized/date'
 
 const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
   return isWeekend(date, 'en')
@@ -11,9 +10,7 @@ const isDateDisabled: CalendarRootProps['isDateUnavailable'] = (date) => {
   return date.day > 20
 }
 
-const modelValue = ref<DateValue>()
 const defaultValue = new CalendarDate(2024, 2, 14)
-const placeholder = new CalendarDate(2024, 4, 14)
 const minValue = new CalendarDate(2024, 2, 12)
 const maxValue = new CalendarDate(2024, 2, 20)
 </script>

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/Combobox/story/ComboboxMultiple.story.vue

@@ -17,6 +17,7 @@ const v = ref([people[0]])
 const filteredPeople = computed(() => people.filter(i => i.name.toLowerCase().includes(searchTerm.value.toLowerCase())))
 
 function handleUpdate(ev: any) {
+  // eslint-disable-next-line no-console
   console.log(ev)
 }
 </script>

packages/radix-vue/src/Combobox/story/ComboboxObject.story.vue

@@ -23,6 +23,7 @@ function filterFunction(list: any[], term: string) {
 }
 
 function handleUpdate(ev: any) {
+  // eslint-disable-next-line no-console
   console.log(ev)
 }
 </script>

packages/radix-vue/src/ContextMenu/story/ContextMenu.story.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/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/DatePicker/story/DatePickerGranular.story.vue

@@ -1,13 +1,5 @@
 <script setup lang="ts">
 import DatePicker from './_DummyDatePicker.vue'
-
-import { CalendarDate, type DateValue } from '@internationalized/date'
-import { type Ref, ref } from 'vue'
-
-const defaultValue = new CalendarDate(2024, 2, 20)
-const modelValue = ref(defaultValue) as Ref<DateValue>
-
-const placeholder = new CalendarDate(2024, 4, 1)
 </script>
 
 <template>

packages/radix-vue/src/DatePicker/story/DatePickerValidation.story.vue

@@ -2,10 +2,8 @@
 import DatePicker from './_DummyDatePicker.vue'
 
 import { CalendarDate, type DateValue, isWeekend } from '@internationalized/date'
-import { type Ref, ref } from 'vue'
 
 const defaultValue = new CalendarDate(2024, 2, 20)
-const modelValue = ref(defaultValue) as Ref<DateValue>
 
 const minValue = new CalendarDate(2024, 2, 14)
 const maxValue = new CalendarDate(2024, 2, 28)

packages/radix-vue/src/DateRangePicker/story/DateRangePickerChromatic.story.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { CalendarDateTime, type DateValue, getLocalTimeZone, now } from '@internationalized/date'
+import { CalendarDateTime, type DateValue } from '@internationalized/date'
 import DateRangePicker from './_DummyDateRangePicker.vue'
 import { type Ref, ref } from 'vue'
 
 const defaultValue = { start: new CalendarDateTime(2024, 2, 20), end: new CalendarDateTime(2024, 2, 27) }
 const modelValue = ref(defaultValue) as Ref<{ start: DateValue; end: DateValue }>
-
-const defaultPlaceholder = new CalendarDateTime(2023, 10, 11, 12, 30)
-const localTimezonePlaceholder = now(getLocalTimeZone())
 </script>
 
 <template>

packages/radix-vue/src/DateRangePicker/story/DateRangePickerGranular.story.vue

@@ -1,14 +1,7 @@
 <script setup lang="ts">
 import DateRangePicker from './_DummyDateRangePicker.vue'
-
-import { CalendarDate, type DateValue } from '@internationalized/date'
-import { type Ref, ref } from 'vue'
-
-const defaultValue = new CalendarDate(2024, 2, 20)
-const modelValue = ref(defaultValue) as Ref<DateValue>
-
-const placeholder = new CalendarDate(2024, 4, 1)
 </script>
+i
 
 <template>
   <Story title="Date Range Picker/Granular" :layout="{ type: 'grid', width: '50%', iframe: false }">

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/DismissableLayerBasic.story.vue

@@ -7,6 +7,7 @@ import { FocusScope } from '@/FocusScope'
 const open = ref(false)
 
 function handleClick() {
+  // eslint-disable-next-line no-console
   console.log('click')
 }
 

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

@@ -5,6 +5,7 @@ import { DismissableLayer } from '../'
 import { ref } from 'vue'
 
 function handleAlert() {
+  // eslint-disable-next-line no-alert
   window.alert('Alert')
 }
 

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

@@ -2,6 +2,7 @@
 import DummyPopover from './_DummyPopover.vue'
 
 function handleAlert() {
+  // eslint-disable-next-line no-alert
   window.alert('Alert')
 }
 </script>

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/MenuRadioItems.story.vue

@@ -15,6 +15,7 @@ const files = ['README.md', 'index.js', 'page.css']
 const selectedFiles = ref(files[1])
 
 function handleSelect(text: string) {
+  // eslint-disable-next-line no-console
   console.log({ text })
 }
 </script>

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

@@ -3,7 +3,9 @@ import { MenuItem, MenuSeparator } from '..'
 import MenuWithAnchor from './_MenuWithAnchor.vue'
 
 function handleSelect(text: string) {
+  // eslint-disable-next-line no-console
   console.log({ text })
+  // eslint-disable-next-line no-alert
   window.alert(text)
 }
 </script>

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

@@ -5,6 +5,7 @@ import MenuWithAnchor from './_MenuWithAnchor.vue'
 import Submenu from './_Submenu.vue'
 
 function handleSelect(text: string) {
+  // eslint-disable-next-line no-console
   console.log({ text })
 }