base-ui-vue 0.1.0 → 0.2.0

package/src/utils/useControllableState.ts

@@ -1,5 +1,17 @@
+/* eslint-disable node/prefer-global/process */
 import type { Ref } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { error } from './error'
+
+type AnyFunction = (...args: any[]) => any
+type NonFunction<T> = T extends AnyFunction ? never : T
+type Getter<T> = () => T
+type Updater<T> = (prevValue: T) => T
+type MaybeGetter<T> = T | Getter<T>
+
+function resolveValue<T>(value: MaybeGetter<T>): T {
+  return typeof value === 'function' ? (value as Getter<T>)() : value
+}
 
 export interface UseControllableStateParameters<T> {
   /**
@@ -9,35 +21,87 @@ export interface UseControllableStateParameters<T> {
   /**
    * The default value used when uncontrolled.
    */
-  default: T
+  default: MaybeGetter<T>
+  /**
+   * The component name displayed in warnings.
+   */
+  name?: string
+  /**
+   * The name of the state variable displayed in warnings.
+   * @default 'value'
+   */
+  state?: string
 }
 
 export interface UseControllableStateReturnValue<T> {
   value: Readonly<Ref<T>>
-  setValue: (next: T) => void
+  setValue: (next: T | Updater<T>) => void
 }
 
 /**
- * Manages controlled / uncontrolled state following the same semantics as
- * React's `useControlled` hook.
- *
+ * Manages controlled / uncontrolled state
  * - When `controlled()` returns a non-`undefined` value the component is
  *   considered **controlled** and the internal state is ignored.
  * - When `controlled()` returns `undefined` the component is **uncontrolled**
  *   and the internal ref drives the value.
  */
 export function useControllableState<T>(
-  params: UseControllableStateParameters<T>,
-): UseControllableStateReturnValue<T> {
-  const internalValue = ref<T>(params.default) as Ref<T>
+  params: UseControllableStateParameters<NonFunction<T>>,
+): UseControllableStateReturnValue<NonFunction<T>> {
+  type State = NonFunction<T>
+
+  const stateName = params.state ?? 'value'
+  const componentName = params.name ?? 'component'
 
-  const value = computed<T>(() => {
-    const c = params.controlled()
-    return c !== undefined ? c : internalValue.value
+  const controlledValue = computed<State | undefined>(() => params.controlled())
+  const defaultValue = computed<State>(() => resolveValue(params.default))
+  const isControlled = ref(controlledValue.value !== undefined)
+
+  const internalValue = ref<State>(defaultValue.value) as Ref<State>
+
+  const value = computed<State>(() => {
+    return isControlled.value
+      ? controlledValue.value as State
+      : internalValue.value
   })
 
-  function setValue(next: T) {
-    internalValue.value = next
+  if (process.env.NODE_ENV !== 'production') {
+    const initialDefaultValue = JSON.stringify(defaultValue.value)
+
+    watch(controlledValue, (nextControlledValue) => {
+      const nextIsControlled = nextControlledValue !== undefined
+
+      if (isControlled.value !== nextIsControlled) {
+        error(
+          `A component is changing the ${isControlled.value ? '' : 'un'}controlled ${stateName} state of ${componentName} to be ${isControlled.value ? 'un' : ''}controlled.`,
+          'Elements should not switch from uncontrolled to controlled (or vice versa).',
+          `Decide between using a controlled or uncontrolled ${componentName} element for the lifetime of the component.`,
+          'The nature of the state is determined during the first render. It\'s considered controlled if the value is not `undefined`.',
+        )
+      }
+    })
+
+    watch(defaultValue, (nextDefaultValue) => {
+      if (
+        !isControlled.value
+        && JSON.stringify(nextDefaultValue) !== initialDefaultValue
+      ) {
+        error(
+          `A component is changing the default ${stateName} state of an uncontrolled ${componentName} after being initialized.`,
+          `To suppress this warning opt to use a controlled ${componentName}.`,
+        )
+      }
+    })
+  }
+
+  function setValue(next: State | Updater<State>) {
+    if (isControlled.value) {
+      return
+    }
+
+    internalValue.value = typeof next === 'function'
+      ? (next as Updater<State>)(internalValue.value)
+      : next
   }
 
   return { value, setValue }

package/src/utils/useFocusableWhenDisabled.ts

@@ -53,7 +53,12 @@ export function useFocusableWhenDisabled(
 
     const additionalProps = {
       onKeydown(event: KeyboardEvent) {
-        if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
+        if (
+          disabled
+          && focusableWhenDisabled
+          && !composite
+          && event.key !== 'Tab'
+        ) {
           event.preventDefault()
         }
       },

package/src/utils/useMergedRefs.ts

@@ -1,4 +1,5 @@
 import type { ComponentPublicInstance, Ref } from 'vue'
+import { unref } from 'vue'
 
 type Cleanup = () => void
 type MaybeRef<T>
@@ -44,8 +45,8 @@ export function useMergedRefs<T = Element>(...refs: MaybeRef<T>[]) {
 
   return (el: Element | ComponentPublicInstance | null) => {
     // Vue template refs on components return ComponentPublicInstance, not the DOM element.
-    // Extract the root element if it's a component instance.
-    const instance = (el && '$el' in el ? el.$el : el) as T | null
+    // Extract the focusable/root element if it's a component instance.
+    const instance = resolveRefTarget<T>(el)
 
     if (instance != null) {
       // Mount / update: set all refs and collect cleanup callbacks
@@ -89,3 +90,26 @@ export function useMergedRefs<T = Element>(...refs: MaybeRef<T>[]) {
     }
   }
 }
+
+function resolveRefTarget<T>(el: Element | ComponentPublicInstance | null) {
+  if (el == null) {
+    return null
+  }
+
+  if (el instanceof Element) {
+    return el as T
+  }
+
+  if (typeof el === 'object' && 'element' in el) {
+    const exposedElement = unref(el.element)
+    if (exposedElement instanceof Element) {
+      return exposedElement as T
+    }
+  }
+
+  if ('$el' in el) {
+    return el.$el as T | null
+  }
+
+  return el as T
+}

package/src/utils/useRegisteredLabelId.ts

@@ -0,0 +1,21 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, toValue, watchSyncEffect } from 'vue'
+import { useBaseUiId } from './useBaseUiId'
+
+export function useRegisteredLabelId(
+  idProp: MaybeRefOrGetter<string | undefined>,
+  setLabelId: (id: string | undefined) => void,
+) {
+  const generatedId = useBaseUiId()
+  const id = computed(() => toValue(idProp) ?? generatedId)
+
+  watchSyncEffect((onCleanup) => {
+    setLabelId(id.value)
+
+    onCleanup(() => {
+      setLabelId(undefined)
+    })
+  })
+
+  return id
+}

package/src/utils/valueToPercent.ts

@@ -0,0 +1,7 @@
+export function valueToPercent(value: number, min: number, max: number) {
+  if (max === min) {
+    return 0
+  }
+
+  return ((value - min) * 100) / (max - min)
+}

package/src/utils/visuallyHidden.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'vue'
+
+const visuallyHiddenBase: CSSProperties = {
+  clipPath: 'inset(50%)',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  border: 0,
+  padding: 0,
+  width: 1,
+  height: 1,
+  margin: -1,
+}
+
+export const visuallyHidden: CSSProperties = {
+  ...visuallyHiddenBase,
+  position: 'fixed',
+  top: 0,
+  left: 0,
+}
+
+export const visuallyHiddenInput: CSSProperties = {
+  ...visuallyHiddenBase,
+  position: 'absolute',
+}

package/dist/direction-provider/DirectionContext.cjs

@@ -1,26 +0,0 @@
-let vue = require("vue");
-
-//#region src/direction-provider/DirectionContext.ts
-/**
-* @internal
-*/
-const directionContextKey = Symbol("DirectionContext");
-function useDirection() {
-	const context = (0, vue.inject)(directionContextKey, void 0);
-	return (0, vue.computed)(() => context?.direction.value ?? "ltr");
-}
-
-//#endregion
-Object.defineProperty(exports, 'directionContextKey', {
-  enumerable: true,
-  get: function () {
-    return directionContextKey;
-  }
-});
-Object.defineProperty(exports, 'useDirection', {
-  enumerable: true,
-  get: function () {
-    return useDirection;
-  }
-});
-//# sourceMappingURL=DirectionContext.cjs.map

package/dist/direction-provider/DirectionContext.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"DirectionContext.cjs","names":[],"sources":["../../src/direction-provider/DirectionContext.ts"],"sourcesContent":[],"mappings":";;;;;;AAYA,MAAa,sBAAsB,OACjC,mBACD;AAUD,SAAgB,eAA2C;CACzD,MAAM,0BAAiB,qBAAqB,OAAU;AAEtD,gCAAsB,SAAS,UAAU,SAAS,MAAM"}

package/dist/direction-provider/DirectionContext.js

@@ -1,15 +0,0 @@
-import { computed, inject } from "vue";
-
-//#region src/direction-provider/DirectionContext.ts
-/**
-* @internal
-*/
-const directionContextKey = Symbol("DirectionContext");
-function useDirection() {
-	const context = inject(directionContextKey, void 0);
-	return computed(() => context?.direction.value ?? "ltr");
-}
-
-//#endregion
-export { directionContextKey, useDirection };
-//# sourceMappingURL=DirectionContext.js.map

package/dist/direction-provider/DirectionContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DirectionContext.js","names":[],"sources":["../../src/direction-provider/DirectionContext.ts"],"sourcesContent":[],"mappings":";;;;;;AAYA,MAAa,sBAAsB,OACjC,mBACD;AAUD,SAAgB,eAA2C;CACzD,MAAM,UAAU,OAAO,qBAAqB,OAAU;AAEtD,QAAO,eAAe,SAAS,UAAU,SAAS,MAAM"}