@it-enterprise/forcebpm-ui-kit 1.0.2-beta.34 → 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.34",
+  "version": "1.0.2-beta.35",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",

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/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

@@ -295,6 +295,13 @@
     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

@@ -212,7 +212,7 @@
       --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 {
@@ -230,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 {
@@ -252,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

@@ -54,6 +54,11 @@
     .v-list {
       .v-list-item {
         min-height: 28px;
+        .v-list-item-subtitle {
+          font-size: 0.9em;
+          opacity: 1;
+          color: rgb(var(--v-theme-text));
+        }
       }
     }
   }

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": "Перейменувати",