agentation-vue 0.2.0

package/dist/components/ElementHighlight.d.vue.ts

@@ -0,0 +1,9 @@
+import type { BoundingBox } from '../types';
+type __VLS_Props = {
+    rect: BoundingBox | null;
+    elementName: string;
+    visible: boolean;
+    componentChain?: string;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ElementHighlight.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { BoundingBox } from '../types'
+import { computed } from 'vue-demi'
+import { boundingBoxToStyle } from '../utils/style'
+import ComponentChain from './ComponentChain.vue'
+
+const props = defineProps<{
+  rect: BoundingBox | null
+  elementName: string
+  visible: boolean
+  componentChain?: string
+}>()
+
+const highlightStyle = computed(() => {
+  if (!props.rect)
+    return {}
+  return boundingBoxToStyle(props.rect)
+})
+</script>
+
+<template>
+  <div
+    v-if="visible && rect"
+    class="__va-highlight"
+    :style="highlightStyle"
+    data-agentation-vue
+  >
+    <div v-if="componentChain" class="__va-highlight-label __va-highlight-label--chain">
+      <ComponentChain :chain="componentChain" variant="dark" truncate="auto" />
+    </div>
+    <span v-else class="__va-highlight-label">{{ elementName }}</span>
+  </div>
+</template>

package/dist/components/ElementHighlight.vue.d.ts

@@ -0,0 +1,9 @@
+import type { BoundingBox } from '../types';
+type __VLS_Props = {
+    rect: BoundingBox | null;
+    elementName: string;
+    visible: boolean;
+    componentChain?: string;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/SettingsPanel.d.vue.ts

@@ -0,0 +1,10 @@
+import type { Settings } from '../types';
+type __VLS_Props = {
+    settings: Settings;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    update: (settings: Partial<Settings>) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((settings: Partial<Settings>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/SettingsPanel.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { Settings } from '../types'
+import { computed, toRef } from 'vue-demi'
+import { vaTooltipDirective } from '../directives/vaTooltip'
+import VaIcon from './VaIcon.vue'
+import VaToggle from './VaToggle.vue'
+
+const props = defineProps<{
+  settings: Settings
+}>()
+const emit = defineEmits<{
+  update: [settings: Partial<Settings>]
+}>()
+const settings = toRef(props, 'settings')
+
+const presetColors = ['#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#EAB308', '#FF5C00', '#EF4444']
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
+
+function update(key: keyof Settings, value: any) {
+  emit('update', { [key]: value })
+}
+
+function onSelectChange(key: keyof Settings, event: Event) {
+  const target = event.currentTarget as HTMLSelectElement | null
+  if (!target)
+    return
+  update(key, target.value)
+}
+
+const isDarkTheme = computed(() => {
+  if (settings.value.theme === 'dark')
+    return true
+  if (settings.value.theme === 'light')
+    return false
+  return typeof window !== 'undefined'
+    && typeof window.matchMedia === 'function'
+    && window.matchMedia('(prefers-color-scheme: dark)').matches
+})
+
+const themeIcon = computed(() => (isDarkTheme.value ? 'sun' : 'moon'))
+const vVaTooltip = vaTooltipDirective
+
+function toggleTheme() {
+  update('theme', isDarkTheme.value ? 'light' : 'dark')
+}
+</script>
+
+<template>
+  <div class="__va-settings" data-agentation-vue @click.stop>
+    <div class="__va-settings-top">
+      <button v-va-tooltip="'Toggle theme'" type="button" class="__va-theme-toggle" @click="toggleTheme">
+        <VaIcon :name="themeIcon" />
+      </button>
+    </div>
+
+    <div class="__va-settings-row">
+      <span class="__va-settings-label">Output Detail</span>
+      <select :value="settings.outputDetail" @change="onSelectChange('outputDetail', $event)">
+        <option value="standard">
+          Standard
+        </option>
+        <option value="forensic">
+          Forensic
+        </option>
+      </select>
+    </div>
+
+    <div class="__va-settings-row">
+      <span class="__va-settings-label">Vue component tree</span>
+      <VaToggle
+        :model-value="settings.showComponentTree"
+        aria-label="Vue component tree"
+        @update:model-value="update('showComponentTree', $event)"
+      />
+    </div>
+
+    <div class="__va-settings-divider" />
+
+    <div class="__va-settings-row __va-settings-row--stack">
+      <span class="__va-settings-label">Marker Color</span>
+      <div class="__va-color-swatches">
+        <button
+          v-for="color in presetColors"
+          :key="color"
+          type="button"
+          class="__va-color-swatch"
+          :class="{ '__va-color-swatch--active': settings.markerColor === color }"
+          :style="{ background: color }"
+          @click="update('markerColor', color)"
+        />
+      </div>
+    </div>
+
+    <div class="__va-settings-divider" />
+
+    <div class="__va-settings-row">
+      <span class="__va-settings-label">Clear on copy/send</span>
+      <VaToggle
+        :model-value="settings.clearAfterCopy"
+        aria-label="Clear on copy/send"
+        @update:model-value="update('clearAfterCopy', $event)"
+      />
+    </div>
+
+    <div class="__va-settings-row">
+      <span class="__va-settings-label">Block page interactions</span>
+      <VaToggle
+        :model-value="settings.blockPageInteractions"
+        aria-label="Block page interactions"
+        @update:model-value="update('blockPageInteractions', $event)"
+      />
+    </div>
+
+    <div class="__va-settings-row">
+      <span class="__va-settings-label">Auto-hide floating button</span>
+      <VaToggle
+        :model-value="settings.autoHideToolbar"
+        aria-label="Auto-hide floating button"
+        @update:model-value="update('autoHideToolbar', $event)"
+      />
+    </div>
+
+    <div class="__va-settings-divider" />
+
+    <div class="__va-settings-row">
+      <span class="__va-settings-label">Activate with double tap</span>
+      <select :value="settings.activationKey" @change="onSelectChange('activationKey', $event)">
+        <option value="none">
+          Off
+        </option>
+        <option value="Meta">
+          {{ isMac ? '&#8984; Cmd' : 'Ctrl' }}
+        </option>
+        <option value="Alt">
+          {{ isMac ? '&#8997; Option' : 'Alt' }}
+        </option>
+        <option value="Shift">
+          Shift
+        </option>
+      </select>
+    </div>
+  </div>
+</template>

package/dist/components/SettingsPanel.vue.d.ts

@@ -0,0 +1,10 @@
+import type { Settings } from '../types';
+type __VLS_Props = {
+    settings: Settings;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    update: (settings: Partial<Settings>) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((settings: Partial<Settings>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/SettingsPopover.d.vue.ts

@@ -0,0 +1,14 @@
+import type { Settings } from '../types';
+type __VLS_Props = {
+    open: boolean;
+    settings: Settings;
+    anchorEl: HTMLElement | null;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    close: () => any;
+    update: (settings: Partial<Settings>) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((settings: Partial<Settings>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/SettingsPopover.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import type { BoundingBox, Settings } from '../types'
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue-demi'
+import { clamp } from '../utils/math'
+import SettingsPanel from './SettingsPanel.vue'
+
+type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'
+
+const props = defineProps<{
+  open: boolean
+  settings: Settings
+  anchorEl: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  update: [settings: Partial<Settings>]
+}>()
+
+const panelEl = ref<HTMLElement | null>(null)
+const placement = ref<Placement>('bottom-start')
+const style = ref<Record<string, string>>({
+  left: '-9999px',
+  top: '-9999px',
+  visibility: 'hidden',
+})
+
+const GAP = 8
+const VIEWPORT_PADDING = 8
+let rafId: number | null = null
+
+function getPlacementCandidates(anchorRect: DOMRect): Placement[] {
+  const isOnBottomHalf = anchorRect.top > window.innerHeight / 2
+  const isOnRightHalf = anchorRect.left > window.innerWidth / 2
+  const preferredVertical = isOnBottomHalf ? 'top' : 'bottom'
+  const secondaryVertical = isOnBottomHalf ? 'bottom' : 'top'
+  const preferredAlign = isOnRightHalf ? 'end' : 'start'
+  const secondaryAlign = isOnRightHalf ? 'start' : 'end'
+  const preferredHorizontal = isOnRightHalf ? 'left' : 'right'
+  const secondaryHorizontal = isOnRightHalf ? 'right' : 'left'
+
+  return [
+    `${preferredVertical}-${preferredAlign}` as Placement,
+    `${preferredVertical}-${secondaryAlign}` as Placement,
+    `${secondaryVertical}-${preferredAlign}` as Placement,
+    `${secondaryVertical}-${secondaryAlign}` as Placement,
+    `${preferredHorizontal}-start` as Placement,
+    `${preferredHorizontal}-end` as Placement,
+    `${secondaryHorizontal}-start` as Placement,
+    `${secondaryHorizontal}-end` as Placement,
+  ]
+}
+
+function getCoordinates(anchorRect: DOMRect, panelRect: BoundingBox, value: Placement): { x: number, y: number } {
+  switch (value) {
+    case 'top-start':
+      return { x: anchorRect.left, y: anchorRect.top - GAP - panelRect.height }
+    case 'top-end':
+      return { x: anchorRect.right - panelRect.width, y: anchorRect.top - GAP - panelRect.height }
+    case 'bottom-start':
+      return { x: anchorRect.left, y: anchorRect.bottom + GAP }
+    case 'bottom-end':
+      return { x: anchorRect.right - panelRect.width, y: anchorRect.bottom + GAP }
+    case 'left-start':
+      return { x: anchorRect.left - GAP - panelRect.width, y: anchorRect.top }
+    case 'left-end':
+      return { x: anchorRect.left - GAP - panelRect.width, y: anchorRect.bottom - panelRect.height }
+    case 'right-start':
+      return { x: anchorRect.right + GAP, y: anchorRect.top }
+    case 'right-end':
+      return { x: anchorRect.right + GAP, y: anchorRect.bottom - panelRect.height }
+    default:
+      return { x: anchorRect.left, y: anchorRect.bottom + GAP }
+  }
+}
+
+function getOverflow(x: number, y: number, panelRect: BoundingBox) {
+  const rightLimit = window.innerWidth - VIEWPORT_PADDING
+  const bottomLimit = window.innerHeight - VIEWPORT_PADDING
+  return {
+    left: Math.max(0, VIEWPORT_PADDING - x),
+    right: Math.max(0, x + panelRect.width - rightLimit),
+    top: Math.max(0, VIEWPORT_PADDING - y),
+    bottom: Math.max(0, y + panelRect.height - bottomLimit),
+  }
+}
+
+function getOverflowScore(overflow: ReturnType<typeof getOverflow>) {
+  return overflow.left + overflow.right + overflow.top + overflow.bottom
+}
+
+function applyPosition() {
+  if (!props.open)
+    return
+
+  const anchorEl = props.anchorEl
+  const panel = panelEl.value
+  if (!anchorEl || !panel) {
+    style.value = { left: '-9999px', top: '-9999px', visibility: 'hidden' }
+    return
+  }
+
+  if (!anchorEl.isConnected) {
+    emit('close')
+    return
+  }
+
+  const anchorRect = anchorEl.getBoundingClientRect()
+  const panelRect: BoundingBox = {
+    x: 0,
+    y: 0,
+    width: panel.offsetWidth,
+    height: panel.offsetHeight,
+  }
+
+  const candidates = getPlacementCandidates(anchorRect)
+  let best = candidates[0]
+  let bestCoords = getCoordinates(anchorRect, panelRect, best)
+  let bestOverflow = getOverflow(bestCoords.x, bestCoords.y, panelRect)
+  let bestScore = getOverflowScore(bestOverflow)
+
+  for (let i = 1; i < candidates.length; i++) {
+    const candidate = candidates[i]
+    const coords = getCoordinates(anchorRect, panelRect, candidate)
+    const overflow = getOverflow(coords.x, coords.y, panelRect)
+    const score = getOverflowScore(overflow)
+    if (score < bestScore) {
+      best = candidate
+      bestCoords = coords
+      bestOverflow = overflow
+      bestScore = score
+    }
+  }
+
+  const x = clamp(
+    bestCoords.x,
+    VIEWPORT_PADDING,
+    Math.max(VIEWPORT_PADDING, window.innerWidth - VIEWPORT_PADDING - panelRect.width),
+  )
+  const y = clamp(
+    bestCoords.y,
+    VIEWPORT_PADDING,
+    Math.max(VIEWPORT_PADDING, window.innerHeight - VIEWPORT_PADDING - panelRect.height),
+  )
+
+  placement.value = best
+  style.value = {
+    left: `${Math.round(x)}px`,
+    top: `${Math.round(y)}px`,
+    visibility: 'visible',
+  }
+}
+
+function schedulePositionUpdate() {
+  if (rafId != null)
+    return
+  rafId = window.requestAnimationFrame(() => {
+    rafId = null
+    applyPosition()
+  })
+}
+
+function onDocumentPointerDown(e: PointerEvent) {
+  if (!props.open)
+    return
+  const target = e.target as Node | null
+  if (!target)
+    return
+  if (panelEl.value?.contains(target))
+    return
+  if (props.anchorEl?.contains(target))
+    return
+  emit('close')
+}
+
+function addGlobalListeners() {
+  window.addEventListener('resize', schedulePositionUpdate)
+  window.addEventListener('scroll', schedulePositionUpdate, true)
+  document.addEventListener('pointerdown', onDocumentPointerDown, true)
+}
+
+function removeGlobalListeners() {
+  window.removeEventListener('resize', schedulePositionUpdate)
+  window.removeEventListener('scroll', schedulePositionUpdate, true)
+  document.removeEventListener('pointerdown', onDocumentPointerDown, true)
+}
+
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (isOpen) {
+      await nextTick()
+      applyPosition()
+      addGlobalListeners()
+    }
+    else {
+      removeGlobalListeners()
+      style.value = { left: '-9999px', top: '-9999px', visibility: 'hidden' }
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.anchorEl,
+  async () => {
+    if (!props.open)
+      return
+    await nextTick()
+    applyPosition()
+  },
+)
+
+onBeforeUnmount(() => {
+  removeGlobalListeners()
+  if (rafId != null) {
+    window.cancelAnimationFrame(rafId)
+    rafId = null
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="open"
+    ref="panelEl"
+    class="__va-settings-popover"
+    :data-placement="placement"
+    :style="style"
+    data-agentation-vue
+    @click.stop
+  >
+    <SettingsPanel :settings="settings" @update="$emit('update', $event)" />
+  </div>
+</template>

package/dist/components/SettingsPopover.vue.d.ts

@@ -0,0 +1,14 @@
+import type { Settings } from '../types';
+type __VLS_Props = {
+    open: boolean;
+    settings: Settings;
+    anchorEl: HTMLElement | null;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    close: () => any;
+    update: (settings: Partial<Settings>) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((settings: Partial<Settings>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/VaButton.d.vue.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    variant: "primary" | "secondary";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VaButton.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  variant?: 'primary' | 'secondary'
+  disabled?: boolean
+}>(), {
+  variant: 'primary',
+  disabled: false,
+})
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button type="button" class="__va-btn" :class="`__va-btn--${variant}`" :disabled="disabled" @click="$emit('click', $event)">
+    <slot />
+  </button>
+</template>

package/dist/components/VaButton.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    variant: "primary" | "secondary";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VaIcon.d.vue.ts

@@ -0,0 +1,6 @@
+import type { IconName } from '../icons';
+type __VLS_Props = {
+    name: IconName;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/VaIcon.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { IconName } from '../icons'
+import { icons } from '../icons'
+
+defineProps<{ name: IconName }>()
+</script>
+
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    v-html="icons[name]"
+  />
+</template>

package/dist/components/VaIcon.vue.d.ts

@@ -0,0 +1,6 @@
+import type { IconName } from '../icons';
+type __VLS_Props = {
+    name: IconName;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/VaIconButton.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    active?: boolean;
+    disabled?: boolean;
+    title?: string;
+    shortcut?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    active: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VaIconButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue-demi'
+import { vaTooltipDirective } from '../directives/vaTooltip'
+
+const props = withDefaults(defineProps<{
+  active?: boolean
+  disabled?: boolean
+  title?: string
+  shortcut?: string
+}>(), {
+  active: false,
+  disabled: false,
+})
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const vVaTooltip = vaTooltipDirective
+const tooltipValue = computed(() => {
+  if (!props.title)
+    return null
+  return {
+    text: props.title,
+    shortcut: props.shortcut,
+    disabled: props.disabled,
+  }
+})
+</script>
+
+<template>
+  <button
+    v-va-tooltip="tooltipValue"
+    type="button"
+    class="__va-icon-btn"
+    :class="{ '__va-icon-btn--active': active }"
+    :aria-label="title"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </button>
+</template>