src/entities/element/ui/ElementNavigation.vue - dev - 45case/ptable

src/entities/element/ui/ElementNavigation.vue

54 строки2 KB

Olya

feat: useSelectedElement, элемент-карточка на PropertiesPage, навигация ElementNavigation

13 июл 2026, 13:05

13 июл 2026, 13:05cf40c04

<script setup lang="ts">
import { computed } from "vue";

import { useSelectedElement } from "@/shared/lib/useSelectedElement";
import { getElements } from "../api/elements";
import type { PeriodicElement } from "../model/elements";

const props = defineProps<{
  element: PeriodicElement;
}>();

const allElements = getElements();
const { selectElement } = useSelectedElement();

const prevElement = computed(() => {
  const index = allElements.indexOf(props.element);
  if (index <= 0) return null;
  return allElements[index - 1];
});

const nextElement = computed(() => {
  const index = allElements.indexOf(props.element);
  if (index >= allElements.length - 1) return null;
  return allElements[index + 1];
});
</script>

<template>
  <div class="flex items-center gap-2">
    <button
      type="button"
      :disabled="!prevElement"
      class="flex h-8 w-8 items-center justify-center rounded-lg text-(--color-text-secondary) transition-colors hover:bg-(--color-hover-surface) hover:text-(--color-text-primary) disabled:opacity-30 disabled:pointer-events-none"
      :title="prevElement ? `${prevElement.symbol} — ${prevElement.name}` : 'Нет предыдущего'"
      @click="prevElement && selectElement(prevElement)"
    >
      <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5 stroke-current stroke-[1.8] [stroke-linecap:round] [stroke-linejoin:round]">
        <path d="m15 18-6-6 6-6" />
      </svg>
    </button>

    <button
      type="button"
      :disabled="!nextElement"
      class="flex h-8 w-8 items-center justify-center rounded-lg text-(--color-text-secondary) transition-colors hover:bg-(--color-hover-surface) hover:text-(--color-text-primary) disabled:opacity-30 disabled:pointer-events-none"
      :title="nextElement ? `${nextElement.symbol} — ${nextElement.name}` : 'Нет следующего'"
      @click="nextElement && selectElement(nextElement)"
    >
      <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5 stroke-current stroke-[1.8] [stroke-linecap:round] [stroke-linejoin:round]">
        <path d="m9 18 6-6-6-6" />
      </svg>
    </button>
  </div>
</template>