compdfkit_web_viewer/packages/webview/src/components/LeftPanel/LeftPanelTabs.vue

<template>
  <Button
    :className="activePanelTab === 'THUMBS' ? 'active' : ''"
    img="icon-thumbnail"
    :title="$t('leftPanel.thumbnails')"
    dataElement="THUMBS"
    :isActive="activePanelTab === 'THUMBS'"
    @click="setActiveLeftPanelTab('THUMBS', 'thumbs')"
  >
    <Thumbnail />
  </Button>
  <Button
    :className="activePanelTab === 'OUTLINE' ? 'active' : ''"
    img="icon-outline"
    :title="$t('leftPanel.outlines')"
    dataElement="OUTLINE"
    :isActive="activePanelTab === 'OUTLINE'"
    @click="setActiveLeftPanelTab('OUTLINE', 'outline')"
  >
    <Outline />
  </Button>
  <Button
    :className="activePanelTab === 'ANNOTATION' ? 'active' : ''"
    img="icon-annotation"
    :title="$t('leftPanel.annotations')"
    dataElement="ANNOTATION"
    :isActive="activePanelTab === 'ANNOTATION'"
    @click="setActiveLeftPanelTab('ANNOTATION', 'none')"
  >
    <Annotation />
  </Button>
  <Button
    :className="activePanelTab === 'LAYER' ? 'active' : ''"
    v-if="activeLeftPanel && activePanelTab === 'LAYER'"
    img="icon-view-layers"
    :title="$t('leftPanel.layers')"
    dataElement="Layers"
    :isActive="activePanelTab === 'LAYER'"
    @click="setActiveLeftPanelTab('LAYER', 'layers')"
  >
    <Layers />
  </Button>
  <Button
    :className="activePanelTab === 'COMPARISON' ? 'active' : ''"
    v-if="activeLeftPanel && activePanelTab === 'COMPARISON'"
    img="icon-compare"
    title="Compare"
    dataElement="COMPARISON"
    :isActive="activePanelTab === 'COMPARISON'"
    @click="setActiveLeftPanelTab('COMPARISON')"
  />
  <Button
    :className="activePanelTab === 'SIGNATURE' ? 'active' : ''"
    img="icon-signature"
    :title="$t('leftPanel.signature')"
    dataElement="Signature"
    :isActive="activePanelTab === 'SIGNATURE'"
    @click="setActiveLeftPanelTab('SIGNATURE', 'none')"
  >
    <Signature />
  </Button>
  <Button
    :className="activePanelTab === 'SEARCH' ? 'active' : ''"
    img="icon-search"
    :title="$t('leftPanel.search')"
    dataElement="Search"
    :isActive="activePanelTab === 'SEARCH'"
    @click="setActiveLeftPanelTab('SEARCH', 'none')"
  >
    <SearchLeft />
  </Button>
</template>

<script setup>
  import { computed } from 'vue'
  import core from '@/core'
  import { useViewerStore } from '@/stores/modules/viewer'


  defineProps(['activePanelTab'])
  const activeLeftPanel = computed(() => useViewer.isElementOpen('leftPanel'))
  const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
  const useViewer = useViewerStore()

  const setActiveLeftPanelTab = (tab, mode) => {
    if (tab === activePanelTab.value) return
    useViewer.setActiveElementTab('leftPanelTab', tab)
    
    if (tab === 'SEARCH') {
      core.webViewerNamedAction('FindOpen')
      useViewer.setSearchStatus(true)
    } else {
      core.clearSearchResults()
      useViewer.setSearchStatus(false)
    }

    setTimeout(() => {
      core.webViewerPageMode(mode)
    }, 0)
  }
</script>