base-ui-vue 0.3.0 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "base-ui-vue",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Vue port of Base UI",
   "author": "vuepont",
   "license": "MIT",

package/src/index.ts

@@ -15,11 +15,13 @@ export * from './form'
 export * from './input'
 export * from './merge-props'
 export * from './meter'
+export * from './number-field'
+export * from './otp-field'
 export * from './progress'
+export * from './scroll-area'
 export * from './separator'
 export * from './slider'
 export * from './switch'
-export * from './scroll-area'
 export * from './toggle'
 export * from './toggle-group'
 export * from './toolbar'

package/src/number-field/decrement/NumberFieldDecrement.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps, NativeButtonProps } from '../../utils/types'
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useButton } from '../../use-button/useButton'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext'
+import { useNumberFieldButton } from '../root/useNumberFieldButton'
+import { stateAttributesMapping } from '../utils/stateAttributesMapping'
+
+export type NumberFieldDecrementState = NumberFieldRootState
+
+export interface NumberFieldDecrementProps
+  extends NativeButtonProps, BaseUIComponentProps<NumberFieldDecrementState> {
+  disabled?: boolean
+}
+
+defineOptions({
+  name: 'NumberFieldDecrement',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NumberFieldDecrementProps>(), {
+  as: 'button',
+  disabled: false,
+  nativeButton: true,
+})
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const {
+  allowInputSyncRef,
+  disabled: contextDisabled,
+  formatOptionsRef,
+  getStepAmount,
+  id,
+  incrementValue,
+  inputRef,
+  inputValue,
+  minWithDefault,
+  readOnly,
+  setValue,
+  state,
+  value,
+  valueRef,
+  locale,
+  lastChangedValueRef,
+  onValueCommitted,
+} = useNumberFieldRootContext()
+
+const isMin = computed(() => value.value != null && value.value <= minWithDefault.value)
+const disabled = computed(() => props.disabled || contextDisabled.value || isMin.value)
+
+const buttonProps = useNumberFieldButton({
+  isIncrement: false,
+  inputRef,
+  inputValue: () => inputValue.value,
+  disabled: () => disabled.value,
+  readOnly: () => readOnly.value,
+  id: () => id.value,
+  setValue,
+  getStepAmount,
+  incrementValue,
+  allowInputSyncRef,
+  formatOptionsRef,
+  valueRef,
+  locale: () => locale.value,
+  lastChangedValueRef,
+  onValueCommitted,
+})
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled: () => disabled.value,
+  native: () => props.nativeButton,
+  focusableWhenDisabled: true,
+})
+
+const buttonState = computed<NumberFieldDecrementState>(() => ({
+  ...state.value,
+  disabled: disabled.value,
+}))
+
+const combinedProps = computed(() =>
+  mergeProps(buttonProps.value, attrsObject, getButtonProps()),
+)
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: buttonState,
+  props: combinedProps,
+  stateAttributesMapping,
+  defaultTagName: 'button',
+  ref: buttonRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="buttonState" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="buttonState" />
+  </component>
+</template>

package/src/number-field/group/NumberFieldGroup.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext'
+import { stateAttributesMapping } from '../utils/stateAttributesMapping'
+
+export type NumberFieldGroupState = NumberFieldRootState
+
+export interface NumberFieldGroupProps extends BaseUIComponentProps<NumberFieldGroupState> {}
+
+defineOptions({
+  name: 'NumberFieldGroup',
+  inheritAttrs: false,
+})
+
+const props = defineProps<NumberFieldGroupProps>()
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const { state } = useNumberFieldRootContext()
+
+const groupProps = computed(() => mergeProps(attrsObject, { role: 'group' }))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: groupProps,
+  stateAttributesMapping,
+  defaultTagName: 'div',
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/number-field/increment/NumberFieldIncrement.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps, NativeButtonProps } from '../../utils/types'
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useButton } from '../../use-button/useButton'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext'
+import { useNumberFieldButton } from '../root/useNumberFieldButton'
+import { stateAttributesMapping } from '../utils/stateAttributesMapping'
+
+export type NumberFieldIncrementState = NumberFieldRootState
+
+export interface NumberFieldIncrementProps
+  extends NativeButtonProps, BaseUIComponentProps<NumberFieldIncrementState> {
+  disabled?: boolean
+}
+
+defineOptions({
+  name: 'NumberFieldIncrement',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NumberFieldIncrementProps>(), {
+  as: 'button',
+  disabled: false,
+  nativeButton: true,
+})
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const {
+  allowInputSyncRef,
+  disabled: contextDisabled,
+  formatOptionsRef,
+  getStepAmount,
+  id,
+  incrementValue,
+  inputRef,
+  inputValue,
+  locale,
+  maxWithDefault,
+  readOnly,
+  setValue,
+  state,
+  value,
+  valueRef,
+  lastChangedValueRef,
+  onValueCommitted,
+} = useNumberFieldRootContext()
+
+const isMax = computed(() => value.value != null && value.value >= maxWithDefault.value)
+const disabled = computed(() => props.disabled || contextDisabled.value || isMax.value)
+
+const buttonProps = useNumberFieldButton({
+  isIncrement: true,
+  inputRef,
+  inputValue: () => inputValue.value,
+  disabled: () => disabled.value,
+  readOnly: () => readOnly.value,
+  id: () => id.value,
+  setValue,
+  getStepAmount,
+  incrementValue,
+  allowInputSyncRef,
+  formatOptionsRef,
+  valueRef,
+  locale: () => locale.value,
+  lastChangedValueRef,
+  onValueCommitted,
+})
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled: () => disabled.value,
+  native: () => props.nativeButton,
+  focusableWhenDisabled: true,
+})
+
+const buttonState = computed<NumberFieldIncrementState>(() => ({
+  ...state.value,
+  disabled: disabled.value,
+}))
+
+const combinedProps = computed(() =>
+  mergeProps(buttonProps.value, attrsObject, getButtonProps()),
+)
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: buttonState,
+  props: combinedProps,
+  stateAttributesMapping,
+  defaultTagName: 'button',
+  ref: buttonRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="buttonState" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="buttonState" />
+  </component>
+</template>

package/src/number-field/index.ts

@@ -0,0 +1,42 @@
+export { default as NumberFieldDecrement } from './decrement/NumberFieldDecrement.vue'
+export type { NumberFieldDecrementProps, NumberFieldDecrementState } from './decrement/NumberFieldDecrement.vue'
+
+export { default as NumberFieldGroup } from './group/NumberFieldGroup.vue'
+export type { NumberFieldGroupProps, NumberFieldGroupState } from './group/NumberFieldGroup.vue'
+
+export { default as NumberFieldIncrement } from './increment/NumberFieldIncrement.vue'
+export type { NumberFieldIncrementProps, NumberFieldIncrementState } from './increment/NumberFieldIncrement.vue'
+
+export { default as NumberFieldInput } from './input/NumberFieldInput.vue'
+export type { NumberFieldInputProps, NumberFieldInputState } from './input/NumberFieldInput.vue'
+
+export { default as NumberFieldRoot } from './root/NumberFieldRoot.vue'
+export type { NumberFieldRootProps, NumberFieldRootState } from './root/NumberFieldRoot.vue'
+
+export {
+  numberFieldRootContextKey,
+  useNumberFieldRootContext,
+} from './root/NumberFieldRootContext'
+export type {
+  InputMode,
+  NumberFieldRootChangeEventDetails,
+  NumberFieldRootChangeEventReason,
+  NumberFieldRootCommitEventDetails,
+  NumberFieldRootCommitEventReason,
+  NumberFieldRootContext,
+} from './root/NumberFieldRootContext'
+
+export { default as NumberFieldScrubAreaCursor } from './scrub-area-cursor/NumberFieldScrubAreaCursor.vue'
+export type {
+  NumberFieldScrubAreaCursorProps,
+  NumberFieldScrubAreaCursorState,
+} from './scrub-area-cursor/NumberFieldScrubAreaCursor.vue'
+
+export { default as NumberFieldScrubArea } from './scrub-area/NumberFieldScrubArea.vue'
+export type { NumberFieldScrubAreaProps, NumberFieldScrubAreaState } from './scrub-area/NumberFieldScrubArea.vue'
+
+export {
+  numberFieldScrubAreaContextKey,
+  useNumberFieldScrubAreaContext,
+} from './scrub-area/NumberFieldScrubAreaContext'
+export type { NumberFieldScrubAreaContext } from './scrub-area/NumberFieldScrubAreaContext'