@it-enterprise/forcebpm-ui-kit 1.0.2-beta.33 → 1.0.2-beta.35

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.33",
+  "version": "1.0.2-beta.35",
   "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/FDialog.vue

@@ -259,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/assets/icons/calendar.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.64258 1.6H11.0426V0H12.6426V1.6H13.4426C13.8669 1.6 14.2739 1.76857 14.5739 2.06863C14.874 2.36869 15.0426 2.77565 15.0426 3.2V14.4C15.0426 14.8243 14.874 15.2313 14.5739 15.5314C14.2739 15.8314 13.8669 16 13.4426 16H2.24258C1.81823 16 1.41127 15.8314 1.11121 15.5314C0.811149 15.2313 0.642578 14.8243 0.642578 14.4V3.2C0.642578 2.77565 0.811149 2.36869 1.11121 2.06863C1.41127 1.76857 1.81823 1.6 2.24258 1.6H3.04258V0H4.64258V1.6ZM2.24258 4.8V14.4H13.4426V4.8H2.24258ZM3.84258 7.2H5.44258V8.8H3.84258V7.2ZM7.04258 7.2H8.64258V8.8H7.04258V7.2ZM10.2426 7.2H11.8426V8.8H10.2426V7.2ZM10.2426 10.4H11.8426V12H10.2426V10.4ZM7.04258 10.4H8.64258V12H7.04258V10.4ZM3.84258 10.4H5.44258V12H3.84258V10.4Z" fill="#97A7C8"/>
+</svg>

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/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/scss/buttons.scss

@@ -57,4 +57,13 @@
       background-color: transparent;
     }
   }
+
+  &.f-btn-truncate {
+    .v-btn__content {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }

package/src/assets/scss/icons.scss

@@ -281,6 +281,27 @@
     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;
+  }
+  &.calendar {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/calendar.svg') no-repeat;
+    mask: url('./../icons/calendar.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
 }
 
 @media screen and (max-width: 1280px) {

package/src/assets/scss/index.scss

@@ -8,3 +8,4 @@
 @use 'skeleton';
 @use 'card';
 @use 'tables';
+@use 'list';

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,12 +207,12 @@
     }
   }
   .v-autocomplete__selection {
-    height: 20px;
+    height: 16px;
     .f-chip.v-chip {
       --v-chip-height: 20px;
       padding: 0;
       border-radius: 16.8px;
-      font-size: 0.75em;
+      font-size: 0.85em;
       background: rgb(var(--v-theme-line));
       color: rgb(var(--v-theme-subTitle));
       .v-chip__close {
@@ -237,6 +230,20 @@
   }
 }
 
+// File Input
+.f-input.v-file-input {
+  .v-field .v-field__input {
+    padding-top: 14px;
+  }
+  .f-chip.v-chip {
+    --v-chip-height: 20px;
+    border-radius: 16.8px;
+    font-size: 0.85em;
+    background: rgb(var(--v-theme-line));
+    color: rgb(var(--v-theme-subTitle));
+  }
+}
+
 // Checkbox
 .f-checkbox {
   .v-input__control {
@@ -259,7 +266,9 @@
         }
       }
       .v-label {
+        font-size: 0.95em;
         line-height: var(--v-selection-control-size);
+        margin-left: 6px;
       }
     }
   }

package/src/assets/scss/list.scss

@@ -0,0 +1,64 @@
+.v-list {
+  //Treeview
+  &.v-treeview.f-treeview {
+    padding-right: 8px;
+    &::-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));
+      }
+    }
+    .v-treeview-group {
+      min-height: auto;
+    }
+    .v-treeview-item {
+      min-height: 20px;
+      padding: 5px 0px;
+      color: rgba(var(--v-theme-subTitle));
+      .v-list-item__prepend {
+        .v-list-item-action--start {
+          margin-inline-end: 8px;
+          margin-inline-start: 4px;
+        }
+        .v-treeview-item__level {
+          width: 18px;
+        }
+        .v-btn {
+          width: 18px;
+          height: 18px;
+        }
+      }
+      .v-list-item__content {
+        .v-list-item-title {
+          font-size: 1em;
+          line-height: 1.2em;
+        }
+      }
+      &.v-list-item--active {
+        font-weight: 600;
+        color: rgba(var(--v-theme-title));
+        .v-list-item__overlay {
+          background: rgba(var(--v-theme-primary));
+        }
+        .v-list-item__content {
+          .v-list-item-title {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/scss/overlay.scss

@@ -48,21 +48,31 @@
   }
 }
 
-.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-subtitle {
+          font-size: 0.9em;
+          opacity: 1;
+          color: rgb(var(--v-theme-text));
         }
       }
-      .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

@@ -29,6 +29,13 @@
       font-size: 0.85em;
     }
     table {
+      thead {
+        tr {
+          th {
+            line-height: 1.1em;
+          }
+        }
+      }
       tbody {
         font-size: 0.85em;
         tr:not(:last-child) {

package/src/f-date-picker/FDatePicker.vue

@@ -161,12 +161,12 @@ const updateDateHandler = value => {
         <!-- Time picker -->
         <div v-if="type === 'datetime'" class="d-flex mt-5 font-weight-semibold f-date-picker-footer-time">
           <span class="mr-2">{{ $t('pickers.time') }}:</span>
-          <v-menu offset="0, -6" location="bottom right" content-class="time-picker-content" :close-on-content-click="false">
+          <v-menu offset="6" location="top" content-class="time-picker-content" :close-on-content-click="false">
             <template #activator="{ props: activatorProps }">
-              <div class="time pointer" v-bind="activatorProps">{{ time }}</div>
+              <div class="time cursor-pointer" v-bind="activatorProps">{{ time }}</div>
             </template>
 
-            <v-time-picker v-model="time" hide-title scrollable format="24hr" @update:model-value="updateDateHandler" />
+            <v-time-picker v-model="time" hide-title scrollable format="24hr" variant="input" @update:model-value="updateDateHandler" />
           </v-menu>
         </div>
 
@@ -258,65 +258,44 @@ const updateDateHandler = value => {
   .v-time-picker {
     min-width: 290px;
     :deep(.v-picker__header) {
-      padding: 10px 20px 4px;
+      padding: 20px 0 12px;
       background: rgb(var(--v-theme-background-dark));
       .v-time-picker-controls {
+        margin: 0;
+        margin-inline: 0;
+        font-size: 0.9em;
         .v-time-picker-controls__time__field {
           height: auto;
           .v-field {
             font-size: 32px;
-            background-color: rgb(var(--v-theme-fields));
+            background-color: rgb(var(--v-theme-fields-light));
+            .v-field__overlay {
+              opacity: 0;
+            }
             .v-field__input {
-              padding: 4px 8px;
-              min-height: 20px;
-              color: rgb(var(--v-theme-fields-light));
+              color: rgb(var(--v-theme-title-dark));
+            }
+          }
+          &.v-time-picker-controls__time__field--active {
+            .v-field {
+              .v-field__overlay {
+                opacity: 0;
+              }
             }
           }
         }
         .v-time-picker-controls__field-label {
           opacity: 1;
+          font-size: 1.1em;
+          color: rgb(var(--v-theme-fields-light));
         }
         .v-time-picker-controls__time__separator {
-          font-size: 32px;
-          line-height: 44px;
+          font-size: 68px;
+          line-height: 68px;
           color: rgb(var(--v-theme-fields-light));
         }
       }
     }
-    :deep(.v-picker__body) {
-      .v-time-picker-clock {
-        margin: 20px;
-        background: rgb(var(--v-theme-line));
-        .v-time-picker-clock__hand {
-          background: rgb(var(--v-theme-secondary));
-          &::before {
-            border-color: rgb(var(--v-theme-secondary));
-          }
-          &::after {
-            background: rgb(var(--v-theme-secondary));
-          }
-        }
-        .v-time-picker-clock__item {
-          color: rgb(var(--v-theme-text));
-          font-size: 14px;
-          height: 28px;
-          width: 28px;
-          &.v-time-picker-clock__item--active {
-            color: rgb(var(--v-theme-fields));
-            background: rgb(var(--v-theme-secondary));
-          }
-        }
-      }
-    }
-  }
-}
-.v-theme--dark {
-  .time-picker-content {
-    .v-time-picker {
-      :deep(.v-picker__header) {
-        border-bottom: 1px solid rgb(var(--v-theme-line));
-      }
-    }
   }
 }
 </style>

package/src/locales/en.json

@@ -43,6 +43,7 @@
     "editParams": "Edit parameters",
     "delete": "Delete",
     "save": "Save",
+    "create": "Create",
     "close": "Close",
     "toBack": "Back",
     "rename": "Rename",

package/src/locales/ru.json

@@ -43,6 +43,7 @@
     "editParams": "Редактировать параметры",
     "delete": "Удалить",
     "save": "Сохранить",
+    "create": "Создать",
     "close": "Закрыть",
     "toBack": "Назад",
     "rename": "Переименовать",

package/src/locales/uk.json

@@ -43,6 +43,7 @@
     "editParams": "Редагувати параметри",
     "delete": "Видалити",
     "save": "Зберегти",
+    "create": "Створити",
     "close": "Закрити",
     "toBack": "Назад",
     "rename": "Перейменувати",