feat: Replace the use of keyboardEventListener mixin to a composable (Part -2) (#9892)

app/javascript/dashboard/components/widgets/LabelSelector.vue

@@ -1,83 +1,71 @@
-<script>
-import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
+<script setup>
+import { ref, computed } from 'vue';
 import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
+import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 
-export default {
-  components: {
-    AddLabel,
-    LabelDropdown,
+const props = defineProps({
+  allLabels: {
+    type: Array,
+    default: () => [],
   },
+  savedLabels: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-  mixins: [keyboardEventListenerMixins],
+const emit = defineEmits(['add', 'remove']);
 
-  props: {
-    allLabels: {
-      type: Array,
-      default: () => [],
-    },
-    savedLabels: {
-      type: Array,
-      default: () => [],
+const labelSelectorWrapRef = ref(null);
+
+const { isAdmin } = useAdmin();
+
+const showSearchDropdownLabel = ref(false);
+
+const selectedLabels = computed(() => {
+  return props.savedLabels.map(label => label.title);
+});
+
+const addItem = label => {
+  emit('add', label);
+};
+
+const removeItem = label => {
+  emit('remove', label);
+};
+
+const toggleLabels = () => {
+  showSearchDropdownLabel.value = !showSearchDropdownLabel.value;
+};
+
+const closeDropdownLabel = () => {
+  showSearchDropdownLabel.value = false;
+};
+
+const keyboardEvents = {
+  KeyL: {
+    action: e => {
+      toggleLabels();
+      e.preventDefault();
     },
   },
-
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-
-  data() {
-    return {
-      showSearchDropdownLabel: false,
-    };
-  },
-
-  computed: {
-    selectedLabels() {
-      return this.savedLabels.map(label => label.title);
-    },
-  },
-
-  methods: {
-    addItem(label) {
-      this.$emit('add', label);
-    },
-
-    removeItem(label) {
-      this.$emit('remove', label);
-    },
-
-    toggleLabels() {
-      this.showSearchDropdownLabel = !this.showSearchDropdownLabel;
-    },
-
-    closeDropdownLabel() {
-      this.showSearchDropdownLabel = false;
-    },
-    getKeyboardEvents() {
-      return {
-        KeyL: {
-          action: e => {
-            this.toggleLabels();
-            e.preventDefault();
-          },
-        },
-        Escape: {
-          action: () => this.closeDropdownLabel(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
+  Escape: {
+    action: () => closeDropdownLabel(),
+    allowOnFocusedInput: true,
   },
 };
+
+useKeyboardEvents(keyboardEvents, labelSelectorWrapRef);
 </script>
 
 <template>
-  <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
+  <div
+    ref="labelSelectorWrapRef"
+    v-on-clickaway="closeDropdownLabel"
+    class="relative leading-6"
+  >
     <AddLabel @add="toggleLabels" />
     <woot-label
       v-for="label in savedLabels"
@@ -89,10 +77,10 @@ export default {
       variant="smooth"
       @click="removeItem"
     />
-    <div class="dropdown-wrap">
+    <div class="absolute w-full top-7">
       <div
         :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-        class="dropdown-pane"
+        class="!box-border !w-full dropdown-pane"
       >
         <LabelDropdown
           v-if="showSearchDropdownLabel"
@@ -106,28 +94,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.title-icon {
-  margin-right: var(--space-smaller);
-}
-
-.label-wrap {
-  position: relative;
-  line-height: var(--space-medium);
-
-  .dropdown-wrap {
-    display: flex;
-    position: absolute;
-    margin-right: var(--space-medium);
-    top: var(--space-medium);
-    width: 100%;
-    left: -1px;
-
-    .dropdown-pane {
-      width: 100%;
-      box-sizing: border-box;
-    }
-  }
-}
-</style>