bfg-common 1.5.92 → 1.5.94

package/components/atoms/combobox/Combobox.vue

@@ -1,154 +1,154 @@
-<template>
-  <div
-    tabindex="-1"
-    :class="['tooltip-top-left combobox-container', { isOpen }]"
-  >
-    <atoms-the-icon
-      v-show="!isOpen"
-      :data-id="`${props.testId}-open-icon`"
-      class="angle-icon clr-icon"
-      name="angle"
-      @click="onFocusInput"
-    />
-    <input
-      :id="id"
-      v-model="modelValueLocal"
-      :data-id="`${props.testId}-search-input`"
-      :disabled="props.disabled"
-      type="text"
-      tabindex="-1"
-      @focus="showMenu"
-      @blur="hideMenu"
-    />
-    <atoms-the-icon
-      v-show="isOpen"
-      :data-id="`${props.testId}-close-icon`"
-      class="close-icon clr-icon"
-      name="close-circle"
-      @mousedown="clear"
-    />
-
-    <Teleport to="body">
-      <div v-show="isOpen" :style="dropdownMenuStyles" class="dropdown-menu">
-        <button
-          v-for="(item, key) in props.items"
-          :key="key"
-          :id="`${id}-${key}`"
-          :data-id="item.testId"
-          class="btn btn-link dropdown-item"
-          @mousedown="select(item.value)"
-        >
-          {{ item.text }}
-        </button>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_OptionItem[]
-  modelValue?: string | number
-  disabled?: boolean
-  testId?: string
-}>()
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string | number): void
-  (event: 'select', value: string | number): void
-}>()
-
-const modelValueLocal = computed<string | number | undefined>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    if (newValue === undefined) return
-    emits('update:model-value', newValue)
-  },
-})
-
-const id = `combobox${useUniqueId()}`
-
-const dropdownMenuStyles = ref<any>({})
-const showMenu = (): void => {
-  isOpen.value = true
-
-  const input = document.querySelector(`#${id}`)
-  if (!input) return
-
-  const { top, height, left } = input.getBoundingClientRect()
-
-  dropdownMenuStyles.value = {
-    top: `${top + height}px`,
-    left: `${left}px`,
-  }
-}
-const hideMenu = (): void => {
-  isOpen.value = false
-}
-
-const select = (value: string | number): void => {
-  emits('update:model-value', value)
-  emits('select', value)
-}
-const clear = (): void => {
-  emits('update:model-value', '')
-}
-
-const isOpen = ref<boolean>(false)
-
-const onFocusInput = (event: Event): void => {
-  const target = event.target as HTMLElement
-  target && target.nextSibling && target.nextSibling.focus()
-}
-</script>
-
-<style scoped lang="scss">
-.combobox-container {
-  max-width: 800px;
-  position: relative;
-
-  .close-icon,
-  .angle-icon {
-    width: 16px;
-    height: 16px;
-    fill: #565656;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    transform: rotate(180deg);
-    cursor: pointer;
-  }
-}
-
-.stack-block-expanded > .stack-block-label {
-  .close-icon,
-  .angle-icon {
-    fill: #ffffff;
-  }
-}
-
-.dropdown-menu {
-  position: fixed;
-  background-color: var(--dropdown-bg-color);
-  border-color: var(--block-border-color);
-  z-index: var(--z-dropdown);
-  visibility: unset;
-
-  .dropdown-item {
-    border-bottom: 1px solid transparent;
-    border-radius: 0;
-    color: var(--global-font-color3);
-    &:hover {
-      background-color: var(--row-hover-bg-color);
-      border-color: var(--row-hover-border-color);
-      color: var(--global-font-color3);
-    }
-  }
-  .dropdown-divider {
-    border-color: var(--block-border-color);
-  }
-}
-</style>
+<template>
+  <div
+    tabindex="-1"
+    :class="['tooltip-top-left combobox-container', { isOpen }]"
+  >
+    <atoms-the-icon
+      v-show="!isOpen"
+      :data-id="`${props.testId}-open-icon`"
+      class="angle-icon clr-icon"
+      name="angle"
+      @click="onFocusInput"
+    />
+    <input
+      :id="id"
+      v-model="modelValueLocal"
+      :data-id="`${props.testId}-search-input`"
+      :disabled="props.disabled"
+      type="text"
+      tabindex="-1"
+      @focus="showMenu"
+      @blur="hideMenu"
+    />
+    <atoms-the-icon
+      v-show="isOpen"
+      :data-id="`${props.testId}-close-icon`"
+      class="close-icon clr-icon"
+      name="close-circle"
+      @mousedown="clear"
+    />
+
+    <Teleport to="body">
+      <div v-show="isOpen" :style="dropdownMenuStyles" class="dropdown-menu">
+        <button
+          v-for="(item, key) in props.items"
+          :key="key"
+          :id="`${id}-${key}`"
+          :data-id="item.testId"
+          class="btn btn-link dropdown-item"
+          @mousedown="select(item.value)"
+        >
+          {{ item.text }}
+        </button>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_OptionItem[]
+  modelValue?: string | number
+  disabled?: boolean
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string | number): void
+  (event: 'select', value: string | number): void
+}>()
+
+const modelValueLocal = computed<string | number | undefined>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    if (newValue === undefined) return
+    emits('update:model-value', newValue)
+  },
+})
+
+const id = `combobox${useUniqueId()}`
+
+const dropdownMenuStyles = ref<any>({})
+const showMenu = (): void => {
+  isOpen.value = true
+
+  const input = document.querySelector(`#${id}`)
+  if (!input) return
+
+  const { top, height, left } = input.getBoundingClientRect()
+
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${left}px`,
+  }
+}
+const hideMenu = (): void => {
+  isOpen.value = false
+}
+
+const select = (value: string | number): void => {
+  emits('update:model-value', value)
+  emits('select', value)
+}
+const clear = (): void => {
+  emits('update:model-value', '')
+}
+
+const isOpen = ref<boolean>(false)
+
+const onFocusInput = (event: Event): void => {
+  const target = event.target as HTMLElement
+  target && target.nextSibling && target.nextSibling.focus()
+}
+</script>
+
+<style scoped lang="scss">
+.combobox-container {
+  max-width: 800px;
+  position: relative;
+
+  .close-icon,
+  .angle-icon {
+    width: 16px;
+    height: 16px;
+    fill: #565656;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    transform: rotate(180deg);
+    cursor: pointer;
+  }
+}
+
+.stack-block-expanded > .stack-block-label {
+  .close-icon,
+  .angle-icon {
+    fill: #ffffff;
+  }
+}
+
+.dropdown-menu {
+  position: fixed;
+  background-color: var(--dropdown-bg-color);
+  border-color: var(--block-border-color);
+  z-index: var(--z-dropdown);
+  visibility: unset;
+
+  .dropdown-item {
+    border-bottom: 1px solid transparent;
+    border-radius: 0;
+    color: var(--global-font-color3);
+    &:hover {
+      background-color: var(--row-hover-bg-color);
+      border-color: var(--row-hover-border-color);
+      color: var(--global-font-color3);
+    }
+  }
+  .dropdown-divider {
+    border-color: var(--block-border-color);
+  }
+}
+</style>