agentation-vue 0.2.2 → 0.2.3

package/dist/components/SettingsPopover.vue

@@ -1,223 +1,192 @@
-<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'
-
+<script setup>
+import { nextTick, onBeforeUnmount, ref, watch } from "vue-demi";
+import { clamp } from "../utils/math";
+import SettingsPanel from "./SettingsPanel.vue";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  settings: { type: Object, required: true },
+  anchorEl: { type: null, required: true }
+});
+const emit = defineEmits(["close", "update"]);
+const panelEl = ref(null);
+const placement = ref("bottom-start");
+const style = ref({
+  left: "-9999px",
+  top: "-9999px",
+  visibility: "hidden"
+});
+const GAP = 8;
+const VIEWPORT_PADDING = 8;
+let rafId = null;
+function getPlacementCandidates(anchorRect) {
+  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,
-  ]
+    `${preferredVertical}-${preferredAlign}`,
+    `${preferredVertical}-${secondaryAlign}`,
+    `${secondaryVertical}-${preferredAlign}`,
+    `${secondaryVertical}-${secondaryAlign}`,
+    `${preferredHorizontal}-start`,
+    `${preferredHorizontal}-end`,
+    `${secondaryHorizontal}-start`,
+    `${secondaryHorizontal}-end`
+  ];
 }
-
-function getCoordinates(anchorRect: DOMRect, panelRect: BoundingBox, value: Placement): { x: number, y: number } {
+function getCoordinates(anchorRect, panelRect, value) {
   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 }
+    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 }
+      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
+function getOverflow(x, y, panelRect) {
+  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),
-  }
+    bottom: Math.max(0, y + panelRect.height - bottomLimit)
+  };
 }
-
-function getOverflowScore(overflow: ReturnType<typeof getOverflow>) {
-  return overflow.left + overflow.right + overflow.top + overflow.bottom
+function getOverflowScore(overflow) {
+  return overflow.left + overflow.right + overflow.top + overflow.bottom;
 }
-
 function applyPosition() {
   if (!props.open)
-    return
-
-  const anchorEl = props.anchorEl
-  const panel = panelEl.value
+    return;
+  const anchorEl = props.anchorEl;
+  const panel = panelEl.value;
   if (!anchorEl || !panel) {
-    style.value = { left: '-9999px', top: '-9999px', visibility: 'hidden' }
-    return
+    style.value = { left: "-9999px", top: "-9999px", visibility: "hidden" };
+    return;
   }
-
   if (!anchorEl.isConnected) {
-    emit('close')
-    return
+    emit("close");
+    return;
   }
-
-  const anchorRect = anchorEl.getBoundingClientRect()
-  const panelRect: BoundingBox = {
+  const anchorRect = anchorEl.getBoundingClientRect();
+  const panelRect = {
     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)
-
+    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)
+    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
+      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),
-  )
+    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
+    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',
-  }
+    visibility: "visible"
+  };
 }
-
 function schedulePositionUpdate() {
   if (rafId != null)
-    return
+    return;
   rafId = window.requestAnimationFrame(() => {
-    rafId = null
-    applyPosition()
-  })
+    rafId = null;
+    applyPosition();
+  });
 }
-
-function onDocumentPointerDown(e: PointerEvent) {
+function onDocumentPointerDown(e) {
   if (!props.open)
-    return
-  const target = e.target as Node | null
+    return;
+  const target = e.target;
   if (!target)
-    return
+    return;
   if (panelEl.value?.contains(target))
-    return
+    return;
   if (props.anchorEl?.contains(target))
-    return
-  emit('close')
+    return;
+  emit("close");
 }
-
 function addGlobalListeners() {
-  window.addEventListener('resize', schedulePositionUpdate)
-  window.addEventListener('scroll', schedulePositionUpdate, true)
-  document.addEventListener('pointerdown', onDocumentPointerDown, true)
+  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)
+  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' }
+      await nextTick();
+      applyPosition();
+      addGlobalListeners();
+    } else {
+      removeGlobalListeners();
+      style.value = { left: "-9999px", top: "-9999px", visibility: "hidden" };
     }
   },
-  { immediate: true },
-)
-
+  { immediate: true }
+);
 watch(
   () => props.anchorEl,
   async () => {
     if (!props.open)
-      return
-    await nextTick()
-    applyPosition()
-  },
-)
-
+      return;
+    await nextTick();
+    applyPosition();
+  }
+);
 onBeforeUnmount(() => {
-  removeGlobalListeners()
+  removeGlobalListeners();
   if (rafId != null) {
-    window.cancelAnimationFrame(rafId)
-    rafId = null
+    window.cancelAnimationFrame(rafId);
+    rafId = null;
   }
-})
+});
 </script>
 
 <template>

package/dist/components/VaButton.vue

@@ -1,15 +1,9 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  variant?: 'primary' | 'secondary'
-  disabled?: boolean
-}>(), {
-  variant: 'primary',
-  disabled: false,
-})
-
-defineEmits<{
-  click: [event: MouseEvent]
-}>()
+<script setup>
+defineProps({
+  variant: { type: String, required: false, default: "primary" },
+  disabled: { type: Boolean, required: false, default: false }
+});
+defineEmits(["click"]);
 </script>
 
 <template>

package/dist/components/VaIcon.vue

@@ -1,8 +1,8 @@
-<script setup lang="ts">
-import type { IconName } from '../icons'
-import { icons } from '../icons'
-
-defineProps<{ name: IconName }>()
+<script setup>
+import { icons } from "../icons";
+defineProps({
+  name: { type: null, required: true }
+});
 </script>
 
 <template>

package/dist/components/VaIconButton.vue

@@ -1,31 +1,23 @@
-<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
+<script setup>
+import { computed } from "vue-demi";
+import { vaTooltipDirective } from "../directives/vaTooltip";
+const props = defineProps({
+  active: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false },
+  shortcut: { type: String, required: false }
+});
+defineEmits(["click"]);
+const vVaTooltip = vaTooltipDirective;
 const tooltipValue = computed(() => {
   if (!props.title)
-    return null
+    return null;
   return {
     text: props.title,
     shortcut: props.shortcut,
-    disabled: props.disabled,
-  }
-})
+    disabled: props.disabled
+  };
+});
 </script>
 
 <template>

package/dist/components/VaToggle.vue

@@ -1,12 +1,11 @@
-<script setup lang="ts">
-const props = defineProps<{
-  modelValue: boolean
-  ariaLabel?: string
-}>()
-const emit = defineEmits<{ 'update:model-value': [value: boolean] }>()
-
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  ariaLabel: { type: String, required: false }
+});
+const emit = defineEmits(["update:model-value"]);
 function toggle() {
-  emit('update:model-value', !props.modelValue)
+  emit("update:model-value", !props.modelValue);
 }
 </script>
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "agentation-vue",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Visual feedback tool for AI coding agents — Vue 2.7 & 3",
   "author": "Dorian Becker",
   "license": "PolyForm-Shield-1.0.0",
   "homepage": "https://github.com/Blaked84/agentation-vue",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Blaked84/agentation-vue.git",
+    "url": "git+https://github.com/Blaked84/agentation-vue.git",
     "directory": "packages/agentation-vue"
   },
   "keywords": [
@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "unbuild": "^3.0.0",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "vue-sfc-transformer": "^0.1.17"
   }
 }