bfg-common 1.4.799 → 1.4.800

package/components/common/chartOptionsModal/counters/timespan/form/lib/config/dateForm.ts

@@ -1,116 +1,116 @@
-import type {
-  UI_I_ArbitraryObject,
-  UI_I_Localization,
-} from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-export const timespanFunc = (
-  localization: UI_I_Localization
-): UI_I_OptionItem[] => [
-  {
-    text: localization.inventoryMonitor.realTime,
-    value: 'real_time',
-  },
-  {
-    text: localization.inventoryMonitor.lastDay,
-    value: 'last_day',
-  },
-  {
-    text: localization.inventoryMonitor.lastWeek,
-    value: 'last_week',
-  },
-  {
-    text: localization.inventoryMonitor.lastMonth,
-    value: 'last_month',
-  },
-  // {
-  //   text: localization.inventoryMonitor.lastYear,
-  //   value: 'last_year',
-  // },
-  {
-    text: localization.inventoryMonitor.customInterval,
-    value: 'custom_interval',
-  },
-]
-
-export const customTimeFunc = (
-  localization: UI_I_Localization,
-  value: number,
-  lang: string
-): UI_I_OptionItem[] => {
-  const isLangRu = lang === 'ru_RU'
-
-  const hourText = isLangRu
-    ? getCorrectRuForm(value, 'hour')
-    : localization.common.hours2
-  const dayText = isLangRu
-    ? getCorrectRuForm(value, 'day')
-    : localization.common.days2
-  const weekText = isLangRu
-    ? getCorrectRuForm(value, 'week')
-    : localization.common.weeks2
-  const monthText = isLangRu
-    ? getCorrectRuForm(value, 'month')
-    : localization.common.months2
-
-  return [
-    {
-      text: hourText,
-      value: 'hours',
-    },
-    {
-      text: dayText,
-      value: 'days',
-    },
-    {
-      text: weekText,
-      value: 'weeks',
-    },
-    {
-      text: monthText,
-      value: 'months',
-    },
-  ]
-}
-
-export const chartTypeFunc = (
-  localization: UI_I_Localization
-): UI_I_OptionItem[] => [
-  {
-    text: localization.inventoryMonitor.lineGraph,
-    value: 'line_graph',
-  },
-  {
-    text: localization.inventoryMonitor.stackedGraph,
-    value: 'stacked_graph',
-  },
-]
-
-const getCorrectRuForm = (value: number, type: string): string => {
-  // TODO поправить используя correctRuUnit из плагина date
-  const forms: UI_I_ArbitraryObject<string[]> = {
-    hour: ['Час', 'Часа', 'Часов'],
-    day: ['День', 'Дня', 'Дней'],
-    week: ['Неделя', 'Недели', 'Недель'],
-    month: ['Месяц', 'Месяца', 'Месяцев'],
-  }
-
-  let text: string
-
-  if (!value) {
-    return getCorrectRuForm[type]
-  }
-
-  if (value % 10 === 1 && value % 100 !== 11) {
-    text = forms[type][0]
-  } else if (
-    [2, 3, 4].includes(value % 10) &&
-    ![12, 13, 14].includes(value % 100)
-  ) {
-    text = forms[type][1]
-  } else {
-    text = forms[type][2]
-  }
-  getCorrectRuForm[type] = text
-  return text
-}
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+export const timespanFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => [
+  {
+    text: localization.inventoryMonitor.realTime,
+    value: 'real_time',
+  },
+  {
+    text: localization.inventoryMonitor.lastDay,
+    value: 'last_day',
+  },
+  {
+    text: localization.inventoryMonitor.lastWeek,
+    value: 'last_week',
+  },
+  {
+    text: localization.inventoryMonitor.lastMonth,
+    value: 'last_month',
+  },
+  // {
+  //   text: localization.inventoryMonitor.lastYear,
+  //   value: 'last_year',
+  // },
+  {
+    text: localization.inventoryMonitor.customInterval,
+    value: 'custom_interval',
+  },
+]
+
+export const customTimeFunc = (
+  localization: UI_I_Localization,
+  value: number,
+  lang: string
+): UI_I_OptionItem[] => {
+  const isLangRu = lang === 'ru_RU'
+
+  const hourText = isLangRu
+    ? getCorrectRuForm(value, 'hour')
+    : localization.common.hours2
+  const dayText = isLangRu
+    ? getCorrectRuForm(value, 'day')
+    : localization.common.days2
+  const weekText = isLangRu
+    ? getCorrectRuForm(value, 'week')
+    : localization.common.weeks2
+  const monthText = isLangRu
+    ? getCorrectRuForm(value, 'month')
+    : localization.common.months2
+
+  return [
+    {
+      text: hourText,
+      value: 'hours',
+    },
+    {
+      text: dayText,
+      value: 'days',
+    },
+    {
+      text: weekText,
+      value: 'weeks',
+    },
+    {
+      text: monthText,
+      value: 'months',
+    },
+  ]
+}
+
+export const chartTypeFunc = (
+  localization: UI_I_Localization
+): UI_I_OptionItem[] => [
+  {
+    text: localization.inventoryMonitor.lineGraph,
+    value: 'line_graph',
+  },
+  {
+    text: localization.inventoryMonitor.stackedGraph,
+    value: 'stacked_graph',
+  },
+]
+
+const getCorrectRuForm = (value: number, type: string): string => {
+  // TODO поправить используя correctRuUnit из плагина date
+  const forms: UI_I_ArbitraryObject<string[]> = {
+    hour: ['Час', 'Часа', 'Часов'],
+    day: ['День', 'Дня', 'Дней'],
+    week: ['Неделя', 'Недели', 'Недель'],
+    month: ['Месяц', 'Месяца', 'Месяцев'],
+  }
+
+  let text: string
+
+  if (!value) {
+    return getCorrectRuForm[type]
+  }
+
+  if (value % 10 === 1 && value % 100 !== 11) {
+    text = forms[type][0]
+  } else if (
+    [2, 3, 4].includes(value % 10) &&
+    ![12, 13, 14].includes(value % 100)
+  ) {
+    text = forms[type][1]
+  } else {
+    text = forms[type][2]
+  }
+  getCorrectRuForm[type] = text
+  return text
+}

package/components/common/context/Context.vue

@@ -29,6 +29,10 @@ const emits = defineEmits<{
   (event: 'select-item', value: UI_I_ContextMenuItem): void
   (event: 'hide'): void
 }>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const selectItem = (item: UI_I_ContextMenuItem): void => {
   emits('select-item', item)
 }
@@ -38,11 +42,12 @@ const elementId = ref<string>(`context-${useUniqueId()}`)
 const currentContextMenuY = ref<string>('')
 const currentContextMenuX = ref<string>('')
 const setCurrentPositionsPopup = (): void => {
-  const contextMenuY = props.contextMenu.y
+  let contextMenuY = props.contextMenu.y
   const contextMenuX = props.contextMenu.x
 
-  const contextWrap: HTMLElement | null =
-    document.querySelector(`#${elementId.value} .context-wrap`)
+  const contextWrap: HTMLElement | null = document.querySelector(
+    `#${elementId.value} .context-wrap`
+  )
   const contextW = contextWrap?.offsetWidth || 0
   const contextH = contextWrap?.offsetHeight || 0
 
@@ -52,11 +57,13 @@ const setCurrentPositionsPopup = (): void => {
   if (contextMenuY + contextH >= windowH) {
     currentContextMenuY.value = 'auto'
   } else {
+    if (isNewView.value) contextMenuY += 8
     currentContextMenuY.value = `${contextMenuY}px`
   }
 
   if (contextMenuX + contextW >= windowW) {
-    const divisionW = windowW - contextW
+    let divisionW = windowW - contextW
+    if (isNewView.value) divisionW -= 16
     currentContextMenuX.value = `${divisionW}px`
   } else {
     currentContextMenuX.value = `${contextMenuX}px`
@@ -66,6 +73,9 @@ const setCurrentPositionsPopup = (): void => {
 const windowMousedown = (): void => {
   emits('hide')
 }
+const windowResize = (): void => {
+  emits('hide')
+}
 watch(
   () => props.contextMenu.y,
   (newValue: number) => {
@@ -73,8 +83,10 @@ watch(
 
     if (newValue < 0) {
       window.removeEventListener('mousedown', windowMousedown)
+      window.removeEventListener('resize', windowResize)
     } else {
       window.addEventListener('mousedown', windowMousedown)
+      window.addEventListener('resize', windowResize)
     }
 
     setTimeout(() => {

package/components/common/context/recursion/Recursion.vue

@@ -46,7 +46,8 @@ const selectItem = (item: UI_I_ContextMenuItem): void => {
 }
 
 const setElementPosition = (event: I_HTMLLiElement): void => {
-  const top = event.target.getBoundingClientRect().top
+  const top =
+    event.target.getBoundingClientRect().top - (isNewView.value ? 8 : 0)
   const childMenu = event.target.children[1].children[0]
   childMenu.style.top = `${top}px`
 

package/components/common/context/recursion/RecursionNew.vue

@@ -22,7 +22,7 @@
         @mousedown="emits('select-item', item)"
       >
         <span :class="['context-icon', item.iconClassName]" />
-        <span class="menu-item-text">{{ item.name }}</span>
+        <span class="menu-item-text text-ellipsis">{{ item.name }}</span>
         <ui-icon v-if="item.items.length" name="arrow" class="arrow-icon" />
         <span v-if="item.shortcut" class="shortcut">{{ item.shortcut }}</span>
       </span>
@@ -59,11 +59,43 @@ const emits = defineEmits<{
 }>()
 </script>
 
+<style>
+:root.is-new-view {
+  --context-menu-bg-color: #ffffff;
+  --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.4);
+  --context-menu-text-color: #4d5d69;
+  --context-menu-text-disabled-color: #bdc3c7;
+  --context-menu-text-hover-color: #182531;
+  --context-menu-border-color: #e9ebed;
+
+  /*rtl*/
+  --context-menu-wrap-transform: none;
+  --context-menu-wrap-transform-left: translateX(-100%);
+  --context-menu-wrap-left: -12px;
+  --context-menu-wrap-right: unset;
+}
+:root.is-new-view.dark-theme {
+  --context-menu-bg-color: #334453;
+  --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.06);
+  --context-menu-text-color: #e9eaec;
+  --context-menu-text-disabled-color: #bdc3c7b8;
+  --context-menu-text-hover-color: #ffffff;
+  --context-menu-border-color: rgba(233, 235, 237, 0.12);
+}
+
+:root.is-new-view[dir='rtl'] {
+  --context-menu-wrap-transform: translateX(100%);
+  --context-menu-wrap-transform-left: translateX(0);
+  --context-menu-wrap-left: unset;
+  --context-menu-wrap-right: calc(100% + 12px);
+}
+</style>
 <style scoped lang="scss">
 .context-wrap {
-  width: auto;
-  max-width: 400px;
-  min-width: 212px;
+  //width: auto;
+  //max-width: 400px;
+  //min-width: 212px;
+  width: 212px;
   background: var(--context-menu-bg-color);
   border-radius: 8px;
   user-select: none;
@@ -71,6 +103,8 @@ const emits = defineEmits<{
   max-height: 100vh;
   box-shadow: var(--box-shadow);
   padding: 8px;
+  //overflow-x: hidden;
+  //overflow-y: auto;
 
   .context-loader {
     position: absolute;
@@ -108,21 +142,30 @@ const emits = defineEmits<{
         left: -12px;
       }
       :deep(.context-children) {
-        left: -12px;
+        left: var(--context-menu-wrap-left);
+        right: var(--context-menu-wrap-right);
 
         .context-wrap {
-          transform: translateX(-100%);
+          transform: var(--context-menu-wrap-transform-left);
           left: auto;
         }
       }
     }
 
-    &.has-divider::before {
-      content: '';
-      display: block;
-      height: 0.03rem;
-      background-color: var(--context-menu-border-color);
-      margin: 0 8px 8px;
+    &.has-divider {
+      margin-top: 16px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -8px;
+        left: 0;
+        right: 0;
+        display: block;
+        height: 0.03rem;
+        background-color: var(--context-menu-border-color);
+        margin: 0 8px 8px;
+      }
     }
 
     .context-link {
@@ -134,7 +177,7 @@ const emits = defineEmits<{
       align-items: center;
       user-select: none;
       border-radius: 4px;
-      padding: 6px 8px;
+      padding: 6px 18px 8px 6px;
 
       .menu-item-text {
         flex: 1 1 0;
@@ -186,26 +229,9 @@ const emits = defineEmits<{
 
       .context-wrap {
         position: fixed;
+        transform: var(--context-menu-wrap-transform);
       }
     }
   }
 }
 </style>
-<style>
-:root.is-new-view {
-  --context-menu-bg-color: #ffffff;
-  --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.4);
-  --context-menu-text-color: #4d5d69;
-  --context-menu-text-disabled-color: #bdc3c7;
-  --context-menu-text-hover-color: #182531;
-  --context-menu-border-color: #e9ebed;
-}
-:root.is-new-view.dark-theme {
-  --context-menu-bg-color: #334453;
-  --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.06);
-  --context-menu-text-color: #e9eaec;
-  --context-menu-text-disabled-color: #bdc3c7b8;
-  --context-menu-text-hover-color: #ffffff;
-  --context-menu-border-color: rgba(233, 235, 237, 0.12);
-}
-</style>

package/components/common/context/recursion/RecursionOld.vue

@@ -64,6 +64,35 @@ const emits = defineEmits<{
 }>()
 </script>
 
+<style>
+:root {
+  --context-menu-hover-bg-color: #e8e8e8;
+  --context-menu-border-color: #949494;
+  --context-menu-inset-border-color: #d4d5d6;
+  --context-menu-item-header-color: #eceff2;
+  --context-menu-hover-border-color: #666;
+
+  /*rtl*/
+  --context-menu-wrap-transform: none;
+  --context-menu-wrap-transform-left: translateX(-100%);
+  --context-menu-wrap-left: 0;
+  --context-menu-wrap-right: unset;
+}
+:root.dark-theme {
+  --context-menu-hover-bg-color: #324f61;
+  --context-menu-border-color: #495865;
+  --context-menu-inset-border-color: #485764;
+  --context-menu-item-header-color: #29414e;
+  --context-menu-hover-border-color: #fff;
+}
+
+:root[dir='rtl'] {
+  --context-menu-wrap-transform: translateX(100%);
+  --context-menu-wrap-transform-left: translateX(0);
+  --context-menu-wrap-left: unset;
+  --context-menu-wrap-right: 100%;
+}
+</style>
 <style scoped lang="scss">
 .loader-wrapper {
   width: 100%;
@@ -120,11 +149,11 @@ const emits = defineEmits<{
     }
     &.left {
       :deep(.context-children) {
-        left: 0;
-        background: red;
+        left: var(--context-menu-wrap-left);
+        right: var(--context-menu-wrap-right);
 
         .context-wrap {
-          transform: translateX(-100%);
+          transform: var(--context-menu-wrap-transform-left);
           left: auto;
         }
       }
@@ -181,6 +210,7 @@ const emits = defineEmits<{
 
       .context-wrap {
         position: fixed;
+        transform: var(--context-menu-wrap-transform);
       }
     }
   }
@@ -195,19 +225,3 @@ const emits = defineEmits<{
   }
 }
 </style>
-<style>
-:root {
-  --context-menu-hover-bg-color: #e8e8e8;
-  --context-menu-border-color: #949494;
-  --context-menu-inset-border-color: #d4d5d6;
-  --context-menu-item-header-color: #eceff2;
-  --context-menu-hover-border-color: #666;
-}
-:root.dark-theme {
-  --context-menu-hover-bg-color: #324f61;
-  --context-menu-border-color: #495865;
-  --context-menu-inset-border-color: #485764;
-  --context-menu-item-header-color: #29414e;
-  --context-menu-hover-border-color: #fff;
-}
-</style>