bfg-common 1.2.112 → 1.2.113

package/components/atoms/popup/SimplePopup.vue

@@ -1,90 +1,90 @@
-<template>
-  <div
-    v-show="modelValue"
-    :style="{ top, bottom, left, right }"
-    class="simple-popup clr-popover-content"
-    @click.stop
-  >
-    <div class="close-wrapper">
-      <button
-        :id="`${props.testId}-close-icon`"
-        class="close clr-smart-close-button"
-        @click="hide"
-      >
-        <atoms-the-icon name="close" class="close-icon" />
-      </button>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    top?: string
-    bottom?: string
-    left?: string
-    right?: string
-    testId?: string
-  }>(),
-  { testId: 'ui-simple-popup' }
-)
-const emits = defineEmits<{
-  (event: 'update:model-value', value: boolean): void
-}>()
-const hide = (): void => {
-  emits('update:model-value', false)
-}
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (newValue) {
-      setTimeout(() => {
-        window.addEventListener('click', hide)
-      }, 0)
-      return
-    }
-    window.removeEventListener('click', hide)
-  }
-)
-</script>
-
-<style scoped lang="scss">
-.simple-popup {
-  background: var(--popup-bgcolor);
-  margin-top: 5px;
-  border: 1px solid var(--table-border-color);
-  padding: 18px;
-  box-shadow: 0 1px 3px hsl(0deg 0% 55% / 25%);
-  border-radius: 3px;
-  font-weight: 400;
-  position: absolute;
-  z-index: 5000;
-  cursor: default;
-  opacity: 1;
-
-  .close-wrapper {
-    text-align: right;
-
-    .clr-smart-close-button {
-      .close-icon {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-}
-</style>
-
-<style>
-:root {
-  --popup-bgcolor: #fafafa;
-  --table-border-color: #ccc;
-}
-:root.dark-theme {
-  --popup-bgcolor: #29414e;
-  --table-border-color: #495865;
-}
-</style>
+<template>
+  <div
+    v-show="modelValue"
+    :style="{ top, bottom, left, right }"
+    class="simple-popup clr-popover-content"
+    @click.stop
+  >
+    <div class="close-wrapper">
+      <button
+        :id="`${props.testId}-close-icon`"
+        class="close clr-smart-close-button"
+        @click="hide"
+      >
+        <atoms-the-icon name="close" class="close-icon" />
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    top?: string
+    bottom?: string
+    left?: string
+    right?: string
+    testId?: string
+  }>(),
+  { testId: 'ui-simple-popup' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', value: boolean): void
+}>()
+const hide = (): void => {
+  emits('update:model-value', false)
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      setTimeout(() => {
+        window.addEventListener('click', hide)
+      }, 0)
+      return
+    }
+    window.removeEventListener('click', hide)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.simple-popup {
+  background: var(--popup-bgcolor);
+  margin-top: 5px;
+  border: 1px solid var(--table-border-color);
+  padding: 18px;
+  box-shadow: 0 1px 3px hsl(0deg 0% 55% / 25%);
+  border-radius: 3px;
+  font-weight: 400;
+  position: absolute;
+  z-index: 5000;
+  cursor: default;
+  opacity: 1;
+
+  .close-wrapper {
+    text-align: right;
+
+    .clr-smart-close-button {
+      .close-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --popup-bgcolor: #fafafa;
+  --table-border-color: #ccc;
+}
+:root.dark-theme {
+  --popup-bgcolor: #29414e;
+  --table-border-color: #495865;
+}
+</style>

package/components/atoms/select/TheSelect.vue

@@ -1,175 +1,175 @@
-<template>
-  <div class="select">
-    <button
-      :id="props.testId"
-      class="btn btn-link nav-link select-toggle text-ellipsis"
-      @mouseenter="hover = true"
-      @mouseleave="hover = false"
-      @mousedown="showMenu"
-    >
-      <slot></slot>
-      {{ selectedItem?.text }}
-      <atoms-the-icon
-        name="arrow"
-        :class="['select-arrow', { active: open }]"
-      />
-    </button>
-    <Teleport to="body">
-      <ul v-show="open" class="select-menu" :style="selectMenuStyles">
-        <li
-          v-for="item in props.options"
-          :id="`${props.testId}-item`"
-          :key="item.value"
-          class="select-item"
-          @mousedown.stop
-          @click="select(item.value)"
-        >
-          {{ item.text }}
-        </li>
-      </ul>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Option } from '~/components/atoms/select/models/interfaces'
-const props = withDefaults(
-  defineProps<{
-    modelValue: number | string
-    options: UI_I_Option[]
-    testId?: string
-  }>(),
-  { testId: 'ui-select' }
-)
-
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string | number): void
-}>()
-
-const open = ref<boolean>(false)
-const hover = ref<boolean>(false)
-const selectMenuStyles = ref({})
-
-const selectedItem = computed<UI_I_Option | undefined>(() => {
-  return props.options.find((option) => option.value === props.modelValue)
-})
-
-const select = (value: number | string): void => {
-  const selectedItem = props.options.find((option) => option.value === value)
-  if (!selectedItem) return
-
-  emits('update:model-value', selectedItem.value)
-}
-const showMenu = (): void => {
-  if (open.value) {
-    hideMenu(true)
-    return
-  }
-
-  open.value = true
-
-  const btn = document.querySelector(`#${props.testId}`)
-  if (!btn) return
-  const { top, height, right } = btn.getBoundingClientRect()
-
-  selectMenuStyles.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 windowScroll = (): void => {
-  hideMenu()
-}
-onMounted(() => {
-  window.addEventListener('click', windowClick)
-  window.addEventListener('scroll', windowScroll, true)
-})
-onUnmounted(() => {
-  window.removeEventListener('click', windowClick)
-  window.removeEventListener('scroll', windowScroll)
-})
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins';
-%hover-effect {
-  margin-bottom: -1px;
-  border-bottom: 1px solid var(--row-hover-border-color);
-  background-color: var(--row-hover-bg-color);
-  text-decoration: none;
-  cursor: pointer;
-}
-%active-mode {
-  background-color: var(--row-selected-bg-color);
-  color: var(--row-selected-text-color);
-}
-%border-effect {
-  box-shadow: 0 -0.15rem 0 var(--nav-active-box-shadow-color) inset;
-}
-
-.select {
-  position: relative;
-
-  .select-toggle {
-    display: block;
-    gap: 4px;
-    text-transform: uppercase;
-    cursor: pointer;
-    padding: 0 24px 0 12px;
-    margin: 0;
-    background-color: transparent;
-    color: var(--global-font-color);
-    max-width: 360px;
-
-    &:hover {
-      color: var(--global-font-color);
-    }
-  }
-
-  .select-arrow {
-    width: 12px;
-    height: 12px;
-    transform: rotate(180deg);
-    color: inherit;
-    fill: var(--arrows-icon);
-  }
-
-  &::after {
-    display: none;
-  }
-}
-
-.select-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;
-
-  .select-item {
-    color: var(--global-font-color3);
-    padding: 3px 24px;
-    font-size: 14px;
-    font-weight: 400;
-    border-bottom: 1px solid transparent;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--row-hover-bg-color);
-      border-color: var(--row-hover-border-color);
-    }
-  }
-}
-</style>
+<template>
+  <div class="select">
+    <button
+      :id="props.testId"
+      class="btn btn-link nav-link select-toggle text-ellipsis"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <slot></slot>
+      {{ selectedItem?.text }}
+      <atoms-the-icon
+        name="arrow"
+        :class="['select-arrow', { active: open }]"
+      />
+    </button>
+    <Teleport to="body">
+      <ul v-show="open" class="select-menu" :style="selectMenuStyles">
+        <li
+          v-for="item in props.options"
+          :id="`${props.testId}-item`"
+          :key="item.value"
+          class="select-item"
+          @mousedown.stop
+          @click="select(item.value)"
+        >
+          {{ item.text }}
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Option } from '~/components/atoms/select/models/interfaces'
+const props = withDefaults(
+  defineProps<{
+    modelValue: number | string
+    options: UI_I_Option[]
+    testId?: string
+  }>(),
+  { testId: 'ui-select' }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string | number): void
+}>()
+
+const open = ref<boolean>(false)
+const hover = ref<boolean>(false)
+const selectMenuStyles = ref({})
+
+const selectedItem = computed<UI_I_Option | undefined>(() => {
+  return props.options.find((option) => option.value === props.modelValue)
+})
+
+const select = (value: number | string): void => {
+  const selectedItem = props.options.find((option) => option.value === value)
+  if (!selectedItem) return
+
+  emits('update:model-value', selectedItem.value)
+}
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${props.testId}`)
+  if (!btn) return
+  const { top, height, right } = btn.getBoundingClientRect()
+
+  selectMenuStyles.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 windowScroll = (): void => {
+  hideMenu()
+}
+onMounted(() => {
+  window.addEventListener('click', windowClick)
+  window.addEventListener('scroll', windowScroll, true)
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+  window.removeEventListener('scroll', windowScroll)
+})
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins';
+%hover-effect {
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--row-hover-border-color);
+  background-color: var(--row-hover-bg-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+%active-mode {
+  background-color: var(--row-selected-bg-color);
+  color: var(--row-selected-text-color);
+}
+%border-effect {
+  box-shadow: 0 -0.15rem 0 var(--nav-active-box-shadow-color) inset;
+}
+
+.select {
+  position: relative;
+
+  .select-toggle {
+    display: block;
+    gap: 4px;
+    text-transform: uppercase;
+    cursor: pointer;
+    padding: 0 24px 0 12px;
+    margin: 0;
+    background-color: transparent;
+    color: var(--global-font-color);
+    max-width: 360px;
+
+    &:hover {
+      color: var(--global-font-color);
+    }
+  }
+
+  .select-arrow {
+    width: 12px;
+    height: 12px;
+    transform: rotate(180deg);
+    color: inherit;
+    fill: var(--arrows-icon);
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+.select-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;
+
+  .select-item {
+    color: var(--global-font-color3);
+    padding: 3px 24px;
+    font-size: 14px;
+    font-weight: 400;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--row-hover-bg-color);
+      border-color: var(--row-hover-border-color);
+    }
+  }
+}
+</style>

package/components/atoms/select/models/interfaces.ts

@@ -1,4 +1,4 @@
-export interface UI_I_Option {
-  text: string
-  value: number | string
-}
+export interface UI_I_Option {
+  text: string
+  value: number | string
+}