bfg-common 1.5.756 → 1.5.759

package/components/common/vm/snapshots/new/Skeleton.vue

@@ -19,7 +19,7 @@
       <ui-skeleton-item width="96" height="20" class="ml-auto" />
     </div>
     <div class="right-content grid p-4">
-      <div class="flex justify-between gap-4 pr-4 flex-wrap top-container">
+      <div class="flex justify-between gap-4 flex-wrap top-container">
         <ui-skeleton-item width="80" height="20" />
         <div class="actions-block flex">
           <ui-skeleton-item width="20" height="20" />
@@ -29,13 +29,7 @@
           <ui-skeleton-item width="20" height="20" />
         </div>
       </div>
-      <div
-        ref="detailsScrollBlock"
-        :class="[
-          'details-block flex flex-col my-6',
-          { 'has-scroll': hasScroll },
-        ]"
-      >
+      <div class="details-block flex flex-col my-6">
         <div
           v-for="index in detailsItemsCount"
           :key="index"
@@ -51,19 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useElementSize } from '@vueuse/core'
-
 const detailsItemsCount = ref<number>(6)
-
-const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
-const { height } = useElementSize(detailsElement)
-
-const hasScroll = computed<boolean>(
-  () =>
-    height.value &&
-    detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
-)
 </script>
 
 <style>
@@ -102,8 +84,6 @@ const hasScroll = computed<boolean>(
     }
   }
   .right-content {
-    padding-right: 0;
-
     .top-container {
       .actions-block {
         grid-column-gap: 10px;
@@ -118,10 +98,6 @@ const hasScroll = computed<boolean>(
       grid-row-gap: 10px;
       overflow: auto;
 
-      &:not(.has-scroll) {
-        padding-right: 16px;
-      }
-
       .details-block-item {
         background-color: var(--snapshots-right-skeleton-item-bg-color);
         border-radius: 6px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.756",
+  "version": "1.5.759",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

package/components/common/pages/backups/backupsNew/Skeleton.vue

@@ -1,136 +0,0 @@
-<template>
-  <div class="skeleton-page grid gap-3 p-4 h-inherit overflow-hidden">
-    <div class="left-content grid p-4">
-      <div class="flex justify-between gap-4 flex-wrap">
-        <ui-skeleton-item width="80" height="20" />
-        <ui-skeleton-item width="160" height="36" />
-      </div>
-      <div class="border-block flex flex-col py-3 px-4 my-4">
-        <ui-skeleton-item width="100%" height="20" />
-        <ui-skeleton-item width="50%" height="20" />
-        <ui-skeleton-item width="30%" height="20" />
-        <ui-skeleton-item width="70%" height="20" />
-        <ui-skeleton-item width="20%" height="20" />
-        <ui-skeleton-item width="50%" height="20" />
-        <ui-skeleton-item width="80%" height="20" />
-        <ui-skeleton-item width="70%" height="20" />
-        <ui-skeleton-item width="20%" height="20" />
-      </div>
-      <ui-skeleton-item width="96" height="20" class="ml-auto" />
-    </div>
-    <div class="right-content grid p-4">
-      <div class="flex justify-between gap-4 pr-4 flex-wrap top-container">
-        <ui-skeleton-item width="80" height="20" />
-        <div class="actions-block flex">
-          <ui-skeleton-item width="20" height="20" />
-          <div class="line-border"></div>
-          <ui-skeleton-item width="20" height="20" />
-          <div class="line-border"></div>
-          <ui-skeleton-item width="20" height="20" />
-        </div>
-      </div>
-      <div
-        ref="detailsScrollBlock"
-        :class="[
-          'details-block flex flex-col my-6',
-          { 'has-scroll': hasScroll },
-        ]"
-      >
-        <div
-          v-for="index in detailsItemsCount"
-          :key="index"
-          class="details-block-item flex p-3"
-        >
-          <ui-skeleton-item width="20" height="20" class="mr-[10px]" />
-          <ui-skeleton-item width="144" height="20" />
-          <ui-skeleton-item width="144" height="20" class="ml-auto" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useElementSize } from '@vueuse/core'
-
-const detailsItemsCount = ref<number>(3)
-
-const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
-const { height } = useElementSize(detailsElement)
-
-const hasScroll = computed<boolean>(
-  () =>
-    height.value &&
-    detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
-)
-</script>
-
-<style>
-:root {
-  --backups-left-skeleton-border-color: #e9ebed;
-  --backups-right-skeleton-action-line-border-color: #e9ebeda3;
-  --backups-right-skeleton-item-bg-color: #e9ebed66;
-}
-:root.dark-theme {
-  --backups-left-skeleton-border-color: #e9ebed1f;
-  --backups-right-skeleton-action-line-border-color: #e9ebed1f;
-  --backups-right-skeleton-item-bg-color: #e9ebed0f;
-}
-</style>
-
-<style scoped lang="scss">
-.skeleton-page {
-  grid-template-columns: repeat(2, calc(50% - 6px));
-
-  .left-content,
-  .right-content {
-    background-color: var(--backups-page-inner-block-bg);
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.0784313725);
-    border-radius: 8px;
-    grid-template-rows: max-content 1fr max-content;
-    overflow: hidden;
-  }
-  .border-block {
-    border: 1px solid var(--backups-left-skeleton-border-color);
-    border-radius: 8px;
-    grid-row-gap: 10px;
-    overflow: auto;
-
-    :deep(.skeleton-item) {
-      min-height: 20px;
-    }
-  }
-  .right-content {
-    padding-right: 0;
-
-    .top-container {
-      .actions-block {
-        grid-column-gap: 10px;
-
-        .line-border {
-          border: 1px solid
-            var(--backups-right-skeleton-action-line-border-color);
-        }
-      }
-    }
-    .details-block {
-      grid-row-gap: 10px;
-      overflow: auto;
-
-      &:not(.has-scroll) {
-        padding-right: 16px;
-      }
-
-      .details-block-item {
-        background-color: var(--backups-right-skeleton-item-bg-color);
-        border-radius: 6px;
-      }
-
-      :deep(.skeleton-item) {
-        min-height: 20px;
-      }
-    }
-  }
-}
-</style>