bfg-common 1.3.486 → 1.3.488

package/components/common/resource/progressBlock/ProgressBlock.vue

@@ -1,142 +1,142 @@
-<template>
-  <div class="summary-meters-block meters-block">
-    <ul class="summary-items-list">
-      <li
-        v-for="(resource, key) in progressPresent"
-        :key="key"
-        class="resource-meter"
-      >
-        <div class="meters-block__flex">
-          <span
-            class="title"
-            tabindex="0"
-            :data-id="`meters-block-${resource.type}`"
-          >
-            {{ resource.blockTitle }}
-          </span>
-          <span>
-            <span
-              class="resource-meter-top-right-info"
-              :data-id="`resource-meter-free-${resource.type}`"
-            >
-              {{ localization.free }}:
-            </span>
-            <span
-              class="resource-meter-top-right-info"
-              :data-id="`resource-meter-free-${resource.type}-value`"
-              >{{ resource.free.text }}</span
-            >
-          </span>
-        </div>
-        <div class="progress">
-          <progress
-            :max="resource.capacity.value"
-            :value="resource.used.value"
-          />
-        </div>
-        <div class="meters-block__flex">
-          <span>
-            <span
-              class="resource-meter-bottom-left-info"
-              :data-id="`resource-meter-used-${resource.type}`"
-            >
-              {{ localization.used }}:
-            </span>
-            <span
-              class="resource-meter-bottom-left-info"
-              :data-id="`resource-meter-used-${resource.type}-value`"
-            >
-              {{ resource.used.text }}
-            </span>
-          </span>
-          <span>
-            <span
-              class="resource-meter-bottom-right-info"
-              :data-id="`resource-meter-capacity-${resource.type}`"
-            >
-              {{ localization.capacity }}:
-            </span>
-            <span
-              class="resource-meter-bottom-right-info"
-              :data-id="`resource-meter-capacity-${resource.type}-value`"
-            >
-              {{ resource.capacity.text }}
-            </span>
-          </span>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_I_Resources } from '~/components/common/resource/lib/models/interfaces'
-
-const props = defineProps<{
-  progress: UI_I_Resources[]
-}>()
-
-const progressPresent = computed<UI_I_Resources[]>(() => {
-  return props.progress.map((progress) => {
-    return {
-      ...progress,
-      blockTitle:
-        progress.type === 'cpu'
-          ? localization.value.latinCpu
-          : localization.value[progress.type],
-    }
-  })
-})
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped>
-@import 'bfg-common/assets/scss/common/mixins.scss';
-$bar-graph-width: 256px;
-.meters-block {
-  &__flex {
-    @include flex($just: space-between, $dir: row, $align: center);
-  }
-}
-.summary-meters-block {
-  min-width: $bar-graph-width;
-  .summary-items-list {
-    margin-bottom: 10px;
-    .resource-meter {
-      list-style-type: none;
-      margin-bottom: 6px;
-      line-height: 16px;
-      span {
-        font-size: 10px;
-      }
-      .progress {
-        border-radius: 3px;
-        progress {
-          &::-webkit-progress-value {
-            background: var(--progress-color);
-          }
-          &::-webkit-progress-bar {
-            background: var(--progress-bg-color);
-          }
-        }
-      }
-    }
-  }
-  .global-refresh-content {
-    text-align: right;
-
-    .btn-global-refresh {
-      border: unset;
-      background: unset;
-      color: var(--link-visited-color);
-      cursor: pointer;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="summary-meters-block meters-block">
+    <ul class="summary-items-list">
+      <li
+        v-for="(resource, key) in progressPresent"
+        :key="key"
+        class="resource-meter"
+      >
+        <div class="meters-block__flex">
+          <span
+            class="title"
+            tabindex="0"
+            :data-id="`meters-block-${resource.type}`"
+          >
+            {{ resource.blockTitle }}
+          </span>
+          <span>
+            <span
+              class="resource-meter-top-right-info"
+              :data-id="`resource-meter-free-${resource.type}`"
+            >
+              {{ localization.free }}:
+            </span>
+            <span
+              class="resource-meter-top-right-info"
+              :data-id="`resource-meter-free-${resource.type}-value`"
+              >{{ resource.free.text }}</span
+            >
+          </span>
+        </div>
+        <div class="progress">
+          <progress
+            :max="resource.capacity.value"
+            :value="resource.used.value"
+          />
+        </div>
+        <div class="meters-block__flex">
+          <span>
+            <span
+              class="resource-meter-bottom-left-info"
+              :data-id="`resource-meter-used-${resource.type}`"
+            >
+              {{ localization.used }}:
+            </span>
+            <span
+              class="resource-meter-bottom-left-info"
+              :data-id="`resource-meter-used-${resource.type}-value`"
+            >
+              {{ resource.used.text }}
+            </span>
+          </span>
+          <span>
+            <span
+              class="resource-meter-bottom-right-info"
+              :data-id="`resource-meter-capacity-${resource.type}`"
+            >
+              {{ localization.capacity }}:
+            </span>
+            <span
+              class="resource-meter-bottom-right-info"
+              :data-id="`resource-meter-capacity-${resource.type}-value`"
+            >
+              {{ resource.capacity.text }}
+            </span>
+          </span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_I_Resources } from '~/components/common/resource/lib/models/interfaces'
+
+const props = defineProps<{
+  progress: UI_I_Resources[]
+}>()
+
+const progressPresent = computed<UI_I_Resources[]>(() => {
+  return props.progress.map((progress) => {
+    return {
+      ...progress,
+      blockTitle:
+        progress.type === 'cpu'
+          ? localization.value.latinCpu
+          : localization.value[progress.type],
+    }
+  })
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/mixins.scss';
+$bar-graph-width: 256px;
+.meters-block {
+  &__flex {
+    @include flex($just: space-between, $dir: row, $align: center);
+  }
+}
+.summary-meters-block {
+  min-width: $bar-graph-width;
+  .summary-items-list {
+    margin-bottom: 10px;
+    .resource-meter {
+      list-style-type: none;
+      margin-bottom: 6px;
+      line-height: 16px;
+      span {
+        font-size: 10px;
+      }
+      .progress {
+        border-radius: 3px;
+        progress {
+          &::-webkit-progress-value {
+            background: var(--progress-color);
+          }
+          &::-webkit-progress-bar {
+            background: var(--progress-bg-color);
+          }
+        }
+      }
+    }
+  }
+  .global-refresh-content {
+    text-align: right;
+
+    .btn-global-refresh {
+      border: unset;
+      background: unset;
+      color: var(--link-visited-color);
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

package/components/common/split/horizontal/Horizontal.vue

@@ -1,70 +1,70 @@
-<template>
-  <common-split-horizontal-new
-    v-if="props.isNewView"
-    :parent-element-selector="props.parentElementSelector"
-    :left-panel-w="props.leftPanelW"
-    :left-panel-min-width="props.leftPanelMinWidth"
-    :right-panel-min-width="props.rightPanelMinWidth"
-    :show-toggle-button="props.showToggleButton"
-    :hide-left-panel="props.hideLeftPanel"
-    @dragend="emits('dragend', $event)"
-  >
-    <template #toggleContent>
-      <slot name="toggleContent" />
-    </template>
-
-    <template #firstPanel>
-      <slot name="firstPanel" />
-    </template>
-
-    <template #secondPanel>
-      <slot name="secondPanel" />
-    </template>
-  </common-split-horizontal-new>
-
-  <common-split-horizontal-old
-    v-else
-    :parent-element-selector="props.parentElementSelector"
-    :left-panel-w="props.leftPanelW"
-    :left-panel-min-width="props.leftPanelMinWidth"
-    :right-panel-min-width="props.rightPanelMinWidth"
-    :show-toggle-button="props.showToggleButton"
-    :hide-left-panel="props.hideLeftPanel"
-    @dragend="emits('dragend', $event)"
-  >
-    <template #firstPanel>
-      <slot name="firstPanel" />
-    </template>
-
-    <template #secondPanel>
-      <slot name="secondPanel" />
-    </template>
-  </common-split-horizontal-old>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    parentElementSelector: string
-    leftPanelW?: number
-    leftPanelMinWidth?: number
-    rightPanelMinWidth?: number
-    showToggleButton?: boolean
-    hideLeftPanel?: boolean
-    isNewView?: boolean
-  }>(),
-  {
-    leftPanelMinWidth: 200, // 200px
-    rightPanelMinWidth: 200, // 200px
-    leftPanelW: undefined,
-    showToggleButton: true,
-    hideLeftPanel: false,
-    isNewView: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'dragend', value: number): void
-}>()
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-split-horizontal-new
+    v-if="props.isNewView"
+    :parent-element-selector="props.parentElementSelector"
+    :left-panel-w="props.leftPanelW"
+    :left-panel-min-width="props.leftPanelMinWidth"
+    :right-panel-min-width="props.rightPanelMinWidth"
+    :show-toggle-button="props.showToggleButton"
+    :hide-left-panel="props.hideLeftPanel"
+    @dragend="emits('dragend', $event)"
+  >
+    <template #toggleContent>
+      <slot name="toggleContent" />
+    </template>
+
+    <template #firstPanel>
+      <slot name="firstPanel" />
+    </template>
+
+    <template #secondPanel>
+      <slot name="secondPanel" />
+    </template>
+  </common-split-horizontal-new>
+
+  <common-split-horizontal-old
+    v-else
+    :parent-element-selector="props.parentElementSelector"
+    :left-panel-w="props.leftPanelW"
+    :left-panel-min-width="props.leftPanelMinWidth"
+    :right-panel-min-width="props.rightPanelMinWidth"
+    :show-toggle-button="props.showToggleButton"
+    :hide-left-panel="props.hideLeftPanel"
+    @dragend="emits('dragend', $event)"
+  >
+    <template #firstPanel>
+      <slot name="firstPanel" />
+    </template>
+
+    <template #secondPanel>
+      <slot name="secondPanel" />
+    </template>
+  </common-split-horizontal-old>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    parentElementSelector: string
+    leftPanelW?: number
+    leftPanelMinWidth?: number
+    rightPanelMinWidth?: number
+    showToggleButton?: boolean
+    hideLeftPanel?: boolean
+    isNewView?: boolean
+  }>(),
+  {
+    leftPanelMinWidth: 200, // 200px
+    rightPanelMinWidth: 200, // 200px
+    leftPanelW: undefined,
+    showToggleButton: true,
+    hideLeftPanel: false,
+    isNewView: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'dragend', value: number): void
+}>()
+</script>
+
+<style scoped lang="scss"></style>