amacocian/monica
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fix: replace ref with useTemplateRef in Vue components (#7763)

Browse Source
This commit is contained in:
Alexis Saettler
2025-07-15 17:23:49 +02:00
committed by GitHub
parent d2b29a9b4e
commit c0ef35d8b9
32 changed files with 78 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/Input.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { nextTick, onMounted, ref } from 'vue';
import { nextTick, onMounted, useTemplateRef } from 'vue';
defineProps({
modelValue: String,
@@ -7,7 +7,7 @@ defineProps({
defineEmits(['update:modelValue']);
const input = ref(null);
const input = useTemplateRef('input');
const focus = () => nextTick().then(() => input.value.focus());
onMounted(() => {
resources/js/Components/Jetstream/ConfirmsPassword.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, reactive, nextTick, computed } from 'vue';
import { ref, reactive, nextTick, computed, useTemplateRef } from 'vue';
import { usePage } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import Button from '@/Components/Button.vue';
@@ -35,7 +35,7 @@ const form = reactive({
});
const passwordInput = ref(null);
const webauthn = ref('webauthn');
const webauthn = useTemplateRef('webauthn');
const webauthnEnabled = computed(() => usePage().props.hasKey === true);
const startConfirmingPassword = () => {
resources/js/Components/Jetstream/Modal.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
const props = defineProps({
show: {
@@ -17,7 +17,7 @@ const props = defineProps({
});
const emit = defineEmits(['close']);
const dialog = ref();
const dialog = useTemplateRef('dialog');
const showSlot = ref(props.show);
watch(
resources/js/Components/Jetstream/Select.vue
+2 -2
View File
@@ -5,7 +5,7 @@ export default {
</script>
<script setup>
import { computed, onMounted, onUnmounted, ref, useAttrs } from 'vue';
import { computed, onMounted, onUnmounted, ref, useAttrs, useTemplateRef } from 'vue';
const emit = defineEmits(['update:modelValue']);
@@ -39,7 +39,7 @@ const props = defineProps({
});
const main = ref(null);
const select = ref(null);
const select = useTemplateRef('select');
const open = ref(false);
const proxySelect = computed({
resources/js/Pages/Auth/TwoFactorChallenge.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<script setup>
import { nextTick, ref } from 'vue';
import { nextTick, ref, useTemplateRef } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Layouts/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
@@ -16,8 +16,8 @@ const form = useForm({
recovery_code: '',
});
const recoveryCodeInput = ref(null);
const codeInput = ref(null);
const recoveryCodeInput = useTemplateRef('recoveryCodeInput');
const codeInput = useTemplateRef('codeInput');
const toggleRecovery = async () => {
recovery.value ^= true;
resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue';
import { ref, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import JetActionSection from '@/Components/Jetstream/ActionSection.vue';
import JetDialogModal from '@/Components/Jetstream/DialogModal.vue';
@@ -9,7 +9,7 @@ import JetInputError from '@/Components/InputError.vue';
import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
const confirmingUserDeletion = ref(false);
const passwordInput = ref(null);
const passwordInput = useTemplateRef('passwordInput');
const form = useForm({
password: '',
resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { nextTick, ref } from 'vue';
import { nextTick, ref, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import JetActionMessage from '@/Components/Jetstream/ActionMessage.vue';
import JetActionSection from '@/Components/Jetstream/ActionSection.vue';
@@ -15,7 +15,7 @@ defineProps({
});
const confirmingLogout = ref(false);
const passwordInput = ref(null);
const passwordInput = useTemplateRef('passwordInput');
const form = useForm({
password: '',
resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue';
import { useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import JetActionMessage from '@/Components/Jetstream/ActionMessage.vue';
import JetButton from '@/Components/Button.vue';
@@ -8,8 +8,8 @@ import JetInput from '@/Components/Input.vue';
import JetInputError from '@/Components/InputError.vue';
import JetLabel from '@/Components/Label.vue';
const passwordInput = ref(null);
const currentPasswordInput = ref(null);
const passwordInput = useTemplateRef('passwordInput');
const currentPasswordInput = useTemplateRef('currentPasswordInput');
const form = useForm({
current_password: '',
resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref } from 'vue';
import { ref, useTemplateRef } from 'vue';
import { router, useForm } from '@inertiajs/vue3';
import JetButton from '@/Components/Button.vue';
import JetFormSection from '@/Components/Jetstream/FormSection.vue';
@@ -22,7 +22,7 @@ const form = useForm({
});
const photoPreview = ref(null);
const photoInput = ref(null);
const photoInput = useTemplateRef('photoInput');
const updateProfileInformation = () => {
if (photoInput.value) {
resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { nextTick, ref } from 'vue';
import { nextTick, ref, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import { flash } from '@/methods';
@@ -13,7 +13,7 @@ const props = defineProps({
data: Object,
});
const nameOrder = ref(null);
const nameOrder = useTemplateRef('nameOrder');
const loadingState = ref('');
const editMode = ref(false);
const localNameOrder = ref(props.data.name_order);
resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, nextTick } from 'vue';
import { ref, nextTick, useTemplateRef } from 'vue';
import { Link } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import { flash } from '@/methods.js';
@@ -16,8 +16,8 @@ const props = defineProps({
const editedDateId = ref(0);
const createDateModalShown = ref(false);
const localDates = ref(props.data.dates);
const createForm = ref(null);
const editForm = ref([]);
const createForm = useTemplateRef('createForm');
const editForm = useTemplateRef('editForm');
const errors = ref(null);
const showCreateModal = () => {
resources/js/Pages/Vault/Contact/ImportantDates/Partials/CreateOrEditImportantDate.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<script setup>
import { useForm } from '@inertiajs/vue3';
import { nextTick, ref } from 'vue';
import { nextTick, ref, useTemplateRef } from 'vue';
import { DatePicker } from 'v-calendar';
import 'v-calendar/style.css';
import { isDark } from '@/methods.js';
@@ -17,9 +17,9 @@ const props = defineProps({
data: Object,
});
const ageInput = ref(null);
const monthInput = ref(null);
const label = ref(null);
const ageInput = useTemplateRef('ageInput');
const monthInput = useTemplateRef('monthInput');
const label = useTemplateRef('label');
const loadingState = ref(null);
const form = useForm({
resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, nextTick } from 'vue';
import { ref, nextTick, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import { flash } from '@/methods.js';
@@ -20,7 +20,7 @@ const form = useForm({
});
const createLifeMetricModalShown = ref(false);
const labelField = ref(null);
const labelField = useTemplateRef('labelField');
const loadingState = ref('');
const localLifeMetrics = ref(props.data.data);
const editedLifeMetricId = ref(0);
resources/js/Pages/Vault/Group/Edit.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { onMounted, nextTick, ref } from 'vue';
import { onMounted, nextTick, ref, useTemplateRef } from 'vue';
import { Link, router, useForm } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import Layout from '@/Layouts/Layout.vue';
@@ -21,7 +21,7 @@ const form = useForm({
});
const loadingState = ref(null);
const nameField = ref(null);
const nameField = useTemplateRef('nameField');
onMounted(() => {
nextTick().then(() => nameField.value.focus());
resources/js/Pages/Vault/Journal/Create.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { onMounted, nextTick, ref } from 'vue';
import { onMounted, nextTick, useTemplateRef } from 'vue';
import { Link, useForm } from '@inertiajs/vue3';
import Layout from '@/Layouts/Layout.vue';
import PrettyLink from '@/Shared/Form/PrettyLink.vue';
@@ -18,7 +18,7 @@ const form = useForm({
description: '',
});
const nameField = ref(null);
const nameField = useTemplateRef('nameField');
onMounted(() => {
nextTick().then(() => nameField.value.focus());
resources/js/Pages/Vault/Journal/Edit.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { onMounted, nextTick, ref } from 'vue';
import { onMounted, nextTick, useTemplateRef } from 'vue';
import { Link, useForm } from '@inertiajs/vue3';
import Layout from '@/Layouts/Layout.vue';
import PrettyLink from '@/Shared/Form/PrettyLink.vue';
@@ -18,7 +18,7 @@ const form = useForm({
description: props.data.description,
});
const nameField = ref(null);
const nameField = useTemplateRef('nameField');
onMounted(() => {
nextTick().then(() => nameField.value.focus());
resources/js/Pages/Vault/Journal/Metrics/Index.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, nextTick } from 'vue';
import { ref, nextTick, useTemplateRef } from 'vue';
import { Link, useForm } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import Layout from '@/Layouts/Layout.vue';
@@ -15,7 +15,7 @@ const props = defineProps({
const localMetrics = ref(props.data.journalMetrics);
const loadingState = ref('');
const newJournalMetric = ref(null);
const newJournalMetric = useTemplateRef('newJournalMetric');
const createJournalMetricModalShown = ref(false);
const form = useForm({
resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
+5 -5
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, nextTick } from 'vue';
import { ref, nextTick, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import draggable from 'vuedraggable';
@@ -19,10 +19,10 @@ const lifeEventCategoryId = ref(0);
const editLifeEventCategoryId = ref(0);
const editLifeEventTypeId = ref(0);
const localLifeEventCategories = ref(props.data.life_event_categories);
const newLifeEventCategory = ref(null);
const renameLifeEventCategory = ref(null);
const newLifeEventType = ref(null);
const renameLifeEventType = ref(null);
const newLifeEventCategory = useTemplateRef('newLifeEventCategory');
const renameLifeEventCategory = useTemplateRef('renameLifeEventCategory');
const newLifeEventType = useTemplateRef('newLifeEventType');
const renameLifeEventType = useTemplateRef('renameLifeEventType');
const form = useForm({
label: '',
resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, nextTick } from 'vue';
import { ref, nextTick, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import draggable from 'vuedraggable';
@@ -16,7 +16,7 @@ const loadingState = ref('');
const localMoodTrackingParameters = ref(props.data.mood_tracking_parameters);
const createMoodTrackingParametersModalShown = ref(false);
const editMoodTrackingParameterId = ref(0);
const newMoodTrackingParameter = ref(null);
const newMoodTrackingParameter = useTemplateRef('newMoodTrackingParameter');
const form = useForm({
label: '',
resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, nextTick } from 'vue';
import { ref, nextTick, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import PrettyButton from '@/Shared/Form/PrettyButton.vue';
import PrettySpan from '@/Shared/Form/PrettySpan.vue';
@@ -15,7 +15,7 @@ const loadingState = ref(false);
const createEntryModalShown = ref(false);
const editEntryId = ref(0);
const localEntries = ref(props.data.quick_fact_templates);
const newEntry = ref(null);
const newEntry = useTemplateRef('newEntry');
const form = useForm({
label: '',
resources/js/Pages/Webauthn/Partials/RegisterKey.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, nextTick, computed, onMounted } from 'vue';
import { ref, watch, nextTick, computed, onMounted, useTemplateRef } from 'vue';
import JetLabel from '@/Components/Label.vue';
import JetInput from '@/Components/Input.vue';
import JetInputError from '@/Components/InputError.vue';
@@ -17,7 +17,7 @@ const emit = defineEmits(['start', 'stop', 'register', 'update:name']);
const registering = ref(false);
const error = ref(props.errorMessage);
const nameInput = ref(null);
const nameInput = useTemplateRef('nameInput');
onMounted(() => {
props.form.reset();
resources/js/Pages/Webauthn/Partials/UpdateKey.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, nextTick } from 'vue';
import { watch, nextTick, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import JetLabel from '@/Components/Label.vue';
import JetInput from '@/Components/Input.vue';
@@ -18,7 +18,7 @@ const props = defineProps({
const emit = defineEmits(['close']);
const nameInput = ref(null);
const nameInput = useTemplateRef('nameInput');
const updateKey = () => {
form.put(route('webauthn.update', props.keyid), {
resources/js/Shared/Form/ContactSelector.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { computed, nextTick, onMounted, ref, watch, useTemplateRef } from 'vue';
import { Link, useForm } from '@inertiajs/vue3';
import { trans } from 'laravel-vue-i18n';
import Errors from '@/Shared/Form/Errors.vue';
@@ -33,7 +33,7 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue']);
const searchInput = ref(null);
const searchInput = useTemplateRef('searchInput');
const addContactMode = ref(false);
const processingSearch = ref(false);
const localContacts = ref(props.modelValue);
resources/js/Shared/Form/Dropdown.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, ref } from 'vue';
import { computed, useTemplateRef } from 'vue';
const props = defineProps({
id: {
@@ -26,7 +26,7 @@ const props = defineProps({
const emit = defineEmits(['esc-key-pressed', 'update:modelValue']);
const input = ref(null);
const input = useTemplateRef('input');
const localDropdownClasses = computed(() => {
return [
resources/js/Shared/Form/TextArea.vue
+2 -2
View File
@@ -5,7 +5,7 @@ export default {
</script>
<script setup>
import { computed, ref } from 'vue';
import { computed, ref, useTemplateRef } from 'vue';
const props = defineProps({
id: {
@@ -57,7 +57,7 @@ const props = defineProps({
const emit = defineEmits(['esc-key-pressed', 'update:modelValue']);
const displayMaxLength = ref(false);
const zone = ref(null);
const zone = useTemplateRef('zone');
const proxyValue = computed({
get() {
resources/js/Shared/Form/TextInput.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<script setup>
import { uniqueId } from 'lodash';
import { computed, onMounted, ref } from 'vue';
import { computed, onMounted, ref, useTemplateRef } from 'vue';
const props = defineProps({
id: {
@@ -41,7 +41,7 @@ const props = defineProps({
const emit = defineEmits(['esc-key-pressed', 'update:modelValue']);
const displayMaxLength = ref(false);
const input = ref(null);
const input = useTemplateRef('input');
const realId = computed(() => {
return props.id ?? uniqueId('text-input-');
resources/js/Shared/Modules/CreateLifeEvent.vue
+5 -5
View File
@@ -1,4 +1,6 @@
<script setup>
import { onMounted, ref, watch, nextTick, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { DatePicker } from 'v-calendar';
import 'v-calendar/style.css';
import PrettyButton from '@/Shared/Form/PrettyButton.vue';
@@ -8,8 +10,6 @@ import TextInput from '@/Shared/Form/TextInput.vue';
import TextArea from '@/Shared/Form/TextArea.vue';
import Avatar from '@/Shared/Avatar.vue';
import ArrowIcon from '@/Shared/Icons/ArrowIcon.vue';
import { useForm } from '@inertiajs/vue3';
import { onMounted, ref, watch, nextTick } from 'vue';
const props = defineProps({
layoutData: Object,
@@ -41,9 +41,9 @@ const modalShown = ref(false);
const addSummaryFieldShown = ref(false);
const addDescriptionFieldShown = ref(false);
const addDistanceFieldShown = ref(false);
const summaryField = ref(null);
const descriptionField = ref(null);
const distanceField = ref(null);
const summaryField = useTemplateRef('summaryField');
const descriptionField = useTemplateRef('descriptionField');
const distanceField = useTemplateRef('distanceField');
const masks = ref({
modelValue: 'YYYY-MM-DD',
});
resources/js/Shared/Modules/Loans.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { nextTick, ref } from 'vue';
import { nextTick, ref, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { flash } from '@/methods';
import { trans } from 'laravel-vue-i18n';
@@ -21,7 +21,7 @@ const props = defineProps({
data: Object,
});
const nameInput = ref(null);
const nameInput = useTemplateRef('nameInput');
const loadingState = ref('');
const createLoanModalShown = ref(false);
const localLoans = ref(props.data.loans);
resources/js/Shared/Modules/QuickFacts.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, nextTick } from 'vue';
import { ref, nextTick, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import Loading from '@/Shared/Loading.vue';
import HoverMenu from '@/Shared/HoverMenu.vue';
@@ -25,7 +25,7 @@ const createQuickFactModalShown = ref(false);
const openState = ref(props.data.show_quick_facts);
const localQuickFacts = ref(props.data.quick_facts.quick_facts);
const localTemplate = ref(props.data.quick_facts.template);
const contentField = ref(null);
const contentField = useTemplateRef('contentField');
const editedQuickFactId = ref(null);
const toggle = () => {
resources/js/Shared/Modules/Reminders.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<script setup>
import { nextTick, ref } from 'vue';
import { nextTick, ref, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { flash } from '@/methods';
import { trans } from 'laravel-vue-i18n';
@@ -17,8 +17,8 @@ const props = defineProps({
data: Object,
});
const label = ref(null);
const labels = ref([]);
const label = useTemplateRef('label');
const labels = useTemplateRef('labels');
const loadingState = ref('');
const addReminderModalShown = ref(false);
const localReminders = ref(props.data.reminders);
resources/js/Shared/Modules/TaskItems/CreateOrEditTask.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { nextTick, ref } from 'vue';
import { nextTick, ref, useTemplateRef } from 'vue';
import { useForm } from '@inertiajs/vue3';
import { DatePicker } from 'v-calendar';
import 'v-calendar/style.css';
@@ -16,7 +16,7 @@ const props = defineProps({
});
const loadingState = ref('');
const labelInput = ref(null);
const labelInput = useTemplateRef('labelInput');
const masks = ref({
modelValue: 'YYYY-MM-DD',
});
resources/js/Shared/Modules/Tasks.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<script setup>
import { nextTick, ref } from 'vue';
import { nextTick, ref, useTemplateRef } from 'vue';
import { flash } from '@/methods';
import { trans } from 'laravel-vue-i18n';
import HoverMenu from '@/Shared/HoverMenu.vue';
@@ -12,9 +12,9 @@ const props = defineProps({
data: Object,
});
const createTaskForm = ref(null);
const updateTaskForm = ref([]);
const updateCompletedTaskForm = ref([]);
const createTaskForm = useTemplateRef('createTaskForm');
const updateTaskForm = useTemplateRef('updateTaskForm');
const updateCompletedTaskForm = useTemplateRef('updateCompletedTaskForm');
const createTaskModalShown = ref(false);
const showCompletedTasks = ref(false);
const localTasks = ref(props.data.tasks);