bfg-common 1.5.92 → 1.5.94

package/components/atoms/dropdown/Portlet.vue

@@ -1,113 +1,113 @@
-<template>
-  <div class="portlet">
-    <div
-      :data-id="`${props.testId}-toggle-portlet`"
-      :class="['portlet-titlebar', { disabled }]"
-      @click="togglePortlet"
-    >
-      <atoms-the-icon
-        :class="['arrow-icon', { collapsed: portletCollapsed }]"
-        name="arrow"
-      />
-
-      <span class="titlebar-text">{{ title }}</span>
-    </div>
-
-    <div v-show="!portletCollapsed" class="portlet-content">
-      <slot name="portletBody" />
-    </div>
-    <div v-show="!portletCollapsed" class="portlet-footer">
-      <slot name="portletFooter" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  title: string
-  disabled?: boolean
-  testId?: string
-}>()
-
-const isOpen = ref<boolean>(false)
-
-const portletCollapsed = computed<boolean>(() => {
-  if (props.disabled) {
-    return true
-  }
-  return isOpen.value
-})
-
-const togglePortlet = (): boolean => (isOpen.value = !isOpen.value)
-</script>
-
-<style scoped lang="scss">
-.portlet {
-  box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
-  min-height: 30px;
-  border: 1px solid var(--portlet-border-color);
-  border-radius: 3px;
-  overflow: auto;
-  background: var(--portlet-bg-color);
-  margin: 0 0 12px;
-  flex-shrink: 0;
-  box-sizing: border-box;
-
-  .portlet-titlebar {
-    cursor: pointer;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-    margin: 0;
-    padding: 12px 10px;
-    box-sizing: border-box;
-    position: relative;
-    overflow: hidden;
-
-    &.disabled {
-      opacity: 0.3;
-      pointer-events: none;
-    }
-
-    .titlebar-text {
-      flex: 1 1 100%;
-      display: inline-flex !important;
-      white-space: nowrap;
-      overflow: hidden !important;
-      padding: 0 !important;
-      box-sizing: border-box;
-      max-width: none !important;
-      font-size: 14px;
-    }
-
-    .arrow-icon {
-      transition: all 0.2s ease-in 0s;
-      fill: #0079b8;
-
-      &.collapsed {
-        transform: rotate(180deg);
-      }
-    }
-    &:hover {
-      .arrow-icon {
-        fill: #004a70;
-      }
-    }
-  }
-
-  .portlet-content {
-    padding: 0 10px 5px;
-  }
-}
-</style>
-
-<style>
-:root {
-  --portlet-bg-color: #fff;
-  --portlet-border-color: #d3d3d3;
-}
-:root.dark-theme {
-  --portlet-bg-color: transparent;
-  --portlet-border-color: #000000;
-}
-</style>
+<template>
+  <div class="portlet">
+    <div
+      :data-id="`${props.testId}-toggle-portlet`"
+      :class="['portlet-titlebar', { disabled }]"
+      @click="togglePortlet"
+    >
+      <atoms-the-icon
+        :class="['arrow-icon', { collapsed: portletCollapsed }]"
+        name="arrow"
+      />
+
+      <span class="titlebar-text">{{ title }}</span>
+    </div>
+
+    <div v-show="!portletCollapsed" class="portlet-content">
+      <slot name="portletBody" />
+    </div>
+    <div v-show="!portletCollapsed" class="portlet-footer">
+      <slot name="portletFooter" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  disabled?: boolean
+  testId?: string
+}>()
+
+const isOpen = ref<boolean>(false)
+
+const portletCollapsed = computed<boolean>(() => {
+  if (props.disabled) {
+    return true
+  }
+  return isOpen.value
+})
+
+const togglePortlet = (): boolean => (isOpen.value = !isOpen.value)
+</script>
+
+<style scoped lang="scss">
+.portlet {
+  box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
+  min-height: 30px;
+  border: 1px solid var(--portlet-border-color);
+  border-radius: 3px;
+  overflow: auto;
+  background: var(--portlet-bg-color);
+  margin: 0 0 12px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  .portlet-titlebar {
+    cursor: pointer;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    margin: 0;
+    padding: 12px 10px;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+
+    &.disabled {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
+    .titlebar-text {
+      flex: 1 1 100%;
+      display: inline-flex !important;
+      white-space: nowrap;
+      overflow: hidden !important;
+      padding: 0 !important;
+      box-sizing: border-box;
+      max-width: none !important;
+      font-size: 14px;
+    }
+
+    .arrow-icon {
+      transition: all 0.2s ease-in 0s;
+      fill: #0079b8;
+
+      &.collapsed {
+        transform: rotate(180deg);
+      }
+    }
+    &:hover {
+      .arrow-icon {
+        fill: #004a70;
+      }
+    }
+  }
+
+  .portlet-content {
+    padding: 0 10px 5px;
+  }
+}
+</style>
+
+<style>
+:root {
+  --portlet-bg-color: #fff;
+  --portlet-border-color: #d3d3d3;
+}
+:root.dark-theme {
+  --portlet-bg-color: transparent;
+  --portlet-border-color: #000000;
+}
+</style>

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

@@ -1,168 +1,168 @@
-<template>
-  <div :class="['dropdown', { open }]">
-    <div
-      v-on-click-outside="onClickOutsideHandler"
-      :data-id="`${props.testId}-show-dropdown-menu`"
-      class="dropdown-toggle-container"
-      @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="item.disabled && 'disabled'"
-          :data-id="item.testId"
-          class="dropdown-item"
-          @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 props = withDefaults(
-  defineProps<{
-    dropMenu: UI_I_DropMenu<string>[]
-    testId?: string
-    title?: string
-  }>(),
-  { testId: 'ui-dropdown' }
-)
-const emits = defineEmits(['select'])
-
-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: var(--z-dropdown);
-    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"
+      :data-id="`${props.testId}-show-dropdown-menu`"
+      class="dropdown-toggle-container"
+      @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="item.disabled && 'disabled'"
+          :data-id="item.testId"
+          class="dropdown-item"
+          @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 props = withDefaults(
+  defineProps<{
+    dropMenu: UI_I_DropMenu<string>[]
+    testId?: string
+    title?: string
+  }>(),
+  { testId: 'ui-dropdown' }
+)
+const emits = defineEmits(['select'])
+
+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: var(--z-dropdown);
+    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>