compdfkit_web_viewer/packages/webview/src/components/CustomButton/ToggleButton.vue

<template>
  <div
    class="button custom-button"
    :data-element="dataElement"
    :class="{
      active: isActive,
      [type]: type,
      disabled,
      [className]: className
    }"
    @click="disabled || !onClick ? NOOP() : onClick($event)"
    :disabled="disabled"
    :title="title"
  >
    <template v-if="img">
      <div v-if="isSVG" v-html="img" class="img"></div>
      <img v-else :src="img" alt="" class="img">
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import { computed } from 'vue'
import core from '@/core'
const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const { item } = defineProps(['item'])
const {
  type,
  img,
  dataElement,
  title,
  disabled,
  className,
  element
} = item

const isSVG = img?.trim().toLowerCase().startsWith('<svg');

const NOOP = (e) => {
  e?.stopPropagation()
  e?.preventDefault()
}

const isActive = computed(() => {
  return useViewer.isElementOpen(element)
})

const onClick = () => {
  useViewer.toggleElement(element)
}
</script>

<style lang="scss">
</style>