8000 fix useTemplateRef by xvaara · Pull Request #2361 · bootstrap-vue-next/bootstrap-vue-next · GitHub
[go: up one dir, main page]
Skip to content

fix useTemplateRef #2361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 20, 2024
Merged

fix useTemplateRef #2361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c9708e6
fix few refs
xvaara Nov 20, 2024
6cedefa
change all the refs to include _ at the begining
xvaara Nov 20, 2024
6d7b133
fix few more
xvaara Nov 20, 2024
10cb40f
missed one
xvaara Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<BTransition :no-fade="!props.fade" :trans-props="{enterToClass: 'show'}">
<div
v-if="isAlertVisible"
ref="element"
ref="_element"
class="alert"
role="alert"
aria-live="polite"
Expand Down Expand Up @@ -63,7 +63,7 @@ const slots = defineSlots<{
default?: (props: Record<string, never>) => any
}>()

const element = useTemplateRef<HTMLElement>('element')
const element = useTemplateRef<HTMLElement>('_element')

const modelValue = defineModel<Exclude<BAlertProps['modelValue'], undefined>>({default: false})

Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BButton/BButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<component
:is="computedTag"
ref="element"
ref="_element"
class="btn"
v-bind="linkProps"
:class="computedClasses"
Expand Down Expand Up @@ -97,7 +97,7 @@ const emit = defineEmits<{
click: [value: MouseEvent]
}>()

const element = useTemplateRef<HTMLElement | null>('element')
const element = useTemplateRef<HTMLElement>('_element')

const pressedValue = defineModel<BButtonProps['pressed']>('pressed', {default: undefined})

Expand Down
17 changes: 11 additions & 6 deletions packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<template>
<div :id="computedId" ref="element" class="carousel slide pointer-event" :class="computedClasses">
<div
:id="computedId"
ref="_element"
class="carousel slide pointer-event"
:class="computedClasses"
>
<div
v-if="props.indicators"
class="carousel-indicators"
Expand All @@ -21,7 +26,7 @@
/>
</div>

<div ref="relatedTarget" class="carousel-inner">
<div ref="_relatedTarget" class="carousel-inner">
<TransitionGroup
:enter-from-class="enterClasses"
:enter-active-class="enterClasses"
Expand All @@ -39,7 +44,7 @@
v-for="(slide, i) in slides"
v-show="i === modelValue"
:key="i"
ref="slideValues"
ref="_slideValues"
:class="{active: i === modelValue && isTransitioning === false}"
:style="props.noAnimation && {transition: 'none'}"
/>
Expand Down Expand Up @@ -112,7 +117,7 @@ const buttonOwnership = useId(undefined, 'carousel-button-ownership')

const modelValue = defineModel<Exclude<BCarouselProps['modelValue'], undefined>>({default: 0})

const slideValues = useTemplateRef<null | InstanceType<typeof BCarouselSlide>[]>('slideValues')
const slideValues = useTemplateRef<InstanceType<typeof BCarouselSlide>[]>('_slideValues')

const touchThresholdNumber = useToNumber(() => props.touchThreshold)
const slideInterval = ref<Numberish | null>(null)
Expand All @@ -125,8 +130,8 @@ const intervalNumber = useToNumber(() => slideInterval.value ?? props.interval)
const isTransitioning = ref(false)
const rideStarted = ref(false)
const direction = ref(true)
const relatedTarget = useTemplateRef<HTMLElement>('relatedTarget')
const element = useTemplateRef<HTMLElement>('element')
const relatedTarget = useTemplateRef<HTMLElement>('_relatedTarget')
const element = useTemplateRef<HTMLElement>('_element')
const previousModelValue = ref(modelValue.value)

const isHovering = useElementHover(element)
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
:is="props.tag"
v-show="showRef"
:id="computedId"
ref="element"
ref="_element"
class="collapse"
:class="computedClasses"
:is-nav="props.isNav"
Expand Down Expand Up @@ -93,7 +93,7 @@ const modelValue = defineModel<Exclude<BCollapseProps['modelValue'], undefined>>

const computedId = useId(() => props.id, 'collapse')

const element = useTemplateRef<HTMLElement>('element')
const element = useTemplateRef<HTMLElement>('_element')

let inCollapse = false
const onEnter = (el: Element) => {
Expand Down
15 changes: 7 additions & 8 deletions packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<template>
<ConditionalWrapper
ref="wrapper"
:skip="inInputGroup || props.noWrapper"
:class="computedClasses"
:role="inButtonGroupAttributes?.role"
>
<BButton
:id="computedId"
ref="splitButton"
ref="_splitButton"
:variant="props.splitVariant || props.variant"
:size="props.size"
:class="buttonClasses"
F438 Expand All @@ -25,7 +24,7 @@
<BButton
v-if="props.split"
:id="computedId + '-split'"
ref="button"
ref="_button"
:variant="props.variant"
:size="props.size"
:disabled="props.disabled"
Expand All @@ -49,7 +48,7 @@
<ul
v-show="showRef"
:id="computedId + '-menu'"
ref="floating"
ref="_floating"
:style="[floatingStyles, sizeStyles]"
class="dropdown-menu overflow-auto"
:class="[props.menuClass, computedMenuClasses]"
Expand Down Expand Up @@ -86,6 +85,7 @@ import {
provide,
ref,
toRef,
useTemplateRef,
watch,
} from 'vue'
import {useDefaults} from '../../composables/useDefaults'
Expand Down Expand Up @@ -177,10 +177,9 @@ const computedOffset = computed(() =>
)
const offsetToNumber = useToNumber(computedOffset)

const floating = ref<HTMLElement | null>(null)
const button = ref<HTMLElement | null>(null)
const splitButton = ref<HTMLElement | null>(null)
const wrapper = ref<HTMLElement | null>(null)
const floating = useTemplateRef<HTMLElement>('_floating')
const button = useTemplateRef<HTMLElement>('_button')
const splitButton = useTemplateRef<HTMLElement>('_splitButton')

const boundary = computed<Boundary | undefined>(() =>
isBoundary(props.boundary) ? props.boundary : undefined
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BForm/BForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<form :id="props.id" ref="element" :novalidate="props.novalidate" :class="computedClasses">
<form :id="props.id" ref="_element" :novalidate="props.novalidate" :class="computedClasses">
<slot />
</form>
</template>
Expand All @@ -17,7 +17,7 @@ const _props = withDefaults(defineProps<BFormProps>(), {
})
const props = useDefaults(_props, 'BForm')

const element = useTemplateRef<HTMLElement>('element')
const element = useTemplateRef<HTMLElement>('_element')

defineSlots<{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
>
<input
:id="computedId"
ref="input"
ref="_input"
v-model="localValue"
:class="computedInputClasses"
type="checkbox"
Expand Down Expand Up @@ -94,7 +94,7 @@ const computedId = useId(() => props.id, 'form-check')

const parentData = inject(checkboxGroupKey, null)

const input = useTemplateRef<HTMLElement>('input')
const input = useTemplateRef<HTMLElement>('_input')

const {focused} = useFocus(input, {
initialValue: props.autofocus,
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
v-bind="computedAttrs"
:id="computedId"
ref="element"
ref="_element"
role="group"
:class="computedClasses"
class="bv-no-focus-ring"
Expand Down Expand Up @@ -68,7 +68,7 @@ const modelValue = defineModel<Exclude<BFormCheckboxGroupProps['modelValue'], un
const computedId = useId(() => props.id, 'checkbox')
const computedName = useId(() => props.name, 'checkbox')

const element = useTemplateRef<HTMLElement>('element')
const element = useTemplateRef<HTMLElement>('_element')

const {focused} = useFocus(element, {
initialValue: props.autofocus,
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<input
:id="computedId"
v-bind="$attrs"
ref="input"
ref="_input"
type="file"
:class="computedClasses"
:form="props.form"
Expand Down Expand Up @@ -84,7 +84,7 @@ const computedId = useId(() => props.id)

const stateClass = useStateClass(() => props.state)

const input = useTemplateRef<HTMLInputElement>('input')
const input = useTemplateRef<HTMLInputElement>('_input')

const {focused} = useFocus(input, {initialValue: props.autofocus})

Expand Down
6 changes: 3 additions & 3 deletions packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
</LabelContentTemplate.define>
<BFormRow v-if="isHorizontal">
<LabelContentTemplate.reuse />
<BCol v-bind="contentColProps" ref="content">
<BCol v-bind="contentColProps" ref="_content">
<slot
:id="computedId"
:aria-describedby="null"
Expand All @@ -73,7 +73,7 @@
</BFormRow>
<template v-else>
<LabelContentTemplate.reuse />
<div v-if="!isHorizontal && props.floating" ref="content" class="form-floating">
<div v-if="!isHorizontal && props.floating" ref="_content" class="form-floating">
<slot
:id="computedId"
:aria-describedby="null"
Expand Down Expand Up @@ -206,7 +206,7 @@ const getColProps = (props: any, prefix: string) =>
return result
}, {})

const content = useTemplateRef<HTMLElement>('content')
const content = useTemplateRef<HTMLElement>('_content')

const contentColProps = computed(() => getColProps(props, 'content'))
const labelAlignClasses = computed(() =>
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<input
:id="computedId"
ref="input"
ref="_input"
:key="forceUpdateKey"
:value="modelValue"
:class="computedClasses"
Expand Down Expand Up @@ -70,7 +70,7 @@ const [modelValue, modelModifiers] = defineModel<
set: (v) => normalizeInput(v, modelModifiers),
})

const input = useTemplateRef<HTMLInputElement>('input')
const input = useTemplateRef<HTMLInputElement>('_input')

const {computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur, forceUpdateKey} =
useFormInput(props, input, modelValue, modelModifiers)
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<input
:id="computedId"
v-bind="$attrs"
ref="input"
ref="_input"
v-model="localValue"
:class="inputClasses"
type="radio"
Expand Down Expand Up @@ -72,7 +72,7 @@ const computedId = useId(() => props.id, 'form-check')

const parentData = inject(radioGroupKey, null)

const input = useTemplateRef<HTMLElement>('input')
const input = useTemplateRef<HTMLElement>('_input')

const {focused} = useFocus(input, {
initialValue: props.autofocus,
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
v-bind="computedAttrs"
:id="computedId"
ref="element"
ref="_element"
role="radiogroup"
:class="computedClasses"
class="bv-no-focus-ring"
Expand Down Expand Up @@ -67,7 +67,7 @@ const modelValue = defineModel<Exclude<BFormRadioGroupProps['modelValue'], undef
const computedId = useId(() => props.id, 'radio')
const computedName = useId(() => props.name, 'checkbox')

const element = useTemplateRef<HTMLElement>('element')
const element = useTemplateRef<HTMLElement>('_element')

const {focused} = useFocus(element, {
initialValue: props.autofocus,
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<select
:id="computedId"
ref="input"
ref="_input"
v-model="localValue"
:class="computedClasses"
:name="props.name"
Expand Down Expand Up @@ -88,7 +88,7 @@ const selectSizeNumber = useToNumber(() => props.selectSize)

const stateClass = useStateClass(() => props.state)

const input = useTemplateRef<HTMLElement>('input')
const input = useTemplateRef<HTMLElement>('_input')

const {focused} = useFocus(input, {
initialValue: props.autofocus,
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
ref="element"
ref="_element"
class="b-form-spinbutton form-control"
:class="computedClasses"
role="group"
Expand Down Expand Up @@ -133,7 +133,7 @@ const modelValue = defineModel<Exclude<BFormSpinbuttonProps['modelValue'], undef
default: null,
})

const element = useTemplateRef<HTMLElement>('element')
const element = useTemplateRef<HTMLElement>('_element')

const {focused} = useFocus(element)

Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
<div role="group" class="d-flex">
<input
:id="_inputId"
ref="input"
ref="_input"
:disabled="props.disabled"
:value="inputValue"
:type="props.inputType"
Expand Down Expand Up @@ -200,7 +200,7 @@ const limitNumber = useToNumber(() => props.limit ?? NaN)

const stateClass = useStateClass(() => props.state)

const input = useTemplateRef<HTMLInputElement>('input')
const input = useTemplateRef<HTMLInputElement>('_input')

const {focused} = useFocus(input, {
initialValue: props.autofocus,
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
A73F
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<textarea
:id="computedId"
ref="input"
ref="_input"
:key="forceUpdateKey"
:class="computedClasses"
:name="props.name || undefined"
Expand Down Expand Up @@ -75,7 +75,7 @@ const [modelValue, modelModifiers] = defineModel<
set: (v) => normalizeInput(v, modelModifiers),
})

const input = useTemplateRef<HTMLTextAreaElement>('input')
const input = useTemplateRef<HTMLTextAreaElement>('_input')

const {computedId, forceUpdateKey, computedAriaInvalid, onInput, onChange, onBlur, focus, blur} =
useFormInput(props, input, modelValue, modelModifiers)
Expand Down
Loading
Loading
0