automa/src/components/content/selector/SelectorQuery.vue

<template>
  <div>
    <div class="flex items-center">
      <ui-select
        :model-value="selectorType"
        :disabled="selectList"
        class="w-full"
        @change="$emit('update:selectorType', $event)"
      >
        <option value="css">CSS Selector</option>
        <option value="xpath">XPath</option>
      </ui-select>
      <ui-button
        v-if="selectorType === 'css'"
        :class="{ 'text-primary': selectList }"
        icon
        class="ml-2"
        title="Select a list of elements"
        @click.stop.prevent="$emit('update:selectList', !selectList)"
      >
        <v-remixicon name="riListUnordered" />
      </ui-button>
    </div>
    <div class="mt-2 flex items-center">
      <ui-input
        :model-value="selector"
        placeholder="Element selector"
        class="leading-normal flex-1 h-full element-selector"
        @change="$emit('selector', $event)"
      >
        <template #prepend>
          <button
            class="absolute ml-2 left-0"
            @click.stop.prevent="copySelector"
          >
            <v-remixicon name="riFileCopyLine" />
          </button>
        </template>
      </ui-input>
      <template v-if="selectedCount === 1 && !selector.includes('|>')">
        <button
          class="mr-1 ml-2"
          title="Parent element"
          @click.stop.prevent="$emit('parent')"
        >
          <v-remixicon rotate="90" name="riArrowLeftLine" />
        </button>
        <button title="Child element" @click.stop.prevent="$emit('child')">
          <v-remixicon rotate="-90" name="riArrowLeftLine" />
        </button>
      </template>
    </div>
  </div>
</template>
<script setup>
import { inject } from 'vue';
import UiInput from '@/components/ui/UiInput.vue';

const props = defineProps({
  selector: {
    type: String,
    default: '',
  },
  selectedCount: {
    type: Number,
    default: 0,
  },
  selectorType: {
    type: String,
    default: '',
  },
  selectList: {
    type: Boolean,
    default: false,
  },
});
defineEmits([
  'change',
  'list',
  'parent',
  'child',
  'selector',
  'update:selectorType',
  'update:selectList',
]);

const rootElement = inject('rootElement');

function copySelector() {
  rootElement.shadowRoot.querySelector('input')?.select();

  navigator.clipboard.writeText(props.selector).catch((error) => {
    document.execCommand('copy');
    console.error(error);
  });
}
</script>