bfg-common 1.3.505 → 1.3.506

package/components/common/context/lib/models/interfaces.ts

@@ -1,27 +1,27 @@
-import { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-export interface UI_I_ContextMenuByEvent {
-  event: any
-  node: UI_I_TreeNode
-}
-export interface UI_I_ContextMenu<T = string> {
-  x: number
-  y: number
-  id: string | number
-  type: T
-  titleText: string
-  titleIconClassName: string
-  items: UI_I_ContextMenuItem[]
-}
-export interface UI_I_ContextMenuItem<T = string> {
-  name: string
-  actionType: T | ''
-  iconClassName: string
-  items: UI_I_ContextMenuItem<T>[]
-  shortcut?: string
-  hasBorderTop?: boolean
-  isHeader?: boolean
-  disabled?: boolean
-  isShowItems?: boolean
-  testId?: string
-}
+import { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+export interface UI_I_ContextMenuByEvent {
+  event: any
+  node: UI_I_TreeNode
+}
+export interface UI_I_ContextMenu<T = string> {
+  x: number
+  y: number
+  id: string | number
+  type: T
+  titleText: string
+  titleIconClassName: string
+  items: UI_I_ContextMenuItem[]
+}
+export interface UI_I_ContextMenuItem<T = string> {
+  name: string
+  actionType: T | ''
+  iconClassName: string
+  items: UI_I_ContextMenuItem<T>[]
+  shortcut?: string
+  hasBorderTop?: boolean
+  isHeader?: boolean
+  disabled?: boolean
+  isShowItems?: boolean
+  testId?: string
+}

package/components/common/countdownTimer/CountdownTimer.vue

@@ -1,50 +1,50 @@
-<template>
-  <div class="countdown-timer">
-    <h3 class="countdown-timer__inner">
-      <span class="countdown-timer__minutes">{{ minutes }}</span>
-      <span class="countdown-timer__separator">:</span>
-      <span class="countdown-timer__seconds"
-        >{{ seconds }} {{ localization.seconds }}</span
-      >
-    </h3>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  timer: number
-  totalTime: number
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const secondsInMinute = 60
-const minutes = computed<string>(() => {
-  if (!props.timer) return '00'
-  const minutes = Math.floor(props.totalTime / secondsInMinute)
-  return formatTime(minutes)
-})
-
-const seconds = computed<string>(() => {
-  if (!props.timer) return '00'
-  const seconds = props.totalTime - +minutes.value * secondsInMinute
-  return formatTime(seconds)
-})
-
-const formatTime = (time: number): string => {
-  return (time < 10 ? '0' : '') + time
-}
-</script>
-
-<style lang="scss" scoped>
-.countdown-timer {
-  &__inner {
-    padding-top: 12px;
-    & > span {
-      font-size: 40px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="countdown-timer">
+    <h3 class="countdown-timer__inner">
+      <span class="countdown-timer__minutes">{{ minutes }}</span>
+      <span class="countdown-timer__separator">:</span>
+      <span class="countdown-timer__seconds"
+        >{{ seconds }} {{ localization.seconds }}</span
+      >
+    </h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  timer: number
+  totalTime: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const secondsInMinute = 60
+const minutes = computed<string>(() => {
+  if (!props.timer) return '00'
+  const minutes = Math.floor(props.totalTime / secondsInMinute)
+  return formatTime(minutes)
+})
+
+const seconds = computed<string>(() => {
+  if (!props.timer) return '00'
+  const seconds = props.totalTime - +minutes.value * secondsInMinute
+  return formatTime(seconds)
+})
+
+const formatTime = (time: number): string => {
+  return (time < 10 ? '0' : '') + time
+}
+</script>
+
+<style lang="scss" scoped>
+.countdown-timer {
+  &__inner {
+    padding-top: 12px;
+    & > span {
+      font-size: 40px;
+    }
+  }
+}
+</style>

package/components/common/details/DetailsItem.vue

@@ -1,109 +1,109 @@
-<template>
-  <div
-    :class="[
-      'stack-block',
-      { 'not-children': !props.hasChildren, open: isOpen },
-    ]"
-  >
-    <div class="stack-block__label">
-      <atoms-the-icon
-        :data-id="`${props.testId}-toggle-icon`"
-        name="angle"
-        class="stack-block__icon"
-        @click="onToggle"
-      />
-
-      <div class="stack-view-key">
-        <slot name="stackBlockKey" />
-      </div>
-      <div class="stack-block-content">
-        <slot name="stackBlockContent" />
-      </div>
-    </div>
-
-    <div v-show="isOpen" class="stack-children">
-      <div style="height: auto">
-        <slot name="stackChildren" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    openByDefault?: boolean
-    hasChildren: boolean
-    testId?: string
-  }>(),
-  {
-    openByDefault: false,
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-}>()
-const isOpen = ref<boolean>(props.openByDefault || false)
-const onToggle = (): void => {
-  isOpen.value = !isOpen.value
-  emits('toggle', isOpen.value)
-}
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-.stack-block {
-  &.open {
-    .stack-block__icon {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__label {
-    //padding: 7px 0 6px;
-    @include flex($align: center);
-    max-width: unset;
-
-    &::before {
-      display: none;
-    }
-
-    .stack-view-key {
-      max-width: 40%;
-    }
-
-    .stack-block-content {
-      padding: 0;
-      flex: 1 1 auto;
-      width: 60%;
-      background-color: transparent;
-    }
-  }
-  &__icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-    transform: rotate(90deg);
-    align-self: center;
-    fill: var(--triger-icon-color);
-    cursor: pointer;
-  }
-
-  &.not-children {
-    .stack-block__label {
-      padding: 0 0 3px 0;
-      background-color: transparent;
-
-      .stack-view-key {
-        max-width: 20%;
-        flex: 1 1 130px;
-      }
-    }
-
-    .stack-block__icon {
-      opacity: 0;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'stack-block',
+      { 'not-children': !props.hasChildren, open: isOpen },
+    ]"
+  >
+    <div class="stack-block__label">
+      <atoms-the-icon
+        :data-id="`${props.testId}-toggle-icon`"
+        name="angle"
+        class="stack-block__icon"
+        @click="onToggle"
+      />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content">
+        <slot name="stackBlockContent" />
+      </div>
+    </div>
+
+    <div v-show="isOpen" class="stack-children">
+      <div style="height: auto">
+        <slot name="stackChildren" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    openByDefault?: boolean
+    hasChildren: boolean
+    testId?: string
+  }>(),
+  {
+    openByDefault: false,
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+}>()
+const isOpen = ref<boolean>(props.openByDefault || false)
+const onToggle = (): void => {
+  isOpen.value = !isOpen.value
+  emits('toggle', isOpen.value)
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+.stack-block {
+  &.open {
+    .stack-block__icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__label {
+    //padding: 7px 0 6px;
+    @include flex($align: center);
+    max-width: unset;
+
+    &::before {
+      display: none;
+    }
+
+    .stack-view-key {
+      max-width: 40%;
+    }
+
+    .stack-block-content {
+      padding: 0;
+      flex: 1 1 auto;
+      width: 60%;
+      background-color: transparent;
+    }
+  }
+  &__icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    transform: rotate(90deg);
+    align-self: center;
+    fill: var(--triger-icon-color);
+    cursor: pointer;
+  }
+
+  &.not-children {
+    .stack-block__label {
+      padding: 0 0 3px 0;
+      background-color: transparent;
+
+      .stack-view-key {
+        max-width: 20%;
+        flex: 1 1 130px;
+      }
+    }
+
+    .stack-block__icon {
+      opacity: 0;
+    }
+  }
+}
+</style>

package/components/common/details/DetailsList.vue

@@ -1,23 +1,23 @@
-<template>
-  <div class="list">
-    <div v-for="(item, key) in props.items" :key="key" class="item">
-      <slot :key="key" :item="item">
-        {{ item }}
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_DetailsItem[]
-}>()
-</script>
-
-<style lang="scss" scoped>
-.list {
-  padding: 0 12px 10px;
-}
-</style>
+<template>
+  <div class="list">
+    <div v-for="(item, key) in props.items" :key="key" class="item">
+      <slot :key="key" :item="item">
+        {{ item }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_DetailsItem[]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.list {
+  padding: 0 12px 10px;
+}
+</style>

package/components/common/details/lib/models/interfaces.ts

@@ -1,10 +1,10 @@
-import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
-
-export interface UI_I_DetailsItem {
-    label: string,
-    value: string,
-    items: UI_I_DetailsItem[]
-    actions?: UI_I_Button[]
-    permission?: string[]
-    data?: any
-}
+import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
+
+export interface UI_I_DetailsItem {
+    label: string,
+    value: string,
+    items: UI_I_DetailsItem[]
+    actions?: UI_I_Button[]
+    permission?: string[]
+    data?: any
+}