bfg-common 1.0.15 → 1.0.17

package/components/atoms/dropdown/tree/Tree.vue

@@ -1,134 +1,134 @@
-<template>
-  <div :class="['dropdown-tree dropdown', { open }]">
-    <button
-      :id="`${props.testId}`"
-      class="btn btn-outline-primary dropdown-toggle"
-      @click.stop="toggle"
-    >
-      <span class="title">{{ props.title }}</span>
-      <atoms-the-icon name="arrow" class="dropdown-arrow" />
-    </button>
-    <div v-show="open" id="dropdown-menu" class="dropdown-menu">
-      <div v-for="(item, key) in props.items" :key="key">
-        <h4>{{ item.text }}</h4>
-        <button
-          v-for="(item2, key2) in item.children"
-          :id="`${props.testId}-item-${key}-${key2}`"
-          :key="key2"
-          class="btn dropdown-item"
-          @click="select(item2)"
-        >
-          {{ item2.text }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_DropdownTreeItem,
-  UI_I_DropdownTreeItemChild,
-} from '~/components/atoms/dropdown/tree/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    items: UI_I_DropdownTreeItem[]
-    title: string
-  }>(),
-  { testId: 'ui-dropdown-tree' }
-)
-const emits = defineEmits(['select'])
-
-const select = (item: UI_I_DropdownTreeItemChild): void => {
-  emits('select', item)
-}
-
-const open = ref(false)
-const toggle = (): void => {
-  open.value = !open.value
-  if (open.value) {
-    setMenuPosition()
-  }
-}
-const setMenuPosition = (): void => {
-  const menu = document.getElementById('dropdown-menu') as HTMLDivElement | null
-  const btnEl = document.getElementById(
-    props.testId
-  ) as HTMLButtonElement | null
-  const btnRect = btnEl?.getBoundingClientRect() as DOMRect | undefined
-
-  if (!menu || !btnRect) return
-  menu.style.top = `${btnRect.bottom}px`
-  menu.style.left = `${btnRect.right}px`
-}
-
-const hide = (): void => {
-  open.value = false
-}
-const windowClick = (): void => {
-  hide()
-}
-const windowScroll = (): void => {
-  hide()
-}
-onMounted(() => {
-  window.addEventListener('click', windowClick)
-  window.addEventListener('scroll', windowScroll, true)
-})
-onUnmounted(() => {
-  window.removeEventListener('click', windowClick)
-  window.removeEventListener('scroll', windowScroll, true)
-})
-</script>
-
-<style scoped lang="scss">
-.dropdown-tree {
-  position: static;
-
-  .dropdown-toggle {
-    border-color: transparent;
-    position: relative;
-
-    &:hover {
-      background-color: transparent;
-    }
-    &:active {
-      box-shadow: unset;
-    }
-
-    .title {
-      font-size: 12px;
-    }
-
-    .dropdown-arrow {
-      width: 10px;
-      height: 10px;
-      position: absolute;
-      transform: translateY(-50%) rotate(180deg);
-      top: 50%;
-      right: 12px;
-      fill: #007cbb;
-    }
-  }
-
-  .dropdown-menu {
-    position: fixed;
-    transform: translateX(-100%);
-
-    h4 {
-      font-size: 12px;
-      padding: 0 12px;
-      color: #333;
-      font-weight: 600;
-    }
-
-    button {
-      &:hover {
-        border-bottom: 1px solid #666;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div :class="['dropdown-tree dropdown', { open }]">
+    <button
+      :id="`${props.testId}`"
+      class="btn btn-outline-primary dropdown-toggle"
+      @click.stop="toggle"
+    >
+      <span class="title">{{ props.title }}</span>
+      <atoms-the-icon name="arrow" class="dropdown-arrow" />
+    </button>
+    <div v-show="open" id="dropdown-menu" class="dropdown-menu">
+      <div v-for="(item, key) in props.items" :key="key">
+        <h4>{{ item.text }}</h4>
+        <button
+          v-for="(item2, key2) in item.children"
+          :id="`${props.testId}-item-${key}-${key2}`"
+          :key="key2"
+          class="btn dropdown-item"
+          @click="select(item2)"
+        >
+          {{ item2.text }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_DropdownTreeItem,
+  UI_I_DropdownTreeItemChild,
+} from '~/components/atoms/dropdown/tree/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    items: UI_I_DropdownTreeItem[]
+    title: string
+  }>(),
+  { testId: 'ui-dropdown-tree' }
+)
+const emits = defineEmits(['select'])
+
+const select = (item: UI_I_DropdownTreeItemChild): void => {
+  emits('select', item)
+}
+
+const open = ref(false)
+const toggle = (): void => {
+  open.value = !open.value
+  if (open.value) {
+    setMenuPosition()
+  }
+}
+const setMenuPosition = (): void => {
+  const menu = document.getElementById('dropdown-menu') as HTMLDivElement | null
+  const btnEl = document.getElementById(
+    props.testId
+  ) as HTMLButtonElement | null
+  const btnRect = btnEl?.getBoundingClientRect() as DOMRect | undefined
+
+  if (!menu || !btnRect) return
+  menu.style.top = `${btnRect.bottom}px`
+  menu.style.left = `${btnRect.right}px`
+}
+
+const hide = (): void => {
+  open.value = false
+}
+const windowClick = (): void => {
+  hide()
+}
+const windowScroll = (): void => {
+  hide()
+}
+onMounted(() => {
+  window.addEventListener('click', windowClick)
+  window.addEventListener('scroll', windowScroll, true)
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+  window.removeEventListener('scroll', windowScroll, true)
+})
+</script>
+
+<style scoped lang="scss">
+.dropdown-tree {
+  position: static;
+
+  .dropdown-toggle {
+    border-color: transparent;
+    position: relative;
+
+    &:hover {
+      background-color: transparent;
+    }
+    &:active {
+      box-shadow: unset;
+    }
+
+    .title {
+      font-size: 12px;
+    }
+
+    .dropdown-arrow {
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      transform: translateY(-50%) rotate(180deg);
+      top: 50%;
+      right: 12px;
+      fill: #007cbb;
+    }
+  }
+
+  .dropdown-menu {
+    position: fixed;
+    transform: translateX(-100%);
+
+    h4 {
+      font-size: 12px;
+      padding: 0 12px;
+      color: #333;
+      font-weight: 600;
+    }
+
+    button {
+      &:hover {
+        border-bottom: 1px solid #666;
+      }
+    }
+  }
+}
+</style>

package/components/atoms/list/SelectList.vue

@@ -1,62 +1,62 @@
-<template>
-  <select
-    :id="`${props.testId}-select`"
-    v-model="selectedItem"
-    size="15"
-    class="list"
-  >
-    <option
-      v-for="(item, key) in props.items"
-      :key="key"
-      :disabled="item.disabled"
-      class="item"
-      :value="item.value"
-    >
-      <slot :name="`item${key}`">
-        {{ item.text }}
-      </slot>
-    </option>
-  </select>
-</template>
-
-<script setup lang="ts">
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    items: UI_I_OptionItem[]
-    modelValue: string
-  }>(),
-  { testId: 'ui-select-list' }
-)
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string): void
-}>()
-
-const selectedItem = computed<string>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.list {
-  outline: none;
-
-  .item {
-    padding: 3px 6px;
-    color: #000;
-
-    &:disabled {
-      color: #565656;
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-  }
-}
-</style>
+<template>
+  <select
+    :id="`${props.testId}-select`"
+    v-model="selectedItem"
+    size="15"
+    class="list"
+  >
+    <option
+      v-for="(item, key) in props.items"
+      :key="key"
+      :disabled="item.disabled"
+      class="item"
+      :value="item.value"
+    >
+      <slot :name="`item${key}`">
+        {{ item.text }}
+      </slot>
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    items: UI_I_OptionItem[]
+    modelValue: string
+  }>(),
+  { testId: 'ui-select-list' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+}>()
+
+const selectedItem = computed<string>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.list {
+  outline: none;
+
+  .item {
+    padding: 3px 6px;
+    color: #000;
+
+    &:disabled {
+      color: #565656;
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+}
+</style>