chore: primitive type (#271)

* chore: primitive type

* fix: export type

packages/components/toggle/src/toggle.ts

@@ -64,7 +64,7 @@ const Toggle = defineComponent({
     const originalReturn = () => h(
       Primitive.button, {
         'type': 'button',
-        'aria-pressed': state.value,
+        'aria-pressed': state.value ? 'true' : 'false',
         'data-state': state.value ? 'on' : 'off',
         'data-disabled': disabled ? '' : undefined,
         ...toggleProps,

packages/core/primitive/src/index.ts

@@ -10,3 +10,5 @@ export type {
   InstanceTypeRef,
   ComponentPublicInstanceRef,
 } from './primitive'
+
+export type { AriaAttributes } from './types'

packages/core/primitive/src/primitive.ts

@@ -17,6 +17,7 @@ import {
   onMounted,
 } from 'vue'
 import { isValidVNodeElement, renderSlotFragments } from './utils'
+import type { AriaAttributes } from './types'
 
 const NODES = [
   'a',
@@ -37,6 +38,25 @@ const NODES = [
   'ul',
 ] as const
 
+interface NodeElementTagNameMap {
+  a: HTMLAnchorElement
+  button: HTMLButtonElement
+  div: HTMLDivElement
+  form: HTMLFormElement
+  h2: HTMLHeadingElement
+  h3: HTMLHeadingElement
+  img: HTMLImageElement
+  input: HTMLInputElement
+  label: HTMLLabelElement
+  li: HTMLLIElement
+  nav: HTMLElement
+  ol: HTMLOListElement
+  p: HTMLParagraphElement
+  span: HTMLSpanElement
+  svg: SVGSVGElement
+  ul: HTMLUListElement
+}
+
 type ElementConstructor<P> =
   | (new () => { $props: P })
   | ((props: P, ...args: any) => FunctionalComponent<any, any>)
@@ -88,7 +108,7 @@ type ComponentPropsWithoutRef<
 type Primitives = {
   [E in (typeof NODES)[number]]: DefineComponent<{
     asChild?: boolean
-  }>;
+  } & IntrinsicElementAttributes[E]> & NodeElementTagNameMap[E] & AriaAttributes
 }
 
 type ElementType<T extends keyof IntrinsicElementAttributes> = Partial<

packages/core/primitive/src/types.ts

@@ -0,0 +1,198 @@
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export function wrapArray<T>(array: T[], startIndex: number) {
+  return array.map((_, index) => array[(startIndex + index) % array.length])
+}
+
+type Booleanish = boolean | 'true' | 'false'
+type Numberish = number | string
+
+// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
+export interface AriaAttributes {
+  /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
+  'aria-activedescendant'?: string
+  /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
+  'aria-atomic'?: Booleanish
+  /**
+   * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
+   * presented if they are made.
+   */
+  'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both'
+  /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
+  'aria-busy'?: Booleanish
+  /**
+   * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+   * @see aria-pressed @see aria-selected.
+   */
+  'aria-checked'?: Booleanish | 'mixed'
+  /**
+   * Defines the total number of columns in a table, grid, or treegrid.
+   * @see aria-colindex.
+   */
+  'aria-colcount'?: Numberish
+  /**
+   * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
+   * @see aria-colcount @see aria-colspan.
+   */
+  'aria-colindex'?: Numberish
+  /**
+   * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
+   * @see aria-colindex @see aria-rowspan.
+   */
+  'aria-colspan'?: Numberish
+  /**
+   * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+   * @see aria-owns.
+   */
+  'aria-controls'?: string
+  /** Indicates the element that represents the current item within a container or set of related elements. */
+  'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time'
+  /**
+   * Identifies the element (or elements) that describes the object.
+   * @see aria-labelledby
+   */
+  'aria-describedby'?: string
+  /**
+   * Identifies the element that provides a detailed, extended description for the object.
+   * @see aria-describedby.
+   */
+  'aria-details'?: string
+  /**
+   * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+   * @see aria-hidden @see aria-readonly.
+   */
+  'aria-disabled'?: Booleanish
+  /**
+   * Indicates what functions can be performed when a dragged object is released on the drop target.
+   * @deprecated in ARIA 1.1
+   */
+  'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup'
+  /**
+   * Identifies the element that provides an error message for the object.
+   * @see aria-invalid @see aria-describedby.
+   */
+  'aria-errormessage'?: string
+  /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+  'aria-expanded'?: Booleanish
+  /**
+   * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+   * allows assistive technology to override the general default of reading in document source order.
+   */
+  'aria-flowto'?: string
+  /**
+   * Indicates an element's "grabbed" state in a drag-and-drop operation.
+   * @deprecated in ARIA 1.1
+   */
+  'aria-grabbed'?: Booleanish
+  /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+  'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
+  /**
+   * Indicates whether the element is exposed to an accessibility API.
+   * @see aria-disabled.
+   */
+  'aria-hidden'?: Booleanish
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   * @see aria-errormessage.
+   */
+  'aria-invalid'?: Booleanish | 'grammar' | 'spelling'
+  /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
+  'aria-keyshortcuts'?: string
+  /**
+   * Defines a string value that labels the current element.
+   * @see aria-labelledby.
+   */
+  'aria-label'?: string
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   * @see aria-describedby.
+   */
+  'aria-labelledby'?: string
+  /** Defines the hierarchical level of an element within a structure. */
+  'aria-level'?: Numberish
+  /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
+  'aria-live'?: 'off' | 'assertive' | 'polite'
+  /** Indicates whether an element is modal when displayed. */
+  'aria-modal'?: Booleanish
+  /** Indicates whether a text box accepts multiple lines of input or only a single line. */
+  'aria-multiline'?: Booleanish
+  /** Indicates that the user may select more than one item from the current selectable descendants. */
+  'aria-multiselectable'?: Booleanish
+  /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
+  'aria-orientation'?: 'horizontal' | 'vertical'
+  /**
+   * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
+   * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
+   * @see aria-controls.
+   */
+  'aria-owns'?: string
+  /**
+   * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
+   * A hint could be a sample value or a brief description of the expected format.
+   */
+  'aria-placeholder'?: string
+  /**
+   * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+   * @see aria-setsize.
+   */
+  'aria-posinset'?: Numberish
+  /**
+   * Indicates the current "pressed" state of toggle buttons.
+   * @see aria-checked @see aria-selected.
+   */
+  'aria-pressed'?: Booleanish | 'mixed'
+  /**
+   * Indicates that the element is not editable, but is otherwise operable.
+   * @see aria-disabled.
+   */
+  'aria-readonly'?: Booleanish
+  /**
+   * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+   * @see aria-atomic.
+   */
+  'aria-relevant'?: 'additions' | 'additions text' | 'all' | 'removals' | 'text'
+  /** Indicates that user input is required on the element before a form may be submitted. */
+  'aria-required'?: Booleanish
+  /** Defines a human-readable, author-localized description for the role of an element. */
+  'aria-roledescription'?: string
+  /**
+   * Defines the total number of rows in a table, grid, or treegrid.
+   * @see aria-rowindex.
+   */
+  'aria-rowcount'?: Numberish
+  /**
+   * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
+   * @see aria-rowcount @see aria-rowspan.
+   */
+  'aria-rowindex'?: Numberish
+  /**
+   * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
+   * @see aria-rowindex @see aria-colspan.
+   */
+  'aria-rowspan'?: Numberish
+  /**
+   * Indicates the current "selected" state of various widgets.
+   * @see aria-checked @see aria-pressed.
+   */
+  'aria-selected'?: Booleanish
+  /**
+   * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+   * @see aria-posinset.
+   */
+  'aria-setsize'?: Numberish
+  /** Indicates if items in a table or grid are sorted in ascending or descending order. */
+  'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other'
+  /** Defines the maximum allowed value for a range widget. */
+  'aria-valuemax'?: Numberish
+  /** Defines the minimum allowed value for a range widget. */
+  'aria-valuemin'?: Numberish
+  /**
+   * Defines the current value for a range widget.
+   * @see aria-valuetext.
+   */
+  'aria-valuenow'?: Numberish
+  /** Defines the human readable text alternative of aria-valuenow for a range widget. */
+  'aria-valuetext'?: string
+}