feat(Editable): use Primitive for input to enable textarea

packages/radix-vue/src/Editable/EditableInput.vue

@@ -1,17 +1,17 @@
 <script lang="ts">
-export interface EditableInputProps {
- /** The type of the input */
- type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url'
+import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
+
+export interface EditableInputProps extends PrimitiveProps {
 }
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, watch } from 'vue'
 import { injectEditableRootContext } from './EditableRoot.vue'
 import { useKbd } from '@/shared'
 
-withDefaults(defineProps<EditableInputProps>(), {
- type: 'text',
+const props = withDefaults(defineProps<EditableInputProps>(), {
+ as: 'input',
 })
 
 const kbd = useKbd()
@@ -22,23 +22,23 @@ const disabled = computed(() => context.disabled.value)
 
 const placeholder = computed(() => context.placeholder.value?.edit)
 
-const inputRef = ref<HTMLInputElement | undefined>()
+const { primitiveElement, currentElement: inputRef } = usePrimitiveElement()
 
 onMounted(() => {
- context.inputRef.value = inputRef.value
+ context.inputRef.value = inputRef.value as HTMLInputElement
  if (context.startWithEditMode.value) {
- inputRef.value?.focus()
+ context.inputRef.value?.focus()
  if (context.selectOnFocus.value)
- inputRef.value?.select()
+ context.inputRef.value?.select()
  }
 })
 
 watch(context.isEditing, (value) => {
  if (value) {
  nextTick(() => {
- inputRef.value?.focus()
+ context.inputRef.value?.focus()
  if (context.selectOnFocus.value)
- inputRef.value?.select()
+ context.inputRef.value?.select()
  })
  }
 })
@@ -50,10 +50,10 @@ function handleSubmitKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
- <input
- ref="inputRef"
- v-model="context.modelValue.value"
- :type="type"
+ <Primitive
+ ref="primitiveElement"
+ v-bind="props"
+ :value="context.modelValue.value"
  :placeholder="placeholder"
  :disabled="disabled"
  :data-disabled="disabled ? '' : undefined"
@@ -62,7 +62,10 @@ function handleSubmitKeyDown(event: KeyboardEvent) {
  aria-label="editable input"
  :hidden="context.autoResize.value ? undefined : !context.isEditing.value"
  :style="context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined"
+ @input="context.modelValue.value = $event.target.value"
  @keydown.enter.space="handleSubmitKeyDown"
  @keydown.esc="context.cancel"
  >
+ <slot />
+ </Primitive>
 </template>

packages/radix-vue/src/Editable/EditableRoot.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
-import { createContext, useDirection } from '@/shared'
+import { createContext, useDirection, useFormControl } from '@/shared'
 import type { Direction } from '@/shared/types'
 import { DismissableLayer, type DismissableLayerEmits } from '@/DismissableLayer'
 
@@ -57,6 +57,8 @@ export interface EditableRootProps extends PrimitiveProps {
  id?: string
  /** The name of the field */
  name?: string
+ /** When `true`, indicates that the user must set the value before the owning form can be submitted. */
+ required?: boolean
 }
 
 export type EditableRootEmits = Omit<DismissableLayerEmits, 'escapeKeyDown'> & {
@@ -74,18 +76,23 @@ export const [injectEditableRootContext, provideEditableRootContext]
 
 <script setup lang="ts">
 import { type Ref, computed, ref, toRefs } from 'vue'
-import { Primitive } from '@/Primitive'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 
+defineOptions({
+ inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<EditableRootProps>(), {
- defaultValue: '',
+ defaultValue: undefined,
  as: 'div',
  disabled: false,
  submitMode: 'blur',
  activationMode: 'focus',
  selectOnFocus: false,
  placeholder: 'Enter text...',
  autoResize: false,
+ required: false,
 })
 
 const emits = defineEmits<EditableRootEmits>()
@@ -120,17 +127,22 @@ const {
  selectOnFocus,
  readonly,
  autoResize,
+ required,
 } = toRefs(props)
 
 const inputRef = ref<HTMLInputElement | undefined>()
 const dir = useDirection(propDir)
 const isEditing = ref(startWithEditMode.value ?? false)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
- defaultValue: defaultValue.value,
+ defaultValue: defaultValue.value ?? '',
  passive: (props.modelValue === undefined) as false,
 })
 
+const { primitiveElement, currentElement } = usePrimitiveElement()
+
+const isFormControl = useFormControl(currentElement)
+
 const placeholder = computed(() => {
  return typeof propPlaceholder.value === 'string' ? { edit: propPlaceholder.value, preview: propPlaceholder.value } : propPlaceholder.value
 })
@@ -207,10 +219,13 @@ provideEditableRootContext({
  @dismiss="handleDismiss"
  >
  <Primitive
+ v-bind="$attrs"
+ ref="primitiveElement"
  :as="as"
  :as-child="asChild"
  :dir="dir"
  >
+ {{ modelValue }}
  <slot
  :model-value="modelValue"
  :is-editing="isEditing"
@@ -221,4 +236,22 @@ provideEditableRootContext({
  />
  </Primitive>
  </DismissableLayer>
+
+ <input
+ v-if="isFormControl"
+ type="text"
+ tabindex="-1"
+ aria-hidden
+ :value="modelValue"
+ :name="name"
+ :disabled="disabled"
+ :required="required"
+ :style="{
+ transform: 'translateX(-100%)',
+ position: 'absolute',
+ pointerEvents: 'none',
+ opacity: 0,
+ margin: 0,
+ }"
+ >
 </template>