accept id as a prop where it is currently hardcoded (Vue)

tailwindlabs · Dec 2, 2022 · 21ab826 · 21ab826
1 parent 87659c3
commit 21ab826
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 123 deletions.
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -492,10 +492,12 @@ export let Combobox = defineComponent({
 
 export let ComboboxLabel = defineComponent({
   name: 'ComboboxLabel',
-  props: { as: { type: [Object, String], default: 'label' } },
+  props: {
+    as: { type: [Object, String], default: 'label' },
+    id: { type: String, default: () => `headlessui-combobox-label-${useId()}` },
+  },
   setup(props, { attrs, slots }) {
     let api = useComboboxContext('ComboboxLabel')
-    let id = `headlessui-combobox-label-${useId()}`
 
     function handleClick() {
       dom(api.inputRef)?.focus({ preventScroll: true })
@@ -507,8 +509,8 @@ export let ComboboxLabel = defineComponent({
         disabled: api.disabled.value,
       }
 
+      let { id, ...theirProps } = props
       let ourProps = { id, ref: api.labelRef, onClick: handleClick }
-      let theirProps = props
 
       return render({
         ourProps,
@@ -528,10 +530,10 @@ export let ComboboxButton = defineComponent({
   name: 'ComboboxButton',
   props: {
     as: { type: [Object, String], default: 'button' },
+    id: { type: String, default: () => `headlessui-combobox-button-${useId()}` },
   },
   setup(props, { attrs, slots, expose }) {
     let api = useComboboxContext('ComboboxButton')
-    let id = `headlessui-combobox-button-${useId()}`
 
     expose({ el: api.buttonRef, $el: api.buttonRef })
 
@@ -597,6 +599,7 @@ export let ComboboxButton = defineComponent({
         disabled: api.disabled.value,
         value: api.value.value,
       }
+      let { id, ...theirProps } = props
       let ourProps = {
         ref: api.buttonRef,
         id,
@@ -612,7 +615,6 @@ export let ComboboxButton = defineComponent({
         onKeydown: handleKeydown,
         onClick: handleClick,
       }
-      let theirProps = props
 
       return render({
         ourProps,
@@ -636,13 +638,13 @@ export let ComboboxInput = defineComponent({
     unmount: { type: Boolean, default: true },
     displayValue: { type: Function as PropType<(item: unknown) => string> },
     defaultValue: { type: String, default: undefined },
+    id: { type: String, default: () => `headlessui-combobox-input-${useId()}` },
   },
   emits: {
     change: (_value: Event & { target: HTMLInputElement }) => true,
   },
   setup(props, { emit, attrs, slots, expose }) {
     let api = useComboboxContext('ComboboxInput')
-    let id = `headlessui-combobox-input-${useId()}`
 
     let isTyping = { value: false }
 
@@ -869,6 +871,7 @@ export let ComboboxInput = defineComponent({
 
     return () => {
       let slot = { open: api.comboboxState.value === ComboboxStates.Open }
+      let { id, displayValue, ...theirProps } = props
       let ourProps = {
         'aria-controls': api.optionsRef.value?.id,
         'aria-expanded': api.disabled.value
@@ -893,7 +896,6 @@ export let ComboboxInput = defineComponent({
         ref: api.inputRef,
         defaultValue: defaultValue.value,
       }
-      let theirProps = omit(props, ['displayValue'])
 
       return render({
         ourProps,

diff --git a/packages/@headlessui-vue/src/components/description/description.ts b/packages/@headlessui-vue/src/components/description/description.ts
@@ -69,16 +69,16 @@ export let Description = defineComponent({
   name: 'Description',
   props: {
     as: { type: [Object, String], default: 'p' },
+    id: { type: String, default: () => `headlessui-description-${useId()}` },
   },
   setup(myProps, { attrs, slots }) {
     let context = useDescriptionContext()
-    let id = `headlessui-description-${useId()}`
 
-    onMounted(() => onUnmounted(context.register(id)))
+    onMounted(() => onUnmounted(context.register(myProps.id)))
 
     return () => {
       let { name = 'Description', slot = ref({}), props = {} } = context
-      let theirProps = myProps
+      let { id, ...theirProps } = myProps
       let ourProps = {
         ...Object.entries(props).reduce(
           (acc, [key, value]) => Object.assign(acc, { [key]: unref(value) }),

diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -77,6 +77,7 @@ export let Dialog = defineComponent({
     unmount: { type: Boolean, default: true },
     open: { type: [Boolean, String], default: Missing },
     initialFocus: { type: Object as PropType<HTMLElement | null>, default: null },
+    id: { type: String, default: () => `headlessui-dialog-${useId()}` },
   },
   emits: { close: (_close: boolean) => true },
   setup(props, { emit, attrs, slots, expose }) {
@@ -165,8 +166,6 @@ export let Dialog = defineComponent({
       slot: computed(() => ({ open: open.value })),
     })
 
-    let id = `headlessui-dialog-${useId()}`
-
     let titleId = ref<StateDefinition['titleId']['value']>(null)
 
     let api = {
@@ -284,6 +283,7 @@ export let Dialog = defineComponent({
     })
 
     return () => {
+      let { id, open: _, initialFocus, ...theirProps } = props
       let ourProps = {
         // Manually passthrough the attributes, because Vue can't automatically pass
         // it to the underlying div because of all the wrapper components below.
@@ -295,7 +295,6 @@ export let Dialog = defineComponent({
         'aria-labelledby': titleId.value,
         'aria-describedby': describedby.value,
       }
-      let { open: _, initialFocus, ...theirProps } = props
 
       let slot = { open: dialogState.value === DialogStates.Open }
 
@@ -342,10 +341,10 @@ export let DialogOverlay = defineComponent({
   name: 'DialogOverlay',
   props: {
     as: { type: [Object, String], default: 'div' },
+    id: { type: String, default: () => `headlessui-dialog-overlay-${useId()}` },
   },
   setup(props, { attrs, slots }) {
     let api = useDialogContext('DialogOverlay')
-    let id = `headlessui-dialog-overlay-${useId()}`
 
     function handleClick(event: MouseEvent) {
       if (event.target !== event.currentTarget) return
@@ -355,12 +354,12 @@ export let DialogOverlay = defineComponent({
     }
 
     return () => {
+      let { id, ...theirProps } = props
       let ourProps = {
         id,
         'aria-hidden': true,
         onClick: handleClick,
       }
-      let theirProps = props
 
       return render({
         ourProps,
@@ -380,11 +379,11 @@ export let DialogBackdrop = defineComponent({
   name: 'DialogBackdrop',
   props: {
     as: { type: [Object, String], default: 'div' },
+    id: { type: String, default: () => `headlessui-dialog-backdrop-${useId()}` },
   },
   inheritAttrs: false,
   setup(props, { attrs, slots, expose }) {
     let api = useDialogContext('DialogBackdrop')
-    let id = `headlessui-dialog-backdrop-${useId()}`
     let internalBackdropRef = ref(null)
 
     expose({ el: internalBackdropRef, $el: internalBackdropRef })
@@ -398,7 +397,7 @@ export let DialogBackdrop = defineComponent({
     })
 
     return () => {
-      let theirProps = props
+      let { id, ...theirProps } = props
       let ourProps = {
         id,
         ref: internalBackdropRef,
@@ -427,10 +426,10 @@ export let DialogPanel = defineComponent({
   name: 'DialogPanel',
   props: {
     as: { type: [Object, String], default: 'div' },
+    id: { type: String, default: () => `headlessui-dialog-panel-${useId()}` },
   },
   setup(props, { attrs, slots, expose }) {
     let api = useDialogContext('DialogPanel')
-    let id = `headlessui-dialog-panel-${useId()}`
 
     expose({ el: api.panelRef, $el: api.panelRef })
 
@@ -439,12 +438,12 @@ export let DialogPanel = defineComponent({
     }
 
     return () => {
+      let { id, ...theirProps } = props
       let ourProps = {
         id,
         ref: api.panelRef,
         onClick: handleClick,
       }
-      let theirProps = props
 
       return render({
         ourProps,
@@ -464,19 +463,19 @@ export let DialogTitle = defineComponent({
   name: 'DialogTitle',
   props: {
     as: { type: [Object, String], default: 'h2' },
+    id: { type: String, default: () => `headlessui-dialog-title-${useId()}` },
   },
   setup(props, { attrs, slots }) {
     let api = useDialogContext('DialogTitle')
-    let id = `headlessui-dialog-title-${useId()}`
 
     onMounted(() => {
-      api.setTitleId(id)
+      api.setTitleId(props.id)
       onUnmounted(() => api.setTitleId(null))
     })
 
     return () => {
+      let { id, ...theirProps } = props
       let ourProps = { id }
-      let theirProps = props
 
       return render({
         ourProps,