fix: Typo in jsdoc and docs (#882)

* chore: typos * chore: typos --hidden
radix-vue · Apr 29, 2024 · 289f522 · 289f522
1 parent f790559
commit 289f522
Show file tree

Hide file tree

Showing 44 changed files with 71 additions and 71 deletions.
diff --git a/docs/.vitepress/components/Annoucement.vue → docs/.vitepress/components/Announcement.vue b/docs/.vitepress/components/Annoucement.vue → docs/.vitepress/components/Announcement.vue
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -3,7 +3,7 @@ import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import HomePage from '../components/HomePage.vue'
 import HomePageDemo from '../components/HomePageDemo.vue'
-import Annoucement from '../components/Annoucement.vue'
+import Announcement from '../components/Announcement.vue'
 import EmbedIframe from '../components/EmbedIframe.vue'
 import ComponentPreview from '../components/ComponentPreview.vue'
 import InstallationTabs from '../components/InstallationTabs.vue'
@@ -21,7 +21,7 @@ export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
-      'home-hero-info-before': () => h(Annoucement),
+      'home-hero-info-before': () => h(Announcement),
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
       'home-features-after': () => h('div', [h(HomePageDemo), h(HomePage)]),
     })

diff --git a/docs/content/components/select.md b/docs/content/components/select.md
@@ -226,13 +226,13 @@ Renders when the item is selected. You can style this element directly, or you c
 
 ### ScrollUpButton
 
-An optional button used as an affordance to show the viewport overflow as well as functionaly enable scrolling upwards.
+An optional button used as an affordance to show the viewport overflow as well as functionally enable scrolling upwards.
 
 <!-- @include: @/meta/SelectScrollUpButton.md -->
 
 ### ScrollDownButton
 
-An optional button used as an affordance to show the viewport overflow as well as functionaly enable scrolling downwards.
+An optional button used as an affordance to show the viewport overflow as well as functionally enable scrolling downwards.
 
 <!-- @include: @/meta/SelectScrollDownButton.md -->
 
@@ -511,7 +511,7 @@ import {
 
 ### Controlling the value displayed in the trigger
 
-By default the trigger will automatically display the selected item `ItemText`'s content. You can control what appears by chosing to put things inside/outside the `ItemText` part.
+By default the trigger will automatically display the selected item `ItemText`'s content. You can control what appears by choosing to put things inside/outside the `ItemText` part.
 
 If you need more flexibility, you can control the component using `v-model` props and passing `slot` to `SelectValue`. Remember to make sure what you put in there is accessible.
 

diff --git a/docs/content/meta/CalendarRoot.md b/docs/content/meta/CalendarRoot.md
@@ -119,7 +119,7 @@
   },
   {
     'name': 'placeholder',
-    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view</p>\n',
+    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view</p>\n',
     'type': 'DateValue',
     'required': false
   },

diff --git a/docs/content/meta/DateFieldRoot.md b/docs/content/meta/DateFieldRoot.md
@@ -102,7 +102,7 @@
   },
   {
     'name': 'placeholder',
-    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view</p>\n',
+    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view</p>\n',
     'type': 'DateValue',
     'required': false
   },

diff --git a/docs/content/meta/DatePickerRoot.md b/docs/content/meta/DatePickerRoot.md
@@ -149,7 +149,7 @@
   },
   {
     'name': 'placeholder',
-    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view</p>\n',
+    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view</p>\n',
     'type': 'DateValue',
     'required': false
   },

diff --git a/docs/content/meta/DateRangeFieldRoot.md b/docs/content/meta/DateRangeFieldRoot.md
@@ -102,7 +102,7 @@
   },
   {
     'name': 'placeholder',
-    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view</p>\n',
+    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view</p>\n',
     'type': 'DateValue',
     'required': false
   },

diff --git a/docs/content/meta/DateRangePickerRoot.md b/docs/content/meta/DateRangePickerRoot.md
@@ -150,7 +150,7 @@
   },
   {
     'name': 'placeholder',
-    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view</p>\n',
+    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view</p>\n',
     'type': 'DateValue',
     'required': false
   },

diff --git a/docs/content/meta/ProgressRoot.md b/docs/content/meta/ProgressRoot.md
@@ -44,7 +44,7 @@
   },
   {
     'name': 'update:modelValue',
-    'description': '<p>Event handler called when the progres value changes</p>\n',
+    'description': '<p>Event handler called when the progress value changes</p>\n',
     'type': '[value: string[]]'
   }
 ]" />

diff --git a/docs/content/meta/RangeCalendarRoot.md b/docs/content/meta/RangeCalendarRoot.md
@@ -113,7 +113,7 @@
   },
   {
     'name': 'placeholder',
-    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view</p>\n',
+    'description': '<p>The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view</p>\n',
     'type': 'DateValue',
     'required': false
   },

diff --git a/docs/content/meta/TabsRoot.md b/docs/content/meta/TabsRoot.md
@@ -41,7 +41,7 @@
   },
   {
     'name': 'orientation',
-    'description': '<p>The orientation the tabs are layed out.\nMainly so arrow navigation is done accordingly (left &amp; right vs. up &amp; down)</p>\n',
+    'description': '<p>The orientation the tabs are laid out.\nMainly so arrow navigation is done accordingly (left &amp; right vs. up &amp; down)</p>\n',
     'type': '\'vertical\' | \'horizontal\'',
     'required': false,
     'default': '\'horizontal\''

diff --git a/docs/content/overview/accessibility.md b/docs/content/overview/accessibility.md
@@ -23,7 +23,7 @@ In addition to semantics, there are behaviors that are expected from different t
 
 ## Accessible Labels
 
-With many built-in form controls, the native HTML `label` element is designed to provide semantic meaning and context for corresponding `input` elements. For non-form control elements, or for custom controls like those provided by Radix Primitives, [WAI-ARIA provides a specification](https://www.w3.org/TR/wai-aria-1.2/#namecalculation) for how to provide accessible names and descriptions to those contols.
+With many built-in form controls, the native HTML `label` element is designed to provide semantic meaning and context for corresponding `input` elements. For non-form control elements, or for custom controls like those provided by Radix Primitives, [WAI-ARIA provides a specification](https://www.w3.org/TR/wai-aria-1.2/#namecalculation) for how to provide accessible names and descriptions to those controls.
 
 Where possible, Radix Primitives include abstractions to make labelling our controls simple. The [`Label`](../components/label) primitive is designed to work with many of our controls. Ultimately it's up to you to provide those labels so that users have the proper context when navigating your application.
 
@@ -35,7 +35,7 @@ Many complex components, like [`Tabs`](../components/tabs) and [`Dialog`](../com
 
 Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with an element and something changes as a result, it's often helpful to move focus with the interaction so that the next tab stop is logical depending on the new context of the app. And for screen reader users, moving focus often results in an announcement to convey this new context, which relies on proper labelling.
 
-In many Radix Primitives, we move focus based on the interactions a user normally takes in a given component. For example, in [`AlertDialog`](../components/alert-dialog), when the modal is opened, focus is programatically moved to a `Cancel` button element to anticipate a response to the prompt.
+In many Radix Primitives, we move focus based on the interactions a user normally takes in a given component. For example, in [`AlertDialog`](../components/alert-dialog), when the modal is opened, focus is programmatically moved to a `Cancel` button element to anticipate a response to the prompt.
 
 ::: info
 Source: [Radix UI](https://www.radix-ui.com/)

diff --git a/docs/content/utilities/slot.md b/docs/content/utilities/slot.md
@@ -45,15 +45,15 @@ Say we want to assign an `id` attribute to whatever component/element that was r
 <template>
 ```
 (You can check out
-[Vue SFC Playground](https://play.vuejs.org/#eNp9UrFOwzAQ/ZWTly4oUelWhUgFdYABKmD0EpJr45LYln1JK1X5d84OTQEB2/m9d+fnez6JlbVJ36FYisyXTlkCj9TZXGrVWuMITuBwCwNsnWlhxtLZRN2Z1o64FEkaTmGUFFKD1Fk6zuNJfCBsbVMQ8gkgq+f5xhnr0xWRU28doQelwTeG4FB4PSMoC+cUVmB6dFnKDbEx3BErrrmNjM4VO65N11RQFz2Cqm6kmF8vpMjST0XsjPa4zNLJirgS5Eujt2qX7L3RvINT0EpRslY16J4sKaO9FEuITOCKpjGHh4iR6/DqjJc1lu+/4Ht/DJgUG4ceXc/7mTgq3A5ppNcvj3jkeiJbU3UNq/8hn9GbpgseR9ltpyu2/UUX3d7HuJTevfr1kVD786OC0aAcol4KTi+s6a+nX+wukkXsk3rgLZ6TD5/oW9C895jpJZScvwUjP4IYPgAfN9Yc) and see that the `id` wasn't being inheritted.)
+[Vue SFC Playground](https://play.vuejs.org/#eNp9UrFOwzAQ/ZWTly4oUelWhUgFdYABKmD0EpJr45LYln1JK1X5d84OTQEB2/m9d+fnez6JlbVJ36FYisyXTlkCj9TZXGrVWuMITuBwCwNsnWlhxtLZRN2Z1o64FEkaTmGUFFKD1Fk6zuNJfCBsbVMQ8gkgq+f5xhnr0xWRU28doQelwTeG4FB4PSMoC+cUVmB6dFnKDbEx3BErrrmNjM4VO65N11RQFz2Cqm6kmF8vpMjST0XsjPa4zNLJirgS5Eujt2qX7L3RvINT0EpRslY16J4sKaO9FEuITOCKpjGHh4iR6/DqjJc1lu+/4Ht/DJgUG4ceXc/7mTgq3A5ppNcvj3jkeiJbU3UNq/8hn9GbpgseR9ltpyu2/UUX3d7HuJTevfr1kVD786OC0aAcol4KTi+s6a+nX+wukkXsk3rgLZ6TD5/oW9C895jpJZScvwUjP4IYPgAfN9Yc) and see that the `id` wasn't being inherited.)
 
 
 
 This would be troublesome if you want to ensure some attributes are being passed onto certain element, maybe for accessibility reason.
 
 ---
 
-Alternatively, If you use `Slot` from Radix Vue, the attributes assigned to the Slot component will be inheritted by the immediate child element, but you will no longer have access to the `Scoped Slot`,
+Alternatively, If you use `Slot` from Radix Vue, the attributes assigned to the Slot component will be inherited by the immediate child element, but you will no longer have access to the `Scoped Slot`,
 
 
 ```vue
@@ -72,7 +72,7 @@ import { Slot } from 'radix-vue'
 <!-- parent template -->
 <template>
   <Comp>
-    <!-- id will be inherrited -->
+    <!-- id will be inherited -->
     <button>...<button>
   <Comp>
 <template>

diff --git a/docs/content/utilities/use-forward-expose.md b/docs/content/utilities/use-forward-expose.md
@@ -13,7 +13,7 @@ Forward component's exposed value, props and $el.
 
 When building a component, if we have a non-single root node component, the template refs will not return the DOM element via `$el` ([read more](https://vuejs.org/api/component-instance.html#el)) , thus, we need to forward the `$el` in template ref for this component manually. Or in some case you want to target certain element as the expose element..
 
-Futhermore, this composable extend the missing exposed `props` from the template refs.
+Furthermore, this composable extend the missing exposed `props` from the template refs.
 
 ## Usage
 

diff --git a/packages/radix-vue/src/Calendar/CalendarRoot.vue b/packages/radix-vue/src/Calendar/CalendarRoot.vue
@@ -47,7 +47,7 @@ interface BaseCalendarRootProps extends PrimitiveProps {
   defaultValue?: DateValue
   /** The default placeholder date */
   defaultPlaceholder?: DateValue
-  /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view */
+  /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
   /** This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month */
   pagedNavigation?: boolean

diff --git a/packages/radix-vue/src/Calendar/story/CalendarMultiple.story.vue b/packages/radix-vue/src/Calendar/story/CalendarMultiple.story.vue
@@ -19,7 +19,7 @@ const defaultValue = new CalendarDate(2024, 2, 20)
       <Calendar :default-value="defaultValue" :number-of-months="3" />
     </Variant>
 
-    <Variant title="3 months (Paged nagivation)">
+    <Variant title="3 months (Paged navigation)">
       <Calendar :default-value="defaultValue" :number-of-months="3" paged-navigation />
     </Variant>
 

diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -216,7 +216,7 @@ function scrollSelectedValueIntoView() {
 provideComboboxRootContext({
   searchTerm,
   modelValue,
-  // @ts-expect-error igoring
+  // @ts-expect-error ignoring
   onValueChange,
   isUserInputted,
   multiple,

diff --git a/packages/radix-vue/src/DateField/DateFieldRoot.vue b/packages/radix-vue/src/DateField/DateFieldRoot.vue
@@ -37,7 +37,7 @@ export interface DateFieldRootProps extends PrimitiveProps {
   defaultValue?: DateValue
   /** The default placeholder date */
   defaultPlaceholder?: DateValue
-  /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view */
+  /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
   /** The controlled checked state of the calendar. Can be bound as `v-model`. */
   modelValue?: DateValue | undefined

diff --git a/packages/radix-vue/src/DatePicker/story/DatePickerChromatic.story.vue b/packages/radix-vue/src/DatePicker/story/DatePickerChromatic.story.vue
@@ -46,7 +46,7 @@ const modelValue = ref(defaultValue) as Ref<DateValue>
       <DatePicker :default-value="defaultValue" :number-of-months="2" />
     </Variant>
 
-    <Variant title="Multiple months (Paged nagivation)">
+    <Variant title="Multiple months (Paged navigation)">
       <DatePicker :default-value="defaultValue" :number-of-months="2" paged-navigation />
     </Variant>
   </Story>

diff --git a/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue b/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue
@@ -46,7 +46,7 @@ export interface DateRangeFieldRootProps extends PrimitiveProps {
   defaultValue?: DateRange
   /** The default placeholder date */
   defaultPlaceholder?: DateValue
-  /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programatically control the calendar view */
+  /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
   /** The controlled checked state of the calendar. Can be bound as `v-model`. */
   modelValue?: DateRange

diff --git a/packages/radix-vue/src/DateRangePicker/story/DateRangePickerChromatic.story.vue b/packages/radix-vue/src/DateRangePicker/story/DateRangePickerChromatic.story.vue
@@ -48,7 +48,7 @@ const localTimezonePlaceholder = now(getLocalTimeZone())
       <DateRangePicker :default-value="defaultValue" :number-of-months="2" />
     </Variant>
 
-    <Variant title="Multiple months (Paged nagivation)">
+    <Variant title="Multiple months (Paged navigation)">
       <DateRangePicker :default-value="defaultValue" :number-of-months="2" paged-navigation />
     </Variant>
   </Story>

diff --git a/packages/radix-vue/src/DismissableLayer/utils.ts b/packages/radix-vue/src/DismissableLayer/utils.ts
@@ -76,7 +76,7 @@ export function usePointerDownOutside(
         /**
          * On touch devices, we need to wait for a click event because browsers implement
          * a ~350ms delay between the time the user stops touching the display and when the
-         * browser executres events. We need to ensure we don't reactivate pointer-events within
+         * browser executes events. We need to ensure we don't reactivate pointer-events within
          * this timeframe otherwise the browser may execute events that should have been prevented.
          *
          * Additionally, this also lets us deal automatically with cancellations when a click event

diff --git a/packages/radix-vue/src/Listbox/ListboxRoot.vue b/packages/radix-vue/src/Listbox/ListboxRoot.vue
@@ -288,7 +288,7 @@ watch(modelValue, () => {
 
 provideListboxRootContext({
   modelValue,
-  // @ts-expect-error igoring
+  // @ts-expect-error ignoring
   onValueChange,
   multiple,
   orientation,

diff --git a/packages/radix-vue/src/Listbox/story/constants.ts b/packages/radix-vue/src/Listbox/story/constants.ts
@@ -239,7 +239,7 @@ export const countryList = [
   'Uzbekistan',
   'Vanuatu',
   'Venezuela (Bolivarian Republic of)',
-  'Viet Nam',
+  'Viet Name',
   'Virgin Islands (British)',
   'Virgin Islands (U.S.)',
   'Wallis and Futuna',

diff --git a/packages/radix-vue/src/Menu/Menu.test.ts b/packages/radix-vue/src/Menu/Menu.test.ts
@@ -44,7 +44,7 @@ describe('given a default Menu', () => {
       await nextTick()
     })
 
-    it('should have hightlighted state', () => {
+    it('should have highlighted state', () => {
       expect(firstItem.parentElement?.innerHTML).toContain('data-highlighted')
     })
 

diff --git a/packages/radix-vue/src/Menu/MenuContentImpl.vue b/packages/radix-vue/src/Menu/MenuContentImpl.vue
@@ -49,7 +49,7 @@ export interface MenuContentImplPrivateProps {
 
   /**
    * Whether focus should be trapped within the `MenuContent`
-   * @defaultValue als
+   * @defaultValue also
    */
   trapFocus?: FocusScopeProps['trapped']
 }

diff --git a/packages/radix-vue/src/NavigationMenu/story/_StoryFrame.vue b/packages/radix-vue/src/NavigationMenu/story/_StoryFrame.vue
@@ -17,7 +17,7 @@
           odio, vestibulum in dictum et,
           <a href="#example">sagittis vel nibh</a>. Fusce placerat arcu lorem, a
           scelerisque odio fringilla sit amet. Suspendisse volutpat sed diam ut
-          cursus. Nulla facilisi. Ut at volutpat nibh. Nullam justo mi,
+          cursus. Nulla facilities. Ut at volutpat nibh. Nullam justo mi,
           elementum vitae ex eu,{' '}
           <a href="#example">gravida dictum metus</a>. Morbi vulputate
           consectetur cursus. Fusce vitae nisi nunc. Suspendisse pellentesque

diff --git a/packages/radix-vue/src/PinInput/PinInputInput.vue b/packages/radix-vue/src/PinInput/PinInputInput.vue
@@ -23,7 +23,7 @@ const inputElements = computed(() => Array.from(context.inputElements!.value))
 
 const disabled = computed(() => props.disabled || context.disabled.value)
 const isOtpMode = computed(() => context.otp.value)
-const isNumbericMode = computed(() => context.type.value === 'number')
+const isNumericMode = computed(() => context.type.value === 'number')
 const isPasswordMode = computed(() => context.mask.value)
 
 const inputRef = ref()
@@ -35,7 +35,7 @@ function handleInput(event: InputEvent) {
     return
   }
 
-  if (isNumbericMode.value && !/^[0-9]*$/.test(target.value)) {
+  if (isNumericMode.value && !/^[0-9]*$/.test(target.value)) {
     target.value = target.value.replace(/\D/g, '')
     return
   }
@@ -115,7 +115,7 @@ function handleMultipleCharacter(values: string) {
   for (let i = initialIndex; i < lastIndex; i++) {
     const input = inputElements.value[i]
     const value = values[i - initialIndex]
-    if (isNumbericMode.value && !/^[0-9]*$/.test(value))
+    if (isNumericMode.value && !/^[0-9]*$/.test(value))
       continue
 
     tempModelValue[i] = value
@@ -156,8 +156,8 @@ onUnmounted(() => {
     autocapitalize="none"
     :autocomplete="isOtpMode ? 'one-time-code' : 'false'"
     :type="isPasswordMode ? 'password' : 'text'"
-    :inputmode="isNumbericMode ? 'numeric' : 'text'"
-    :pattern="isNumbericMode ? '[0-9]*' : undefined"
+    :inputmode="isNumericMode ? 'numeric' : 'text'"
+    :pattern="isNumericMode ? '[0-9]*' : undefined"
     :placeholder="context.placeholder.value"
     :value="context.modelValue.value.at(index)"
     :disabled="disabled"

diff --git a/packages/radix-vue/src/Presence/story/PresenceAnimation.story.vue b/packages/radix-vue/src/Presence/story/PresenceAnimation.story.vue
@@ -45,7 +45,7 @@ watchEffect(() => {
       />
     </Variant>
 
-    <Variant title="With Mutliple Open & Close Animation">
+    <Variant title="With Multiple Open & Close Animation">
       <Animation class="multipleOpenAndCloseAnimationsClass" />
     </Variant>
 

diff --git a/packages/radix-vue/src/Presence/story/PresenceTransition.story.vue b/packages/radix-vue/src/Presence/story/PresenceTransition.story.vue
@@ -15,7 +15,7 @@ const isOpen = ref(false)
     <Variant title="With Vue Transition">
       <div>
         <button @click="isOpen = !isOpen">
-          Toogle content
+          Toggle content
         </button>
 
         <Transition>

diff --git a/packages/radix-vue/src/Primitive/Primitive.ts b/packages/radix-vue/src/Primitive/Primitive.ts
@@ -53,8 +53,8 @@ export const Primitive = defineComponent({
     const asTag = props.asChild ? 'template' : props.as
 
     // For self closing tags, don't provide default slots because of hydration issue
-    const SELT_CLOSING_TAGS = ['area', 'img', 'input']
-    if (typeof asTag === 'string' && SELT_CLOSING_TAGS.includes(asTag))
+    const SELF_CLOSING_TAGS = ['area', 'img', 'input']
+    if (typeof asTag === 'string' && SELF_CLOSING_TAGS.includes(asTag))
       return () => h(asTag, attrs)
 
     if (asTag !== 'template')