bfg-common 1.4.878 → 1.4.880

package/components/atoms/collapse/CollapseNav.vue

@@ -1,164 +1,164 @@
-<template>
-  <div class="tabs-overflow bottom-right">
-    <button
-      :id="collapsedBtnId"
-      :class="[
-        'btn btn-link nav-link dropdown-toggle',
-        { active: collapsedBtnActive },
-      ]"
-      :data-id="`${props.testId}-toggle-button`"
-      @mouseenter="hover = true"
-      @mouseleave="hover = false"
-      @mousedown="showMenu"
-    >
-      <atoms-the-icon
-        name="ellipsis-horizontal"
-        :class="['collapse-icon', { active: open }]"
-        width="16px"
-        height="16px"
-      />
-    </button>
-
-    <Teleport to="body">
-      <ul
-        v-show="open"
-        :class="['navbar-dropdown-menu', props.popupClass]"
-        :style="dropdownMenuStyles"
-      >
-        <li
-          v-for="(item, key) in items"
-          :key="key"
-          class="navbar-dropdown-menu-item"
-          @mousedown.stop
-        >
-          <div
-            v-if="item.separate"
-            class="navbar-dropdown-menu-separator"
-          ></div>
-          <atoms-collapse-nav-item
-            v-else
-            :is-link="props.isLink"
-            :item="item"
-            :value="value"
-            btn-class="btn"
-            @change="change"
-            @select-file="onSelectFile($event, key)"
-          />
-        </li>
-      </ul>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_CollapseNavItem[]
-    isLink?: boolean
-    value?: number | string
-    popupClass?: string
-    closeAfterClick?: boolean
-    testId?: string
-  }>(),
-  {
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-  (event: 'select-file', value1: Event, value2: string, value3: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('change', value)
-  props.closeAfterClick && (open.value = false)
-}
-const onSelectFile = (event: Event, type: string, key: number): void => {
-  emits('select-file', event, type, key)
-}
-
-const collapsedBtnId = ref<string>('')
-
-const route = useRoute()
-const collapsedBtnActive = computed<boolean>(() => {
-  if (props.isLink)
-    return props.items.some((item) => route.path.includes(item.path || ''))
-
-  return props.items.some((item) => item.value === props.value)
-})
-
-const open = ref<boolean>(false)
-const hover = ref<boolean>(false)
-const dropdownMenuStyles = ref({})
-const showMenu = (): void => {
-  if (open.value) {
-    hideMenu(true)
-    return
-  }
-
-  open.value = true
-
-  const btn = document.querySelector(`#${collapsedBtnId.value}`)
-  const { top, height, right } = btn!.getBoundingClientRect()
-  dropdownMenuStyles.value = {
-    top: `${top + height}px`,
-    left: `${right}px`,
-  }
-}
-const hideMenu = (force?: boolean): void => {
-  if (hover.value && !force) return
-
-  open.value = false
-}
-
-const windowClick = (): void => {
-  hideMenu()
-}
-const windowResize = (): void => {
-  hideMenu(true)
-}
-onMounted(() => {
-  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
-  window.addEventListener('mousedown', windowClick)
-  window.addEventListener('resize', windowResize)
-})
-onUnmounted(() => {
-  window.removeEventListener('mousedown', windowClick)
-  window.removeEventListener('resize', windowResize)
-})
-</script>
-
-<style scoped lang="scss">
-.tabs-overflow {
-  position: absolute;
-  top: 0;
-  right: 24px;
-
-  .dropdown-toggle {
-    .collapse-icon {
-      fill: var(--main-color-mode);
-
-      &.active {
-        fill: #0077b8;
-      }
-    }
-  }
-}
-
-.navbar-dropdown-menu {
-  position: fixed;
-  z-index: 1000000000;
-  transform: translateX(-100%);
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  margin-top: 2px;
-  background-color: var(--global-bg-color);
-  padding: 12px 0;
-}
-.navbar-dropdown-menu-separator {
-  margin: 6px 0;
-  border-bottom: 0.8px solid #e8e8e8;
-}
-</style>
+<template>
+  <div class="tabs-overflow bottom-right">
+    <button
+      :id="collapsedBtnId"
+      :class="[
+        'btn btn-link nav-link dropdown-toggle',
+        { active: collapsedBtnActive },
+      ]"
+      :data-id="`${props.testId}-toggle-button`"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <atoms-the-icon
+        name="ellipsis-horizontal"
+        :class="['collapse-icon', { active: open }]"
+        width="16px"
+        height="16px"
+      />
+    </button>
+
+    <Teleport to="body">
+      <ul
+        v-show="open"
+        :class="['navbar-dropdown-menu', props.popupClass]"
+        :style="dropdownMenuStyles"
+      >
+        <li
+          v-for="(item, key) in items"
+          :key="key"
+          class="navbar-dropdown-menu-item"
+          @mousedown.stop
+        >
+          <div
+            v-if="item.separate"
+            class="navbar-dropdown-menu-separator"
+          ></div>
+          <atoms-collapse-nav-item
+            v-else
+            :is-link="props.isLink"
+            :item="item"
+            :value="value"
+            btn-class="btn"
+            @change="change"
+            @select-file="onSelectFile($event, key)"
+          />
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_CollapseNavItem[]
+    isLink?: boolean
+    value?: number | string
+    popupClass?: string
+    closeAfterClick?: boolean
+    testId?: string
+  }>(),
+  {
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+  (event: 'select-file', value1: Event, value2: string, value3: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('change', value)
+  props.closeAfterClick && (open.value = false)
+}
+const onSelectFile = (event: Event, type: string, key: number): void => {
+  emits('select-file', event, type, key)
+}
+
+const collapsedBtnId = ref<string>('')
+
+const route = useRoute()
+const collapsedBtnActive = computed<boolean>(() => {
+  if (props.isLink)
+    return props.items.some((item) => route.path.includes(item.path || ''))
+
+  return props.items.some((item) => item.value === props.value)
+})
+
+const open = ref<boolean>(false)
+const hover = ref<boolean>(false)
+const dropdownMenuStyles = ref({})
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${collapsedBtnId.value}`)
+  const { top, height, right } = btn!.getBoundingClientRect()
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${right}px`,
+  }
+}
+const hideMenu = (force?: boolean): void => {
+  if (hover.value && !force) return
+
+  open.value = false
+}
+
+const windowClick = (): void => {
+  hideMenu()
+}
+const windowResize = (): void => {
+  hideMenu(true)
+}
+onMounted(() => {
+  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
+  window.addEventListener('mousedown', windowClick)
+  window.addEventListener('resize', windowResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', windowClick)
+  window.removeEventListener('resize', windowResize)
+})
+</script>
+
+<style scoped lang="scss">
+.tabs-overflow {
+  position: absolute;
+  top: 0;
+  right: 24px;
+
+  .dropdown-toggle {
+    .collapse-icon {
+      fill: var(--main-color-mode);
+
+      &.active {
+        fill: #0077b8;
+      }
+    }
+  }
+}
+
+.navbar-dropdown-menu {
+  position: fixed;
+  z-index: 1000000000;
+  transform: translateX(-100%);
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  margin-top: 2px;
+  background-color: var(--global-bg-color);
+  padding: 12px 0;
+}
+.navbar-dropdown-menu-separator {
+  margin: 6px 0;
+  border-bottom: 0.8px solid #e8e8e8;
+}
+</style>

package/components/atoms/dropdown/dropdown/Dropdown.vue

@@ -1,168 +1,168 @@
-<template>
-  <div :class="['dropdown', { open }]">
-    <div
-      v-on-click-outside="onClickOutsideHandler"
-      class="dropdown-toggle-container"
-      :data-id="`${props.testId}-show-dropdown-menu`"
-      @click="showDropMenu"
-    >
-      <span class="nav-link">
-        <span class="nav-icon user-menu-large">
-          <slot name="icon">
-            <atoms-the-icon class="user-icon" name="user" />
-          </slot>
-          <span v-if="props.title">{{ title }}</span>
-          <atoms-the-icon class="angle-icon down" name="angle" />
-        </span>
-      </span>
-    </div>
-    <div
-      v-show="open && dropMenu?.length"
-      ref="ignoreElRef"
-      class="dropdown-menu position-right"
-    >
-      <div v-for="(item, key) in dropMenu" :key="key">
-        <button
-          :id="`${props.testId}-item`"
-          class="dropdown-item"
-          :class="item.disabled && 'disabled'"
-          :data-id="item.testId"
-          @click="onSelect(key)"
-        >
-          <a
-            v-if="item.href"
-            :id="`${props.testId}-link`"
-            :href="item.href"
-            :data-id="`${item.testId}-link`"
-            >{{ item.text }}</a
-          >
-          <a v-else>{{ item.text }} </a>
-        </button>
-        <div v-if="item.divider" class="dropdown-divider" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components'
-import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
-
-const emits = defineEmits(['select'])
-const props = withDefaults(
-  defineProps<{
-    dropMenu: UI_I_DropMenu<string>[]
-    testId?: string
-    title?: string
-  }>(),
-  { testId: 'ui-dropdown' }
-)
-
-const open = ref<boolean>(false)
-const showDropMenu = (): void => {
-  open.value = !open.value
-}
-const onSelect = (key: number): void => {
-  const { dropMenu } = props
-
-  if (dropMenu[key].disabled) return
-
-  if (dropMenu[key].closeAfterClick) open.value = false
-  emits('select', props.dropMenu[key])
-}
-const hide = (): void => {
-  open.value = false
-}
-
-const ignoreElRef = ref<Event | null>(null)
-const onClickOutsideHandler = [hide, { ignore: [ignoreElRef] }]
-</script>
-
-<style>
-:root {
-  --dropdown-position-left: auto;
-  --dropdown-position-right: 0;
-}
-:root[dir='rtl'] {
-  --dropdown-position-left: 0;
-  --dropdown-position-right: auto;
-}
-</style>
-<style scoped lang="scss">
-.dropdown {
-  height: 100%;
-
-  .dropdown-toggle-container {
-    height: 100%;
-    cursor: pointer;
-
-    .nav-link {
-      height: 100%;
-      padding: 0;
-
-      .user-menu-large {
-        width: auto;
-        display: flex;
-        align-items: center;
-        padding: 0 9px;
-        font-size: inherit;
-        line-height: 3rem;
-        &.nav-icon {
-          line-height: 3rem;
-        }
-
-        .user-icon {
-          width: 24px;
-          height: 24px;
-          fill: #fafafa;
-        }
-        .angle-icon {
-          width: 16px;
-          height: 16px;
-          fill: #fafafa;
-
-          &.down {
-            transform: rotate(-180deg);
-          }
-        }
-        span {
-          margin-right: 4px;
-          margin-left: 4px;
-          font-size: 13px;
-        }
-      }
-    }
-  }
-  .dropdown-menu {
-    background-color: var(--dropdown-bg-color);
-    border-color: var(--block-border-color);
-    z-index: 10000;
-    left: var(--dropdown-position-left);
-    right: var(--dropdown-position-right);
-
-    .dropdown-item {
-      font-size: 0.7rem;
-      border-bottom: 1px solid transparent;
-      &:hover {
-        background-color: var(--row-hover-bg-color);
-        border-color: var(--row-hover-border-color);
-      }
-      & > a {
-        color: var(--dropdown-item-color);
-        &:active {
-          color: #004a70;
-        }
-      }
-      &.disabled {
-        border-bottom: none;
-        > a {
-          text-decoration: none;
-        }
-      }
-    }
-    .dropdown-divider {
-      border-color: var(--block-border-color);
-    }
-  }
-}
-</style>
+<template>
+  <div :class="['dropdown', { open }]">
+    <div
+      v-on-click-outside="onClickOutsideHandler"
+      class="dropdown-toggle-container"
+      :data-id="`${props.testId}-show-dropdown-menu`"
+      @click="showDropMenu"
+    >
+      <span class="nav-link">
+        <span class="nav-icon user-menu-large">
+          <slot name="icon">
+            <atoms-the-icon class="user-icon" name="user" />
+          </slot>
+          <span v-if="props.title">{{ title }}</span>
+          <atoms-the-icon class="angle-icon down" name="angle" />
+        </span>
+      </span>
+    </div>
+    <div
+      v-show="open && dropMenu?.length"
+      ref="ignoreElRef"
+      class="dropdown-menu position-right"
+    >
+      <div v-for="(item, key) in dropMenu" :key="key">
+        <button
+          :id="`${props.testId}-item`"
+          class="dropdown-item"
+          :class="item.disabled && 'disabled'"
+          :data-id="item.testId"
+          @click="onSelect(key)"
+        >
+          <a
+            v-if="item.href"
+            :id="`${props.testId}-link`"
+            :href="item.href"
+            :data-id="`${item.testId}-link`"
+            >{{ item.text }}</a
+          >
+          <a v-else>{{ item.text }} </a>
+        </button>
+        <div v-if="item.divider" class="dropdown-divider" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+
+const emits = defineEmits(['select'])
+const props = withDefaults(
+  defineProps<{
+    dropMenu: UI_I_DropMenu<string>[]
+    testId?: string
+    title?: string
+  }>(),
+  { testId: 'ui-dropdown' }
+)
+
+const open = ref<boolean>(false)
+const showDropMenu = (): void => {
+  open.value = !open.value
+}
+const onSelect = (key: number): void => {
+  const { dropMenu } = props
+
+  if (dropMenu[key].disabled) return
+
+  if (dropMenu[key].closeAfterClick) open.value = false
+  emits('select', props.dropMenu[key])
+}
+const hide = (): void => {
+  open.value = false
+}
+
+const ignoreElRef = ref<Event | null>(null)
+const onClickOutsideHandler = [hide, { ignore: [ignoreElRef] }]
+</script>
+
+<style>
+:root {
+  --dropdown-position-left: auto;
+  --dropdown-position-right: 0;
+}
+:root[dir='rtl'] {
+  --dropdown-position-left: 0;
+  --dropdown-position-right: auto;
+}
+</style>
+<style scoped lang="scss">
+.dropdown {
+  height: 100%;
+
+  .dropdown-toggle-container {
+    height: 100%;
+    cursor: pointer;
+
+    .nav-link {
+      height: 100%;
+      padding: 0;
+
+      .user-menu-large {
+        width: auto;
+        display: flex;
+        align-items: center;
+        padding: 0 9px;
+        font-size: inherit;
+        line-height: 3rem;
+        &.nav-icon {
+          line-height: 3rem;
+        }
+
+        .user-icon {
+          width: 24px;
+          height: 24px;
+          fill: #fafafa;
+        }
+        .angle-icon {
+          width: 16px;
+          height: 16px;
+          fill: #fafafa;
+
+          &.down {
+            transform: rotate(-180deg);
+          }
+        }
+        span {
+          margin-right: 4px;
+          margin-left: 4px;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+  .dropdown-menu {
+    background-color: var(--dropdown-bg-color);
+    border-color: var(--block-border-color);
+    z-index: 10000;
+    left: var(--dropdown-position-left);
+    right: var(--dropdown-position-right);
+
+    .dropdown-item {
+      font-size: 0.7rem;
+      border-bottom: 1px solid transparent;
+      &:hover {
+        background-color: var(--row-hover-bg-color);
+        border-color: var(--row-hover-border-color);
+      }
+      & > a {
+        color: var(--dropdown-item-color);
+        &:active {
+          color: #004a70;
+        }
+      }
+      &.disabled {
+        border-bottom: none;
+        > a {
+          text-decoration: none;
+        }
+      }
+    }
+    .dropdown-divider {
+      border-color: var(--block-border-color);
+    }
+  }
+}
+</style>