Maintenance: Refactor to useTemplateRef

app/frontend/apps/desktop/components/CommonActionMenu/CommonActionMenu.vue

@@ -1,7 +1,7 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { computed, ref, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 
 import type { Sizes } from '#shared/components/CommonIcon/types.ts'
 import CommonPopover from '#shared/components/CommonPopover/CommonPopover.vue'
@@ -47,8 +47,6 @@ const props = withDefaults(defineProps<Props>(), {
   noPaddedDefaultButton: true,
 })
 
-const popoverMenu = ref<InstanceType<typeof CommonPopoverMenu>>()
-
 const { popover, isOpen: popoverIsOpen, popoverTarget, toggle } = usePopover()
 
 const { actions, entity } = toRefs(props)
@@ -152,11 +150,7 @@ const variantClasses = computed(() => {
         :orientation="orientation"
         :owner="popoverTarget"
       >
-        <CommonPopoverMenu
-          ref="popoverMenu"
-          :entity="entity"
-          :popover="popover"
-        />
+        <CommonPopoverMenu :entity="entity" :popover="popover" />
       </CommonPopover>
     </template>
   </div>

app/frontend/apps/desktop/components/CommonDialog/CommonDialog.vue

@@ -2,7 +2,7 @@
 
 <script setup lang="ts">
 import { onKeyUp } from '@vueuse/core'
-import { nextTick, onMounted, ref } from 'vue'
+import { useTemplateRef, nextTick, onMounted } from 'vue'
 
 import { useTrapTab } from '#shared/composables/useTrapTab.ts'
 import stopEvent from '#shared/utils/events.ts'
@@ -45,9 +45,9 @@ const emit = defineEmits<{
   close: [cancel?: boolean]
 }>()
 
-const dialogElement = ref<HTMLElement>()
-const footerElement = ref<HTMLElement>()
-const contentElement = ref<HTMLElement>()
+const dialogElement = useTemplateRef<HTMLElement>('dialog')
+const footerElement = useTemplateRef('footer')
+const contentElement = useTemplateRef('content')
 
 const close = async (cancel?: boolean) => {
   emit('close', cancel)
@@ -92,7 +92,7 @@ onMounted(() => {
   >
     <component
       :is="wrapperTag"
-      ref="dialogElement"
+      ref="dialog"
       data-common-dialog
       class="flex flex-col gap-3 rounded-xl border border-neutral-100 bg-neutral-50 p-3 dark:border-gray-900 dark:bg-gray-500"
     >
@@ -116,14 +116,14 @@ onMounted(() => {
           @click="close()"
         />
       </div>
-      <div ref="contentElement" v-bind="$attrs" class="py-6 text-center">
+      <div ref="content" v-bind="$attrs" class="py-6 text-center">
         <slot>
           <CommonLabel size="large">{{
             $t(content, ...(contentPlaceholder || []))
           }}</CommonLabel>
         </slot>
       </div>
-      <div v-if="$slots.footer || !hideFooter" ref="footerElement">
+      <div v-if="$slots.footer || !hideFooter" ref="footer">
         <slot name="footer">
           <CommonDialogActionFooter
             v-bind="footerActionOptions"

app/frontend/apps/desktop/components/CommonFlyout/CommonFlyout.vue

@@ -11,6 +11,7 @@ import {
 import {
   computed,
   nextTick,
+  useTemplateRef,
   onMounted,
   type Ref,
   ref,
@@ -97,8 +98,6 @@ const flyoutSize = { medium: 500 }
 
 // Width control over flyout
 let flyoutContainerWidth: Ref<number>
-const commonOverlayContainer =
-  ref<InstanceType<typeof CommonOverlayContainer>>()
 
 const gap = 16 // Gap between sidebar and flyout
 
@@ -127,7 +126,7 @@ if (props.persistResizeWidth) {
   flyoutContainerWidth = ref(flyoutSize[props.size || 'medium'])
 }
 
-const resizeHandleComponent = ref<InstanceType<typeof ResizeLine>>()
+const resizeHandleInstance = useTemplateRef('resize-handle')
 
 const resizeCallback = (valueX: number) => {
   if (valueX >= flyoutMaxWidth.value) return
@@ -140,7 +139,7 @@ const activeElement = useActiveElement()
 const handleKeyStroke = (e: KeyboardEvent, adjustment: number) => {
   if (
     !flyoutContainerWidth.value ||
-    activeElement.value !== resizeHandleComponent.value?.resizeLine
+    activeElement.value !== resizeHandleInstance.value?.resizeLine
   )
     return
 
@@ -155,7 +154,7 @@ const handleKeyStroke = (e: KeyboardEvent, adjustment: number) => {
 
 const { startResizing, isResizing } = useResizeLine(
   resizeCallback,
-  resizeHandleComponent.value?.resizeLine,
+  resizeHandleInstance.value?.resizeLine,
   handleKeyStroke,
   {
     calculateFromRight: true,
@@ -189,9 +188,9 @@ onKeyUp('Escape', (e) => {
 })
 
 // Style
-const contentElement = ref<HTMLDivElement>()
-const headerElement = ref<HTMLDivElement>()
-const footerElement = ref<HTMLDivElement>()
+const contentElement = useTemplateRef('content')
+const headerElement = useTemplateRef('header')
+const footerElement = useTemplateRef('footer')
 
 const { arrivedState } = useScroll(contentElement)
 
@@ -233,7 +232,6 @@ onMounted(() => {
 <template>
   <CommonOverlayContainer
     :id="flyoutId"
-    ref="commonOverlayContainer"
     tag="aside"
     tabindex="-1"
     class="overflow-clip-x fixed bottom-0 top-0 z-40 flex max-h-dvh min-w-min flex-col border-y border-neutral-100 bg-neutral-50 ltr:right-0 ltr:rounded-l-xl ltr:border-l rtl:left-0 rtl:rounded-r-xl rtl:border-r dark:border-gray-900 dark:bg-gray-500"
@@ -246,7 +244,7 @@ onMounted(() => {
     @click-background="close()"
   >
     <header
-      ref="headerElement"
+      ref="header"
       class="sticky top-0 flex items-center border-b border-neutral-100 border-b-transparent bg-neutral-50 p-3 ltr:rounded-tl-xl rtl:rounded-tr-xl dark:bg-gray-500"
       :class="{
         'border-b-neutral-100 dark:border-b-gray-900':
@@ -276,17 +274,13 @@ onMounted(() => {
       />
     </header>
 
-    <div
-      ref="contentElement"
-      class="h-full overflow-y-scroll px-3"
-      v-bind="$attrs"
-    >
+    <div ref="content" class="h-full overflow-y-scroll px-3" v-bind="$attrs">
       <slot />
     </div>
 
     <footer
       v-if="$slots.footer || !hideFooter"
-      ref="footerElement"
+      ref="footer"
       :aria-label="$t('Side panel footer')"
       class="sticky bottom-0 border-t border-t-transparent bg-neutral-50 p-3 ltr:rounded-bl-xl rtl:rounded-br-xl dark:bg-gray-500"
       :class="{
@@ -305,7 +299,7 @@ onMounted(() => {
 
     <ResizeLine
       v-if="resizable"
-      ref="resizeHandleComponent"
+      ref="resize-handle"
       :label="$t('Resize side panel')"
       class="absolute top-2 h-[calc(100%-16px)] overflow-clip ltr:left-px ltr:-translate-x-1/2 rtl:right-px rtl:translate-x-1/2"
       orientation="vertical"

app/frontend/apps/desktop/components/CommonInlineEdit/CommonInlineEdit.vue

@@ -9,6 +9,7 @@ import {
   nextTick,
   watch,
   onMounted,
+  useTemplateRef,
 } from 'vue'
 
 import CommonLabel from '#shared/components/CommonLabel/CommonLabel.vue'
@@ -53,12 +54,12 @@ const emit = defineEmits<{
   'cancel-edit': []
 }>()
 
-const target = ref<HTMLElement>()
+const target = useTemplateRef('target')
 
 const isHoverTargetLink = ref(false)
 
 const isValid = ref(false) // default user made no changes
-const labelComponent = ref<InstanceType<typeof CommonLabel>>()
+const labelInstance = useTemplateRef('label')
 const newEditValue = ref(props.value)
 
 const isEditing = defineModel<boolean>('editing', {
@@ -168,8 +169,8 @@ useTrapTab(target)
 watch(
   () => props.value,
   () => {
-    if (props.detectLinks && labelComponent.value?.$el)
-      setupLinksHandlers(labelComponent.value?.$el)
+    if (props.detectLinks && labelInstance.value?.$el)
+      setupLinksHandlers(labelInstance.value?.$el)
   },
   {
     flush: 'post',
@@ -178,8 +179,8 @@ watch(
 
 onMounted(() => {
   nextTick(() => {
-    if (props.detectLinks && labelComponent.value?.$el)
-      setupLinksHandlers(labelComponent.value?.$el)
+    if (props.detectLinks && labelInstance.value?.$el)
+      setupLinksHandlers(labelInstance.value?.$el)
   })
 })
 
@@ -293,7 +294,7 @@ defineExpose({
       <!--   eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html   -->
       <CommonLabel
         :id="id"
-        ref="labelComponent"
+        ref="label"
         class="z-10 break-words"
         style="word-break: break-word"
         v-bind="labelAttrs"
@@ -305,7 +306,6 @@ defineExpose({
 
     <div
       v-else
-      ref="inputContainer"
       class="flex max-w-full items-center gap-2 before:absolute before:-left-[5px] before:top-1/2 before:z-0 before:h-[calc(100%+10px)] before:w-[calc(100%+10px)] before:-translate-y-1/2 before:rounded-md"
       :class="[
         { 'w-full': block },

app/frontend/apps/desktop/components/CommonInputSearch/CommonInputSearch.vue

@@ -2,7 +2,7 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { computed, shallowRef } from 'vue'
+import { useTemplateRef, computed } from 'vue'
 
 export interface CommonInputSearchProps {
   modelValue?: string
@@ -27,7 +27,7 @@ const emit = defineEmits<{
 
 const filter = useVModel(props, 'modelValue', emit)
 
-const filterInput = shallowRef<HTMLInputElement>()
+const filterInput = useTemplateRef('filter-input')
 
 const focus = () => {
   filterInput.value?.focus()
@@ -84,7 +84,7 @@ export default {
     <div class="relative inline-flex grow overflow-clip">
       <div class="grow">
         <input
-          ref="filterInput"
+          ref="filter-input"
           v-model="filter"
           v-bind="$attrs"
           :placeholder="i18n.t(placeholder)"

app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue

@@ -7,6 +7,7 @@ import {
   onKeyDown,
   useVModel,
 } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
 import {
   computed,
   type ConcreteComponent,
@@ -80,7 +81,7 @@ const emit = defineEmits<{
   'focus-filter-input': []
 }>()
 
-const dropdownElement = ref<HTMLElement>()
+const dropdownElement = useTemplateRef('dropdown')
 const localValue = useVModel(props, 'modelValue', emit)
 
 // TODO: do we really want this initial transforming of the value, when it's null?
@@ -413,7 +414,7 @@ const goToChildPage = ({
       <div
         v-if="showDropdown"
         id="common-select"
-        ref="dropdownElement"
+        ref="dropdown"
         class="fixed z-50 flex min-h-9 antialiased"
         :style="dropdownStyle"
       >

app/frontend/apps/desktop/components/CommonSimpleTable/CommonSimpleTable.vue

@@ -1,8 +1,6 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { ref } from 'vue'
-
 import CommonActionMenu from '#desktop/components/CommonActionMenu/CommonActionMenu.vue'
 import type { MenuItem } from '#desktop/components/CommonPopoverMenu/types.ts'
 
@@ -39,8 +37,6 @@ const rowBackgroundClasses = 'bg-blue-200 dark:bg-gray-700'
 const columnSeparatorClasses =
   'border-r border-neutral-100 dark:border-gray-900'
 
-const contentCells = ref()
-
 const getTooltipText = (item: TableItem, header: TableHeader) => {
   return header.truncate ? item[header.key] : undefined
 }
@@ -98,7 +94,6 @@ const getTooltipText = (item: TableItem, header: TableHeader) => {
             :header="header"
           >
             <CommonLabel
-              ref="contentCells"
               v-tooltip.truncate="getTooltipText(item, header)"
               class="inline text-black dark:text-white"
             >

app/frontend/apps/desktop/components/CommonTabManager/CommonTab.vue

@@ -1,7 +1,7 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { useTemplateRef, computed } from 'vue'
 
 interface Props {
   active?: boolean
@@ -15,7 +15,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const el = ref()
+const el = useTemplateRef('el')
 
 const colorClasses = computed(() => {
   if (props.active)

app/frontend/apps/desktop/components/CommonTabManager/CommonTabManager.vue

@@ -1,7 +1,7 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted } from 'vue'
 
 import CommonTab from '#desktop/components/CommonTabManager/CommonTab.vue'
 import type { Tab } from '#desktop/components/CommonTabManager/types.ts'
@@ -18,8 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'large',
 })
 
-const tabNodes = ref<InstanceType<typeof CommonTab>[]>()
-
 const emit = defineEmits<{
   'update:modelValue': [Tab['key'] | Tab['key'][]]
 }>()
@@ -75,7 +73,6 @@ const labelSize = computed(() => (props.size === 'large' ? 'medium' : 'small'))
     <CommonTab
       v-for="(tab, index) in tabs"
       :id="isTabMode ? `tab-label-${tab.key}` : undefined"
-      ref="tabNodes"
       :key="`${tab.key}-${index}`"
       :role="isTabMode ? 'tab' : 'option'"
       :aria-controls="isTabMode ? `tab-panel-${tab.key}` : undefined"