@it-enterprise/forcebpm-ui-kit 1.0.2-beta.32 → 1.0.2-beta.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.32",
+  "version": "1.0.2-beta.34",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",

package/src/FAvatar.vue

@@ -72,7 +72,7 @@ const errorHandler = () => {
 <template>
   <div class="f-avatar cursor-pointer" :style="sizeStyle">
     <!-- GROUP -->
-    <v-tooltip v-if="group" :text="group.name" location="top right" :disabled="disabled">
+    <v-tooltip v-if="group" :text="group.name" location="top left" :disabled="disabled">
       <template #activator="{ props: propsTooltip }">
         <div v-bind="propsTooltip" :style="sizeStyle" :class="avatarClass">
           <i class="f-icon group-star bg-secondary text-center" :style="sizeStyle">

package/src/FContextMenu.vue

@@ -11,6 +11,7 @@ const props = defineProps({
     //     action: () => {},
     //     color: 'text',
     //     icon: 'fire',
+    //     size: 18,
     //     dividerTop: false, // optional setting to add top visual separation of list blocks
     //     dividerBottom: false // optional setting to add bottom visual separation of list blocks
     //   }
@@ -73,7 +74,7 @@ const isEmpty = computed(() => !props.list.length || props.list.every(el => el.h
           <!-- List item -->
           <v-list-item :key="idx" @click="item.action">
             <v-list-item-title :class="`text-${item.color || 'subTitle'}`">
-              <FIcon v-if="item.icon" :icon="item.icon" :color="item.color || 'text'" size="18" />
+              <FIcon v-if="item.icon" :icon="item.icon" :color="item.color || 'text'" :size="item.size || 18" />
               <span :class="item.icon ? 'ml-1' : 'ml-5'">{{ item.name }}</span>
             </v-list-item-title>
           </v-list-item>

package/src/FDialog.vue

@@ -27,6 +27,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  closeMethod: {
+    type: Function,
+    default: null
+  },
   headerActions: {
     type: Array,
     default: null,
@@ -86,6 +90,15 @@ const open = props => {
   emit('open', props)
 }
 
+const close = () => {
+  if (typeof props.closeMethod === 'function') {
+    props.closeMethod()
+    emit('close')
+  } else {
+    modelValue.value = false
+  }
+}
+
 watch(modelValue, val => {
   if (!val) {
     search.value = null
@@ -133,13 +146,7 @@ watch(modelValue, val => {
         <!-- Close btn -->
         <v-tooltip v-if="!disableCloseBtn" offset="10" :text="$t('buttons.close')">
           <template #activator="{ props: tooltipProps }">
-            <v-btn
-              v-bind="tooltipProps"
-              variant="text"
-              size="32"
-              class="f-dialog-header-action f-dialog-header-action-close"
-              @click="modelValue = false"
-            >
+            <v-btn v-bind="tooltipProps" variant="text" size="32" class="f-dialog-header-action f-dialog-header-action-close" @click="close">
               <FIcon icon="times" size="18" color="fields-light" />
             </v-btn>
           </template>
@@ -159,7 +166,7 @@ watch(modelValue, val => {
         :class="noSpace ? 'ml-n1' : 'mt-5 ml-4'"
         @click="
           () => {
-            modelValue = false
+            close()
             backAction()
           }
         "
@@ -222,16 +229,20 @@ watch(modelValue, val => {
       .f-dialog-header-actions {
         display: flex;
         align-items: center;
-
-        .f-dialog-header-action {
-          margin-left: 8px;
-        }
       }
       .f-dialog-header-action {
+        &:hover {
+          .v-btn__overlay {
+            opacity: 0.4;
+          }
+        }
         .v-btn__overlay {
           background-color: currentColor;
         }
       }
+      .f-dialog-header-action {
+        margin-left: 8px;
+      }
     }
   }
   .f-dialog-body {
@@ -248,6 +259,7 @@ watch(modelValue, val => {
   .f-dialog-actions {
     flex-shrink: 0; // Action section does not shrink
     gap: 8px 24px;
+    padding-inline: 14px;
   }
 }
 

package/src/FSearchPanel.vue

@@ -181,6 +181,7 @@ const keydownEsc = () => {
 
     .v-field {
       .v-field__input {
+        min-height: 20px;
         padding-left: 8px;
         padding-top: 8px;
         padding-bottom: 4px;

package/src/FUserGroupPicker.vue

@@ -72,6 +72,7 @@ const modelValue = defineModel('modelValue', {
 })
 
 const search = ref('')
+const chipGroup = ref(null)
 const selectedMenuId = ref(null)
 const tab = ref('USERS_BY_GROUP')
 const calculatedHeight = Math.floor(window.innerHeight * 0.1) // 10vh rounded down
@@ -436,6 +437,7 @@ const close = () => {
   state.value = false
   search.value = ''
   selectedMenuId.value = null
+  chipGroup.value = null
 }
 
 const selectHandler = () => {
@@ -462,6 +464,11 @@ watch(tab, () => {
   selectedMenuId.value = null
 })
 
+// Clear chip group when menu changes
+watch(selectedMenuId, val => {
+  if (!val) chipGroup.value = null
+})
+
 // Sync with external modelValue changes
 watch(state, newState => {
   // Reset
@@ -500,6 +507,10 @@ watch(state, newState => {
       }
     }
   }
+
+  if (!newState) {
+    close()
+  }
 })
 </script>
 <template>
@@ -530,7 +541,7 @@ watch(state, newState => {
           :style="{ height: `${calculatedHeight}px` }"
           class="f-scrollbar-y"
         >
-          <v-chip-group selected-class="active" class="pa-0" column>
+          <v-chip-group v-model="chipGroup" selected-class="active" class="pa-0" column>
             <v-chip
               v-for="item in menuItems"
               :key="item.id"

package/src/assets/icons/group-star.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.1848 0.831629L11 0.628796L10.8152 0.831629L8.85259 2.98575L6.07586 2.10153L5.8144 2.01827L5.75577 2.28633L5.13316 5.13316L2.28633 5.75577L2.01827 5.8144L2.10153 6.07586L2.98575 8.85259L0.831629 10.8152L0.628796 11L0.831629 11.1848L2.98575 13.1474L2.10153 15.9241L2.01827 16.1856L2.28633 16.2442L5.13316 16.8668L5.75577 19.7137L5.8144 19.9817L6.07586 19.8985L8.85259 19.0143L10.8152 21.1684L11 21.3712L11.1848 21.1684L13.1474 19.0142L15.9241 19.8985L16.1856 19.9817L16.2442 19.7137L16.8668 16.8668L19.7137 16.2442L19.9817 16.1856L19.8985 15.9241L19.0142 13.1474L21.1684 11.1848L21.3712 11L21.1684 10.8152L19.0143 8.85259L19.8985 6.07586L19.9817 5.8144L19.7137 5.75577L16.8668 5.13316L16.2442 2.28633L16.1856 2.01827L15.9241 2.10153L13.1474 2.98575L11.1848 0.831629Z" fill="#97A7C8" stroke="#C9CBD2" stroke-width="0.5"/>
+</svg>

package/src/assets/icons/save.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6284 4.57315L14.6286 4.57334C14.6938 4.63786 14.7454 4.7146 14.7805 4.79909C14.8156 4.88357 14.8336 4.97415 14.8333 5.06558V5.06586V16.1145C14.8331 16.2993 14.7594 16.4764 14.6282 16.6071C14.4969 16.7379 14.3189 16.8115 14.1332 16.8117H0.800116C0.614381 16.8115 0.43639 16.7379 0.305168 16.6071C0.173958 16.4764 0.100216 16.2993 0.0999999 16.1145L0.1 1.76766C0.100231 1.58296 0.173971 1.40582 0.305168 1.2751C0.43639 1.14436 0.614381 1.07075 0.800116 1.07054L10.8229 1.07054L10.8232 1.07054C10.9151 1.07028 11.0061 1.0882 11.091 1.12324C11.1759 1.15828 11.253 1.20974 11.3178 1.27462L11.318 1.27482L14.6284 4.57315ZM9.7 2.03328V1.93328H9.6H4.8H4.7V2.03328V5.22152V5.32152H4.8H9.6H9.7V5.22152V2.03328ZM13.8667 15.949H13.9667V15.849V5.17592V5.13439L13.9372 5.10508L10.783 1.96244L10.7537 1.93328H10.7124H10.6667H10.5667V2.03328V6.18426H3.83333V2.03328V1.93328H3.73333H1.06667H0.966666V2.03328V15.849V15.949H1.06667H13.8667Z" fill="#5E5CE6" stroke="white" stroke-width="0.2"/>
+<path d="M7.33424 13.0263H7.33436C7.89097 13.0257 8.42468 12.8051 8.81838 12.4129C9.21208 12.0206 9.43361 11.4887 9.43424 10.9338V10.9337C9.43424 10.5197 9.31103 10.1151 9.08024 9.77093C8.84944 9.42679 8.52144 9.15863 8.13776 9.00028C7.75408 8.84194 7.33191 8.80052 6.92462 8.88124C6.51734 8.96195 6.14317 9.1612 5.84945 9.45383C5.55573 9.74647 5.35567 10.1194 5.27461 10.5254C5.19355 10.9314 5.23516 11.3522 5.39415 11.7346C5.55314 12.1171 5.82235 12.4439 6.16769 12.6738C6.51302 12.9037 6.91899 13.0263 7.33424 13.0263ZM5.68591 8.47646C6.17377 8.15168 6.74738 7.97831 7.33419 7.9783C8.12087 7.97916 8.875 8.2909 9.43115 8.84501C9.9873 9.39912 10.3001 10.1503 10.3009 10.9338C10.3009 11.5182 10.1269 12.0895 9.80103 12.5755C9.47509 13.0615 9.01179 13.4403 8.46966 13.6641C7.92753 13.8878 7.33096 13.9463 6.75541 13.8323C6.17986 13.7182 5.65124 13.4367 5.23637 13.0233C4.8215 12.61 4.53901 12.0834 4.42457 11.5102C4.31013 10.937 4.36886 10.3428 4.59335 9.80283C4.81785 9.26284 5.19804 8.80125 5.68591 8.47646Z" fill="#5E5CE6" stroke="white" stroke-width="0.2"/>
+</svg>

package/src/assets/icons/user-line.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="54" viewBox="0 0 48 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.5201 16.5496C41.5201 25.8097 33.547 33.0993 23.9886 33.0993C14.4301 33.0993 6.45703 25.8097 6.45703 16.5496C6.45703 7.28953 14.4301 0 23.9886 0C33.547 0 41.5201 7.28953 41.5201 16.5496ZM39.5352 16.5496C39.5352 24.5935 32.5747 31.1144 23.9886 31.1144C15.4024 31.1144 8.44191 24.5935 8.44191 16.5496C8.44191 8.50574 15.4024 1.98488 23.9886 1.98488C32.5747 1.98488 39.5352 8.50574 39.5352 16.5496Z" fill="#C9CBD2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.1501 29.5571L32.9589 29.8346C37.2615 31.3104 40.9489 33.7148 43.5867 36.3705C46.1545 38.9557 48 42.0663 48 44.9964C48 45.9496 47.5655 46.7327 47.1116 47.2943C46.6492 47.8665 46.0421 48.3672 45.3866 48.8045C44.0711 49.6819 42.2773 50.4897 40.1889 51.1782C35.9916 52.562 30.2769 53.5708 24 53.5708C17.7238 53.5708 12.0091 52.562 7.81165 51.1782C5.72316 50.4897 3.92925 49.6819 2.61367 48.8045C1.9581 48.3673 1.35096 47.8665 0.888504 47.2944C0.434558 46.7328 0 45.9497 0 44.9964C0 42.0663 1.84546 38.9556 4.41304 36.3703C7.05064 33.7146 10.7378 31.3101 15.0398 29.8345L15.8484 29.5572L16.6054 29.9541C18.7901 31.0995 21.309 31.7584 23.9993 31.7584C26.6905 31.7584 29.2099 31.0994 31.3929 29.9543L32.1501 29.5571ZM46.0151 44.9964C46.0151 47.6682 36.1596 51.586 24 51.586C11.8418 51.586 1.98488 47.6682 1.98488 44.9964C1.98488 40.6801 7.64922 34.4678 15.6838 31.7121C18.1477 33.0038 20.9822 33.7433 23.9993 33.7433C27.0171 33.7433 29.8523 33.0038 32.3149 31.7121C40.3508 34.4685 46.0151 40.6801 46.0151 44.9964Z" fill="#C9CBD2"/>
+</svg>

package/src/assets/icons/zoom-minus.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99414 8.04688H6.15039V7.09766H9.99414V8.04688Z" fill="#888EA4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.93718 14.4968C9.43468 14.4968 10.8329 14.0054 11.9696 13.1863L16.2456 17.5L17.8678 16.0703L13.449 11.7393C14.3421 10.5562 14.8744 9.09101 14.8744 7.49839C14.8744 3.64882 11.7531 0.5 7.93718 0.5C4.11226 0.5 1 3.64882 1 7.49839C1 11.348 4.11226 14.4968 7.93718 14.4968ZM2.49749 7.49839C2.49749 10.5016 4.95122 12.9861 7.93718 12.9861C10.9141 12.9861 13.3769 10.5016 13.3769 7.49839C13.3769 4.49518 10.9141 2.01071 7.93718 2.01071C4.95122 2.01071 2.49749 4.49518 2.49749 7.49839Z" fill="#888EA4" stroke="#F7F7F7" stroke-width="0.4"/>
+</svg>

package/src/assets/icons/zoom-plus.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.60156 8.14062V10.8242H7.65234V8.14062H5.15039V7.19141H7.65234V4.57227H8.60156V7.19141H11.1035V8.14062H8.60156Z" fill="#888EA4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.93718 14.4968C9.43468 14.4968 10.8329 14.0054 11.9696 13.1863L16.2456 17.5L17.8678 16.0703L13.449 11.7393C14.3421 10.5562 14.8744 9.09101 14.8744 7.49839C14.8744 3.64882 11.7531 0.5 7.93718 0.5C4.11226 0.5 1 3.64882 1 7.49839C1 11.348 4.11226 14.4968 7.93718 14.4968ZM2.49749 7.49839C2.49749 10.5016 4.95122 12.9861 7.93718 12.9861C10.9141 12.9861 13.3769 10.5016 13.3769 7.49839C13.3769 4.49518 10.9141 2.01071 7.93718 2.01071C4.95122 2.01071 2.49749 4.49518 2.49749 7.49839Z" fill="#888EA4" stroke="#F7F7F7" stroke-width="0.4"/>
+</svg>

package/src/assets/scss/icons.scss

@@ -260,6 +260,41 @@
     mask-size: contain;
     mask-position: center;
   }
+  &.save {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/save.svg') no-repeat;
+    mask: url('./../icons/save.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.zoom-minus {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/zoom-minus.svg') no-repeat;
+    mask: url('./../icons/zoom-minus.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.zoom-plus {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/zoom-plus.svg') no-repeat;
+    mask: url('./../icons/zoom-plus.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.group-star {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/group-star.svg') no-repeat;
+    mask: url('./../icons/group-star.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.user-line {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/user-line.svg') no-repeat;
+    mask: url('./../icons/user-line.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
 }
 
 @media screen and (max-width: 1280px) {

package/src/assets/scss/index.scss

@@ -7,4 +7,4 @@
 @use 'expansion';
 @use 'skeleton';
 @use 'card';
-// @use 'tables';
+@use 'tables';

package/src/assets/scss/input.scss

@@ -75,10 +75,10 @@
     }
     .v-field__input {
       padding-top: 16px;
-      padding-bottom: 10px;
+      padding-bottom: 6px;
       padding-inline: 12px 12px;
-      min-height: 20px;
-      font-size: 0.95em;
+      min-height: 40px;
+      font-size: 0.85em;
       line-height: 1em;
       color: rgb(var(--v-theme-subTitle));
       &:is(:-webkit-autofill, :autofill) {
@@ -98,7 +98,7 @@
       }
     }
     input::placeholder {
-      font-size: 0.9em;
+      font-size: 0.85em;
       opacity: 0.9;
       color: rgb(var(--v-theme-subTitle));
     }
@@ -197,13 +197,6 @@
       transform: rotate(180deg);
     }
   }
-  .v-field {
-    .v-field__input {
-      padding-inline: 12px 8px;
-      font-size: 0.85em;
-      min-height: 45px;
-    }
-  }
 }
 
 // Autocomplete
@@ -214,7 +207,7 @@
     }
   }
   .v-autocomplete__selection {
-    height: 20px;
+    height: 16px;
     .f-chip.v-chip {
       --v-chip-height: 20px;
       padding: 0;

package/src/assets/scss/overlay.scss

@@ -48,21 +48,26 @@
   }
 }
 
-.f-menu .v-overlay__content.v-autocomplete__content {
-  .v-list {
-    .v-list-item {
-      min-height: 28px;
-      .f-checkbox {
-        .f-icon {
-          height: 16px;
-          width: 16px;
-          min-width: 16px;
-          min-height: 16px;
-        }
+.f-menu .v-overlay__content {
+  &.v-autocomplete__content,
+  &.v-select__content {
+    .v-list {
+      .v-list-item {
+        min-height: 28px;
       }
-      .v-list-item__content {
-        display: flex;
-        align-items: center;
+    }
+  }
+  &.v-autocomplete__content {
+    .v-list {
+      .v-list-item {
+        .f-checkbox {
+          .f-icon {
+            height: 16px;
+            width: 16px;
+            min-width: 16px;
+            min-height: 16px;
+          }
+        }
       }
     }
   }

package/src/assets/scss/tables.scss

@@ -1,143 +1,69 @@
-// todo describe table styles
+.f-data-table.v-data-table {
+  &.v-table--density-default {
+    --v-table-header-height: 48px;
+    --v-table-row-height: 48px;
+  }
+  &.v-table--fixed-header {
+    .v-table__wrapper {
+      table {
+        thead {
+          tr {
+            th {
+              border-bottom: thin solid rgb(var(--v-theme-line)) !important;
+              box-shadow: none;
+              background: rgb(var(--v-theme-background));
+            }
+          }
+        }
+      }
+    }
+  }
 
-// .fbpm-table.v-data-table {
-//   width: 100%;
-//   .v-data-table__wrapper {
-//     overflow-x: hidden;
-//     scrollbar-width: thin;
-//     &::-webkit-scrollbar {
-//       width: 2.5px;
-//     }
-//     &::-webkit-scrollbar-track {
-//       box-shadow: inset 0 0 6px rgb(var(--v-theme-line));
-//     }
-//     &::-webkit-scrollbar-thumb {
-//       border-top: 1px solid rgba(0, 0, 0, 0);
-//       border-bottom: 1px solid rgba(0, 0, 0, 0);
-//       background-clip: padding-box;
-//       border-radius: 20px;
-//       height: 50px;
-//       background-color: rgb(var(--v-theme-primary));
-//     }
-//   }
-//   &.darken table {
-//     tbody {
-//       tr {
-//         &:nth-child(odd) {
-//           background: var(--v-background3-base);
-//           &:hover {
-//             background: var(--v-background4-base) !important;
-//           }
-//         }
-//         &:nth-child(even) {
-//           background: var(--v-background4-base);
-//           &:hover {
-//             background: var(--v-background3-base) !important;
-//           }
-//         }
-//       }
-//     }
-//   }
-//   table {
-//     width: 100%;
-//     .fbpm-table__header,
-//     .v-data-table-header {
-//       tr {
-//         th {
-//           color: rgb(var(--v-theme-text)) !important;
-//           font-weight: normal;
-//           line-height: 1;
-//           font-size: 0.8em;
-//           padding: 4px 4px 10px 4px;
-//           height: 24px;
-//           box-shadow: none;
-//           background: var(--v-background2-base);
-//           .v-data-table-header__icon {
-//             -webkit-mask: url("~@/assets/icons/arrow-icon.svg") no-repeat;
-//             mask: url("~@/assets/icons/arrow-icon.svg") no-repeat;
-//             mask-size: contain;
-//             width: 15px;
-//             height: 15px;
-//             transform: rotate(-90deg);
-//             &::after,
-//             &::before {
-//               content: none;
-//             }
-//           }
-//           &.asc .v-data-table-header__icon {
-//             transform: rotate(-90deg);
-//             background-color: rgb(var(--v-theme-title)) !important;
-//           }
-//           &.desc .v-data-table-header__icon {
-//             transform: rotate(-270deg);
-//             background-color: rgb(var(--v-theme-title)) !important;
-//           }
-//           &.active {
-//             font-weight: bold;
-//             color: rgb(var(--v-theme-subTitle)) !important;
-//           }
-//         }
-//       }
-//     }
-//     tbody {
-//       width: 100%;
-//       tr {
-//         position: relative;
-//         z-index: 1;
-//         td {
-//           padding: 17px 0 9px 4px;
-//           font-size: 0.9em;
-//           line-height: 1em;
-//           border: none !important;
-//           height: 40px;
-//           min-width: 100px;
-//           &.fbpm-table__check-box {
-//             width: 40px;
-//             min-width: 40px;
-//             padding: 12px;
-//             border-bottom: none !important;
-//             .v-input--selection-controls__input {
-//               margin: 0;
-//             }
-//           }
-//           &.fbpm-table__avatar {
-//             padding: 6px 0 0 0;
-//             width: 20px;
-//             min-width: 20px;
-//             line-height: 1;
-//           }
-//         }
-
-//         &:nth-child(odd) {
-//           background: var(--v-background5-base);
-//           &:hover {
-//             background: var(--v-background6-base) !important;
-//           }
-//         }
-//         &:nth-child(even) {
-//           background: var(--v-background6-base);
-//           &:hover {
-//             background: var(--v-background5-base) !important;
-//           }
-//         }
-//         &.fbpm-table__row-hover:hover,
-//         &.fbpm-table__row-selected {
-//           background: rgb(var(--v-theme-background)) !important;
-//           cursor: pointer;
-//           &::after {
-//             content: "";
-//             height: 100%;
-//             width: 100%;
-//             z-index: -1;
-//             display: block;
-//             position: absolute;
-//             top: 0;
-//             left: 0;
-//             background: rgb(var(--v-theme-primary));
-//             opacity: 0.4;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
+  .v-table__wrapper {
+    padding-right: 12px;
+    .v-data-table-progress {
+      display: none;
+    }
+    .v-data-table-header__content {
+      color: rgba(var(--v-theme-text));
+      font-size: 0.85em;
+    }
+    table {
+      thead {
+        tr {
+          th {
+            line-height: 1.1em;
+          }
+        }
+      }
+      tbody {
+        font-size: 0.85em;
+        tr:not(:last-child) {
+          td,
+          th {
+            border-bottom: thin solid rgb(var(--v-theme-line));
+          }
+        }
+      }
+    }
+    &::-webkit-scrollbar {
+      height: 6px;
+      width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10.8px;
+      box-shadow: inset 0 0 6px rgba(var(--v-theme-disabled));
+    }
+    &::-webkit-scrollbar-thumb {
+      border-top: 0px solid rgba(0, 0, 0, 0);
+      border-bottom: 0px solid rgba(0, 0, 0, 0);
+      background-clip: padding-box;
+      border-radius: 10.8px;
+      height: 50px;
+      background-color: rgba(var(--v-theme-disabled));
+      &:hover {
+        background-color: rgba(var(--v-theme-primary));
+      }
+    }
+  }
+}

package/src/assets/scss/utilities.scss

@@ -80,6 +80,29 @@
   }
 }
 
+.f-scrollbar-x {
+  overflow-y: hidden;
+  overflow-x: auto;
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 10.8px;
+    box-shadow: inset 0 0 6px rgba(var(--v-theme-disabled));
+  }
+  &::-webkit-scrollbar-thumb {
+    border-top: 0px solid rgba(0, 0, 0, 0);
+    border-bottom: 0px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    border-radius: 10.8px;
+    height: 50px;
+    background-color: rgba(var(--v-theme-disabled));
+    &:hover {
+      background-color: rgba(var(--v-theme-primary));
+    }
+  }
+}
+
 .f-menu.v-menu .v-overlay__content .f-context-menu-list.v-list {
   padding: 12px 6px;
   overflow-x: hidden;