Как сделать светлую тему по дефолту во Vueform?

Добрый день. В статье описаны общие принципы общей темы всего сайта. Мой вопрос касательно темы библиотеки vueform. Сложности именно с ней. В документации есть пункт об кастомизации, но даже добавление переменных в main.css и base.css результата не дали. Проблема в том что приложение чекает какая тема в браузере и подставляет переменные во вьюформ. Видимо они где то глубже... Для стилей использую tailwind

Как сделать светлую тему по дефолту во Vueform?

Алексей Ярков, ))) Алексей, вопрос в этом и заключается) Как отключить во вьюформ определение темы и как поставить по дефолту светлую) Спасибо)

Как правильно настроить refetch watch?

Андрей,

А лучший учитель - документация, тем более, что понятнее документации, чем у vue, еще нужно поискать)

Ключевой момент в том что её надо понимать и вообще понимать что делаешь))) а не просто читать)

Как правильно настроить refetch watch?

Андрей, спасибо вам за помощь. В любом случае. Ваш вариант который вы предложили, при открытии списка книг сразу появляется пустое модальное окно. И при закрытии его обновляется страница и список слетает. копировал строчка в строчку. С дебагом тоже проблемы, страница обновляется и изменения слетают, консоль чистится.

Как правильно настроить refetch watch?

Андрей, спасибо за пояснения! Это я почему то не думал в этом направлении.

Как правильно настроить refetch watch?

Андрей, я пока плохо разбираюсь) В моём представлении это обновляло бы список и не перезагружало бы страницу. Сейчас этот участок кода закомментирован.

Как правильно настроить refetch watch?

Андрей, это не повторный запрос. А как вариант кода с использованием refresh

Как правильно настроить refetch watch?

Андрей,
Логика с рефами на мой взгляд:

const showModal = ref(false);
const selectedBook = ref(null);
const isBookDeleted = ref(false);
const showBookDetails = ref(true);

showModal изначально в false. После выбора книги из списка значение в true? показывается модалка с информацией showBookDetails которая изначально false.
selectedBook изначально null потому что книга не выбрана, далее при выборе она привязывает данные которые должны отображаться.
Далее кнопка. Жмакаем удолить

<button
                class="bg-blue-500 text-white p-space-xs pl-space-m pr-space-m rounded-medium hover:bg-blue-600"
                @click="deleteBook"
              >
                Удалить
              </button>

И после удаления если isBookDeleted=true то отображается блок успеха.

<div v-if="isBookDeleted">
              <p>Книга успешно удалена!</p>
</div>

А блок <div v-if="showBookDetails"> становится false и скрывается.

Звучит всё замечательно. Но в данном примере после удаления книги появляется блок успеха, но проходит секунда и страница обновляется. Соответственно вкладка список книг сбрасывается и её надо открывать заново.

Пробовал ещё такой вариант:

const deleteBook = async () => {
	const bookId = selectedBook.value.id;
  const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIwY2Y5Nzk0Yi1jYjczLTcyQ";
  const { data, error, refresh } = await useFetch<{ results: Book[] }>(
    `https://api.storage/${bookId}`,
    {
      headers: {
				Authorization: `Bearer ${token}`,
			},
      method: "delete",
      server: false,
    }
  );
  if (error.value){
    console.error(error.value)
  } else {
    isBookDeleted.value = true;
    showBookDetails.value = false;
  }
  refresh();
};

И да, он тоже не решает проблему.

Как правильно настроить refetch watch?

Андрей, код модалки. Она отдельный компонент, для всего приложения.

<template>
  <!-- Overlay -->
  <div
    class="fixed z-[99] inset-0 bg-black bg-opacity-70 flex items-center justify-center"
  >
    <!-- Modal -->
    <OnClickOutside @trigger="$emit('close')" class="relative bg-white w-[336px] py-space-xl lg:w-[528px] rounded-medium">
        <slot />
        <!-- Close button -->
        <button
          class="absolute top-0 right-0 p-4"
          @click="$emit('close')"
        >
          <img :src="close" alt="icon" />
        </button>
    </OnClickOutside>
  </div>
</template>

<script setup lang="ts">
import { OnClickOutside } from "@vueuse/components";
import close from "~/assets/images/close.svg";
</script>

По рефам. И полный код того что сейчас работает, но обновляет страницу.

const showModal = ref(false);
const selectedBook = ref(null);
const isBookDeleted = ref(false);
const showBookDetails = ref(true);

const openModal = (book: any) => {
  selectedBook.value = book;
  showModal.value = true;
};

const closeModal = () => {
  showModal.value = false;
  selectedBook.value = null;
};

const { apiErrorHandler } = useErrorService();

const deleteBook = async () => {
  const bookId = selectedBook.value.id;

  const { error } = await useFetch(
    `https://api.storage/${bookId}`,
    {
      method: "DELETE",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    }
  );
  if (error.value) {
    apiErrorHandler(error.value);
  } else {
    isBookDeleted.value = true;
    showBookDetails.value = false;
  }
};

Как правильно настроить refetch watch?

Андрей, в моём скрипте логика была проще) Там я скрывал div с информацией о книге при успешном удалении и отображал div успеха.

Как правильно настроить refetch watch?

Андрей, да, я сам уже дописал логику удаления книги. Логики обновления страницы при закрытии модалки нет и в модалке событие @click="$emit('close') на закрытие, но она обновляется)
если в useFetch используется реактивная переменная, то она автоматически watch-ит валью, это я сегодня узнал, так что watch в начальном коде не нужен.
В рефах у меня:

const showModal = ref(false);
const selectedBook = ref(null);
const isBookDeleted = ref(false);
const showBookDetails = ref(true);

Как правильно настроить refetch watch?

Андрей, здравствуйте. Спасибо за ответ. Но он не работает( Модальное окно без контента (оно же showDeleteModal ) отображается постоянно сразу как входишь на страницу списка книг. При его закрытии обновляется страница.
Думаю данную задачу решить не реально, потому что запрос на удаление идёт из модального окна, а после компонент перерисовывается.

Nuxt 3 не открываются новые картинки после билда?

zhukov___sergey, логика переноса изображений из папки ресурсов, при билде, тянется ещё с галпа и вебпака. Так то если вы будете закидывать на фтп напрямую в папку паблик оно будет работать, но так лучше не делать.

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Всё работает как и планировалось.

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Андрей, как с вами можно связаться вне площадки?

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Андрей, да, чтобы работала функция

function toggleForm(formName: Component) {
	if (currentForm.value === formName) {
		closeForm();
	} else {
		currentForm.value = formName;
	}
}

function closeForm() {
	console.log('closeForm: Закрытие формы');
	currentForm.value = null;
}

Дословно, при повторном нажатии на кнопку, компонент пропадает и остаётся пустое место. Как это раньше было реализовано. Это наверное вовсе не обязательно, просто интересно как можно реализовать подобную фичу.

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Андрей, ну если уж совсем доводить до идеала, то как реализовать идею с закрытием формы при повторном нажатии на эту же форму?

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Андрей, Спасибо! Ваше решение работает. Вы красавчик.

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Андрей, Это работает, но при условии

function toggleForm(formComponent: Component) {
  if (currentForm.value === formComponent) {
    closeForm();
  } else {
    currentForm.value = formComponent;
  }
}

50% задачи решено, а как быть с кнопками? чтобы не делать 9 отдельных кнопок, как то можно укоротить код кнопок?

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Андрей,
<component :is="currentForm" />

function toggleForm(formName: any) {
	console.log(`toggleForm: Изменение текущей формы на ${formName}`);
	if (currentForm.value === formName) {
		closeForm();
	} else {
		currentForm.value = formName;
	}
}

function closeForm() {
	console.log('closeForm: Закрытие формы');
	currentForm.value = null;
}