fix: options tab not appear

src/components/content/selector/SelectorElementsDetail.vue

@@ -58,7 +58,7 @@
         element-name="Select element options"
         @highlight="
           $emit('highlight', {
-            index: $event.element.index,
+            index: $event.element.elIndex,
             highlight: $event.highlight,
           })
         "

src/components/content/shared/SharedElementSelector.vue

@@ -95,13 +95,22 @@ const onScroll = debounce(() => {
   lastScrollPosY = window.scrollY;
 }, 100);
 
-function getElementRectWithOffset(element, withAttribute) {
+function getElementRectWithOffset(
+  element,
+  { withAttribute, withElOptions } = {}
+) {
   const rect = getElementRect(element, withAttribute);
 
   if (frameElementRect) {
     rect.y += frameElementRect.top;
     rect.x += frameElementRect.left;
   }
+  if (withElOptions && element.tagName === 'SELECT') {
+    rect.options = Array.from(element.querySelectorAll('option')).map((el) => ({
+      name: el.innerText,
+      value: el.textContent,
+    }));
+  }
 
   return rect;
 }
@@ -178,6 +187,7 @@ function retrieveElementsRect({ clientX, clientY, target: eventTarget }, type) {
   }
 
   let elementsRect = [];
+  const withElOptions = type === 'selected';
   const withAttribute = props.withAttributes && type === 'selected';
 
   if (isSelectList) {
@@ -190,12 +200,14 @@ function retrieveElementsRect({ clientX, clientY, target: eventTarget }, type) {
     if (type === 'hovered') hoveredElements = elements;
 
     elementsRect = elements.map((el) =>
-      getElementRectWithOffset(el, withAttribute)
+      getElementRectWithOffset(el, { withAttribute, withElOptions })
     );
   } else {
     if (type === 'hovered') hoveredElements = [target];
 
-    elementsRect = [getElementRectWithOffset(target, withAttribute)];
+    elementsRect = [
+      getElementRectWithOffset(target, { withAttribute, withElOptions }),
+    ];
   }
 
   elementsState[type] = elementsRect;
@@ -216,8 +228,17 @@ function retrieveElementsRect({ clientX, clientY, target: eventTarget }, type) {
       selector = `${frameSelector} |> ${selector}`;
     }
 
+    const selectElements = elementsRect.reduce((acc, rect, index) => {
+      if (rect.tagName !== 'SELECT') return acc;
+
+      acc.push({ ...rect, elIndex: index });
+
+      return acc;
+    }, []);
+
     emit('selected', {
       selector,
+      selectElements,
       elements: elementsRect,
       path: getElementPath(target),
     });

src/content/elementSelector/App.vue

@@ -108,6 +108,7 @@ const state = reactive({
   isDragging: false,
   selectList: false,
   isExecuting: false,
+  selectElements: [],
   selectorType: 'css',
   selectedElements: [],
   activeTab: 'attributes',
@@ -173,7 +174,7 @@ const updateSelector = debounce((selector) => {
 function toggleHighlightElement({ index, highlight }) {
   state.selectedElements[index].highlight = highlight;
 }
-function onElementsSelected({ selector, elements, path }) {
+function onElementsSelected({ selector, elements, path, selectElements }) {
   if (path) {
     selectedElement.path = path;
     selectedElement.pathIndex = 0;
@@ -181,6 +182,7 @@ function onElementsSelected({ selector, elements, path }) {
 
   state.elSelector = selector;
   state.selectedElements = elements || [];
+  state.selectElements = selectElements || [];
 }
 function onMousemove({ clientX, clientY }) {
   if (!state.isDragging) return;