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

package/package.json

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

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,12 +90,19 @@ 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
     emit('close')
-  } else {
-    emit('open')
   }
 })
 </script>
@@ -135,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>
@@ -161,7 +166,7 @@ watch(modelValue, val => {
         :class="noSpace ? 'ml-n1' : 'mt-5 ml-4'"
         @click="
           () => {
-            modelValue = false
+            close()
             backAction()
           }
         "
@@ -224,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 {

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"
@@ -619,6 +630,7 @@ watch(state, newState => {
     color: rgb(var(--f-user-group-chip-color));
     background: rgba(var(--f-user-group-chip-color), 0.2);
     border: 1px solid transparent;
+    font-size: 0.9em;
     &.active {
       border-color: rgb(var(--f-user-group-chip-color));
     }

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

@@ -1,6 +1,9 @@
 .f-card.v-card {
   &.v-card--hover:hover {
     box-shadow: var(--f-box-shadow);
+    .v-card__overlay {
+      opacity: 0;
+    }
   }
 }
 

package/src/assets/scss/icons.scss

@@ -260,6 +260,27 @@
     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;
+  }
 }
 
 @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/tables.scss

@@ -1,143 +1,62 @@
-// 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 {
+      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;