@it-enterprise/forcebpm-ui-kit 1.0.2-beta.25 → 1.0.2-beta.27

package/index.js

@@ -25,7 +25,7 @@ export { default as FUserRoles } from './src/FUserRoles.vue'
 export { default as FDatePicker } from './src/f-date-picker/FDatePicker.vue'
 export { default as FMenuDatePicker } from './src/f-date-picker/FMenuDatePicker.vue'
 export { default as FTextFieldDate } from './src/f-date-picker/FTextFieldDate.vue'
-// export { default as FUserGroupPicker } from './src/f-user-group-picker/FUserGroupPicker.vue'
+export { default as FUserGroupPicker } from './src/FUserGroupPicker.vue'
 
 // Utils
 export { hexToRGBA, createRadialGradient } from './src/utils/color.js'

package/package.json

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

package/src/FDialog.vue

@@ -90,6 +90,8 @@ watch(modelValue, val => {
   if (!val) {
     search.value = null
     emit('close')
+  } else {
+    emit('open')
   }
 })
 </script>

package/src/FSearchPanel.vue

@@ -121,6 +121,9 @@ const keydownEsc = () => {
     height: 30px;
     width: 30px;
     transition: all 0.2s ease-in-out;
+    .v-input__control {
+      background-color: transparent;
+    }
     &.v-input--focused {
       .v-field__prepend-inner {
         margin-left: 0px;

package/src/FUserGroupPicker.vue

@@ -0,0 +1,634 @@
+<script setup>
+// FUserGroupPicker
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from 'vuetify'
+import { colorCollection, hexToRGBA } from './utils/color'
+
+const { t } = useI18n()
+const theme = useTheme()
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+    validator: (value, props) => {
+      const isValid = value.every(item => {
+        const hasIdentityId =
+          item[props.itemValue] !== undefined && (typeof item[props.itemValue] === 'string' || typeof item[props.itemValue] === 'number')
+        const hasName = typeof item.name === 'string'
+        const isUserOrGroup = item.type === 'USER' || item.type === 'GROUP' || item.groupId !== undefined
+        return hasIdentityId && hasName && isUserOrGroup
+      })
+      if (!isValid) {
+        console.warn('FUserGroupPicker: Each item should have identityId (string or number), name (string) and type "USER" or "GROUP" (or groupId)')
+      }
+      return isValid
+    }
+  },
+  itemValue: {
+    type: String,
+    default: 'identityId',
+    validator: (value, props) => {
+      const hasGroups = props.items?.some(item => item.type === 'GROUP' || item.groupId)
+      if (hasGroups && value === 'userId') {
+        console.warn('FUserGroupPicker: itemValue cannot be "userId" when items contain groups. Use "identityId" instead.')
+        return false
+      }
+      if (!['identityId', 'userId'].includes(value)) {
+        console.warn('FUserGroupPicker: itemValue should be one of identityId, userId')
+        return false
+      }
+      return true
+    }
+  },
+  // todo when there will be a connection in ForceBPMTasks
+  executorLists: {
+    type: Array,
+    default: () => []
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  returnObject: {
+    type: Boolean,
+    default: false
+  },
+  groupSelection: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const state = defineModel('state', {
+  type: Boolean,
+  default: false
+})
+
+const modelValue = defineModel('modelValue', {
+  type: [Array, Object, String, Number],
+  default: () => []
+})
+
+const search = ref('')
+const selectedMenuId = ref(null)
+const tab = ref('USERS_BY_GROUP')
+const calculatedHeight = Math.floor(window.innerHeight * 0.1) // 10vh rounded down
+
+// Tabs for header
+const tabs = computed(() => {
+  const baseTabs = [
+    { value: 'USERS_BY_GROUP', text: t('user.usersByGroup') },
+    { value: 'USERS_BY_POSITION', text: t('user.usersByPosition') }
+  ]
+  if (props.executorLists.length > 0) {
+    baseTabs.push({ value: 'EXECUTOR_LISTS', text: t('user.executorLists') })
+  }
+  return baseTabs
+})
+
+// Map for quick access by identityId - O(1)
+const itemsMap = computed(() => {
+  const map = new Map()
+  for (const item of props.items) {
+    map.set(item.identityId, item)
+  }
+  return map
+})
+
+// Map userId -> identityId for executor lists lookup
+const userIdMap = computed(() => {
+  const map = new Map()
+  for (const item of props.items) {
+    if (item.userId !== undefined) {
+      map.set(item.userId, item.identityId)
+    }
+  }
+  return map
+})
+
+// Unique groups from items (extracted from item.groups)
+const uniqueGroups = computed(() => {
+  const groupsMap = new Map()
+  for (const item of props.items) {
+    if (item.groups?.length) {
+      for (const group of item.groups) {
+        if (!groupsMap.has(group.identityId)) {
+          groupsMap.set(group.identityId, { ...group, id: group.identityId })
+        }
+      }
+    }
+  }
+  return Array.from(groupsMap.values())
+})
+
+// Unique positions from items
+const uniquePositions = computed(() => {
+  const positionsMap = new Map()
+  for (const item of props.items) {
+    if (item.positionCode && !positionsMap.has(item.positionCode)) {
+      positionsMap.set(item.positionCode, {
+        id: item.positionCode,
+        title: item.positionTitle
+      })
+    }
+  }
+  return Array.from(positionsMap.values())
+})
+
+// Index: groupId -> Set<itemValue> for quick filtering
+const groupIndex = computed(() => {
+  const index = new Map()
+  for (const item of props.items) {
+    if (item.groups?.length) {
+      for (const group of item.groups) {
+        if (!index.has(group.identityId)) {
+          index.set(group.identityId, new Set())
+        }
+        index.get(group.identityId).add(item.identityId)
+      }
+    }
+  }
+  return index
+})
+
+// Index: positionCode -> Set<itemValue>
+const positionIndex = computed(() => {
+  const index = new Map()
+  for (const item of props.items) {
+    if (item.positionCode) {
+      if (!index.has(item.positionCode)) {
+        index.set(item.positionCode, new Set())
+      }
+      index.get(item.positionCode).add(item.identityId)
+    }
+  }
+  return index
+})
+
+// Index: executorListId -> Set<identityId>
+const executorIndex = computed(() => {
+  const index = new Map()
+  for (const list of props.executorLists) {
+    const userIds = new Set()
+    for (const userId of list.usersIds || []) {
+      const identityId = userIdMap.value.get(userId)
+      if (identityId) {
+        userIds.add(identityId)
+      }
+    }
+    index.set(list.id, userIds)
+  }
+  return index
+})
+
+// Set selected items - O(1) for checking
+const selectedIds = ref(new Set())
+
+// Set selected groups (when groupSelection = true)
+const selectedGroupIds = ref(new Set())
+
+const menuItems = computed(() => {
+  const color = idx => {
+    return hexToRGBA(colorCollection[theme.global.name.value === 'light' ? 'light' : 'dark'][idx % colorCollection.light.length]).slice(5, -3) // rgba(255, 0, 0, 0.2) -> 255, 0, 0
+  }
+
+  switch (tab.value) {
+    case 'USERS_BY_GROUP':
+      return uniqueGroups.value.map((g, idx) => ({
+        id: g.identityId,
+        name: g.name,
+        color: color(idx)
+      }))
+    case 'USERS_BY_POSITION':
+      return uniquePositions.value.map((p, idx) => ({
+        id: p.id,
+        name: p.title,
+        color: color(idx)
+      }))
+    case 'EXECUTOR_LISTS':
+      return props.executorLists.map((list, idx) => ({
+        id: list.id,
+        name: list.name,
+        color: color(idx)
+      }))
+    default:
+      return []
+  }
+})
+
+const titleByMenu = computed(() => {
+  const currentMenu = menuItems.value.find(i => i.id === selectedMenuId.value)
+  return currentMenu?.name || currentMenu?.id || (props.groupSelection ? t('user.allUsersAndGroups') : t('user.allUsers'))
+})
+
+const filteredItems = computed(() => {
+  let resultIds = null
+
+  // Step 1: Get relevant item IDs based on selected menu
+  if (selectedMenuId.value) {
+    switch (tab.value) {
+      case 'USERS_BY_GROUP':
+        resultIds = groupIndex.value.get(selectedMenuId.value)
+        break
+      case 'USERS_BY_POSITION':
+        resultIds = positionIndex.value.get(selectedMenuId.value)
+        break
+      case 'EXECUTOR_LISTS':
+        resultIds = executorIndex.value.get(selectedMenuId.value)
+        break
+    }
+  }
+
+  // Step 2: Map IDs to items (if resultIds is null, we take all items)
+  let result
+  if (resultIds) {
+    result = Array.from(resultIds, id => itemsMap.value.get(id)).filter(Boolean)
+  } else {
+    result = props.items
+  }
+
+  // Step 3: Apply search filter
+  if (search.value) {
+    result = result.filter(item => item.name?.toLowerCase().includes(search.value.toLowerCase()))
+  }
+
+  // Step 4: If groupSelection is enabled, mark items as disabled if they belong to a selected group
+  if (props.groupSelection && selectedGroupIds.value.size > 0) {
+    result = result.map(item => {
+      const isDisabledByGroup = item.groups?.some(g => selectedGroupIds.value.has(g.identityId))
+      return isDisabledByGroup ? { ...item, disabled: true } : item
+    })
+  }
+
+  return result
+})
+
+// Selected items (groups + users)
+const selectedItems = computed(() => {
+  // Users — filter out those covered by a selected group
+  const users = Array.from(selectedIds.value, id => itemsMap.value.get(id))
+    .filter(Boolean)
+    .filter(user => {
+      if (props.groupSelection && selectedGroupIds.value.size > 0 && user.groups?.length) {
+        return !user.groups.some(g => selectedGroupIds.value.has(g.identityId))
+      }
+      return true
+    })
+
+  // Groups — with selectAll flag for removeSelected logic
+  const groups = Array.from(selectedGroupIds.value, groupId => {
+    const group = uniqueGroups.value.find(g => g.identityId === groupId)
+    if (group) {
+      return {
+        ...group,
+        type: 'GROUP',
+        selectAll: true
+      }
+    }
+    return null
+  }).filter(Boolean)
+
+  const result = [...groups, ...users]
+
+  if (search.value) {
+    return result.filter(item => item.name?.toLowerCase().includes(search.value.toLowerCase()))
+  }
+
+  return result
+})
+
+const isSelected = item => {
+  // Check if user is individually selected
+  if (selectedIds.value.has(item.identityId)) return true
+
+  // Check if user is selected via group
+  if (props.groupSelection && item.groups?.some(g => selectedGroupIds.value.has(g.identityId))) {
+    return true
+  }
+
+  return false
+}
+
+const toggleSelect = item => {
+  if (item.disabled) return
+
+  const id = item.identityId
+
+  if (props.multiple) {
+    if (selectedIds.value.has(id)) {
+      selectedIds.value.delete(id)
+    } else {
+      selectedIds.value.add(id)
+    }
+    // Trigger reactivity
+    selectedIds.value = new Set(selectedIds.value)
+  } else {
+    // Single selection - immediately close picker
+    selectedIds.value = new Set([id])
+    selectHandler()
+  }
+}
+
+const removeSelected = item => {
+  if (item.disabled) return
+
+  if (item.selectAll) {
+    selectedGroupIds.value.delete(item.identityId)
+    selectedGroupIds.value = new Set(selectedGroupIds.value)
+  } else {
+    selectedIds.value.delete(item.identityId)
+    selectedIds.value = new Set(selectedIds.value)
+  }
+}
+
+const toggleAllInMenu = () => {
+  if (!selectedMenuId.value) return
+
+  if (props.groupSelection && tab.value === 'USERS_BY_GROUP') {
+    if (selectedGroupIds.value.has(selectedMenuId.value)) {
+      // Deselect group
+      selectedGroupIds.value.delete(selectedMenuId.value)
+      selectedGroupIds.value = new Set(selectedGroupIds.value)
+    } else {
+      // Select group
+      selectedGroupIds.value.add(selectedMenuId.value)
+      selectedGroupIds.value = new Set(selectedGroupIds.value)
+
+      // Remove individually selected users from this group
+      const groupUserIds = groupIndex.value.get(selectedMenuId.value)
+      if (groupUserIds) {
+        for (const userId of groupUserIds) {
+          selectedIds.value.delete(userId)
+        }
+        selectedIds.value = new Set(selectedIds.value)
+      }
+    }
+  } else {
+    let ids
+    switch (tab.value) {
+      case 'USERS_BY_GROUP':
+        ids = groupIndex.value.get(selectedMenuId.value)
+        break
+      case 'USERS_BY_POSITION':
+        ids = positionIndex.value.get(selectedMenuId.value)
+        break
+      case 'EXECUTOR_LISTS':
+        ids = executorIndex.value.get(selectedMenuId.value)
+        break
+    }
+
+    if (!ids) return
+
+    if (isAllSelectedInMenu.value) {
+      // Deselect all
+      for (const id of ids) {
+        selectedIds.value.delete(id)
+      }
+    } else {
+      // Select all (skip disabled)
+      for (const id of ids) {
+        const item = itemsMap.value.get(id)
+        if (item && !item.disabled) {
+          selectedIds.value.add(id)
+        }
+      }
+    }
+    selectedIds.value = new Set(selectedIds.value)
+  }
+}
+
+// Check if all items in current menu are selected (taking into account groupSelection logic)
+const isAllSelectedInMenu = computed(() => {
+  if (!selectedMenuId.value) return false
+
+  if (props.groupSelection && tab.value === 'USERS_BY_GROUP') {
+    return selectedGroupIds.value.has(selectedMenuId.value)
+  }
+
+  let ids
+  switch (tab.value) {
+    case 'USERS_BY_GROUP':
+      ids = groupIndex.value.get(selectedMenuId.value)
+      break
+    case 'USERS_BY_POSITION':
+      ids = positionIndex.value.get(selectedMenuId.value)
+      break
+    case 'EXECUTOR_LISTS':
+      ids = executorIndex.value.get(selectedMenuId.value)
+      break
+  }
+
+  if (!ids || ids.size === 0) return false
+
+  for (const id of ids) {
+    if (!selectedIds.value.has(id)) return false
+  }
+  return true
+})
+
+const selectMenuItem = id => {
+  selectedMenuId.value = selectedMenuId.value === id ? null : id
+}
+
+const close = () => {
+  state.value = false
+  search.value = ''
+  selectedMenuId.value = null
+}
+
+const selectHandler = () => {
+  if (props.multiple) {
+    if (props.returnObject) {
+      modelValue.value = selectedItems.value
+    } else {
+      modelValue.value = selectedItems.value.map(item => item[props.itemValue])
+    }
+  } else {
+    const selectedItem = selectedItems.value[0]
+    if (props.returnObject) {
+      modelValue.value = selectedItem
+    } else {
+      modelValue.value = selectedItem[props.itemValue]
+    }
+  }
+
+  state.value = false
+}
+
+// Reset menu selection when switching tabs
+watch(tab, () => {
+  selectedMenuId.value = null
+})
+
+// Sync with external modelValue changes
+watch(state, newState => {
+  // Reset
+  selectedIds.value = new Set()
+  selectedGroupIds.value = new Set()
+
+  if (newState && modelValue.value) {
+    // Populate from modelValue
+    const values = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value]
+    for (const val of values) {
+      if (props.returnObject) {
+        if (val.type === 'GROUP' || val.groupId) {
+          selectedGroupIds.value.add(val.identityId)
+        } else {
+          selectedIds.value.add(val.identityId)
+        }
+      } else {
+        // Find item by itemValue field
+        let found = false
+        for (const item of props.items) {
+          if (item[props.itemValue] === val) {
+            if (item.type === 'GROUP' || item.groupId) {
+              selectedGroupIds.value.add(item.identityId)
+            } else {
+              selectedIds.value.add(item.identityId)
+            }
+            found = true
+            break
+          }
+        }
+        // If not found in items, try uniqueGroups
+        if (!found && uniqueGroups.value.some(g => g[props.itemValue] === val)) {
+          const group = uniqueGroups.value.find(g => g[props.itemValue] === val)
+          selectedGroupIds.value.add(group.identityId)
+        }
+      }
+    }
+  }
+})
+</script>
+<template>
+  <FDialog
+    v-model:search="search"
+    :model-value="state"
+    name="userGroupPicker"
+    width="80vw"
+    max-width="900px"
+    persistent
+    no-space
+    is-search
+    :title="$t('user.executors')"
+    @close="close"
+  >
+    <div class="user-group-picker">
+      <!-- Header tabs -->
+      <v-tabs v-model="tab" grow class="mb-2">
+        <v-tab v-for="tabItem in tabs" :key="tabItem.value" :value="tabItem.value" height="35px" :text="tabItem.text" />
+      </v-tabs>
+
+      <!-- Filter menu -->
+      <v-tabs-window v-model="tab" class="mx-5">
+        <v-tabs-window-item
+          v-for="tabItem in tabs"
+          :key="tabItem.value"
+          :value="tabItem.value"
+          :style="{ height: `${calculatedHeight}px` }"
+          class="f-scrollbar-y"
+        >
+          <v-chip-group selected-class="active" class="pa-0" column>
+            <v-chip
+              v-for="item in menuItems"
+              :key="item.id"
+              :style="`--f-user-group-chip-color: ${item.color}`"
+              variant="flat"
+              class="user-group-picker-chip"
+              @click="selectMenuItem(item.id)"
+            >
+              {{ item.name || item.id }}
+            </v-chip>
+          </v-chip-group>
+        </v-tabs-window-item>
+      </v-tabs-window>
+
+      <div class="d-flex flex-column mx-5 mt-5">
+        <!-- Title -->
+        <span class="mb-2 ml-1 font-weight-semibold fs-11">{{ titleByMenu }}</span>
+
+        <!-- Select all users -->
+        <v-checkbox
+          v-if="selectedMenuId && multiple && (filteredItems.length || selectedItems.length)"
+          class="mb-2 ml-1"
+          :model-value="isAllSelectedInMenu"
+          :label="props.groupSelection && tab === 'USERS_BY_GROUP' ? $t('user.selectGroup') : $t('user.selectAllFromList')"
+          @update:model-value="toggleAllInMenu"
+        />
+      </div>
+
+      <div v-if="filteredItems.length || selectedItems.length" class="d-flex justify-space-between mx-5">
+        <!-- Available items -->
+        <v-virtual-scroll :items="filteredItems" height="40vh" item-key="identityId" item-height="40" max-width="45%" class="pr-2">
+          <template #default="{ item }">
+            <div class="d-flex align-center justify-start picker-list-item" :class="{ 'is-disabled': item.disabled }" @click="toggleSelect(item)">
+              <v-checkbox :model-value="isSelected(item)" :disabled="item.disabled" />
+              <FAvatar :full-user="item.type === 'USER' ? item : null" :group="item.type === 'GROUP' ? item : null" size="20" class="ml-1 mr-2" />
+              <span class="picker-item-name">{{ item.name }}</span>
+            </div>
+          </template>
+        </v-virtual-scroll>
+
+        <!-- Selected items -->
+        <v-virtual-scroll :items="selectedItems" height="40vh" item-key="identityId" item-height="40" max-width="45%" class="pr-2">
+          <template #default="{ item }">
+            <div class="d-flex align-center justify-start picker-list-item" :class="{ 'is-disabled': item.disabled }" @click="removeSelected(item)">
+              <v-checkbox :model-value="true" :disabled="item.disabled" />
+              <FAvatar :full-user="item.type === 'USER' ? item : null" :group="item.type === 'GROUP' ? item : null" size="20" class="ml-1 mr-2" />
+              <span class="picker-item-name">{{ item.name }}</span>
+            </div>
+          </template>
+        </v-virtual-scroll>
+      </div>
+
+      <FNoData v-else height="40vh" class="mt-5" :is-search="search" />
+    </div>
+
+    <template #actions>
+      <v-btn class="mx-auto" width="300" @click="selectHandler">
+        {{ $t('buttons.select') }}
+      </v-btn>
+    </template>
+  </FDialog>
+</template>
+
+<style lang="scss" scoped>
+.user-group-picker {
+  :deep(.v-virtual-scroll__item) {
+    padding: 0;
+    &:nth-child(odd) {
+      background-color: rgb(var(--v-theme-fields));
+    }
+    .picker-list-item {
+      padding: 5px;
+      transition: all 0.3s ease-in-out;
+      &:not(.is-disabled) {
+        cursor: pointer;
+        &:hover {
+          background-color: rgba(var(--v-theme-primary), 0.2);
+        }
+      }
+    }
+  }
+  .user-group-picker-chip {
+    --v-chip-height: 20px;
+    margin: 3px;
+    border-radius: 4.8px;
+    color: rgb(var(--f-user-group-chip-color));
+    background: rgba(var(--f-user-group-chip-color), 0.2);
+    border: 1px solid transparent;
+    &.active {
+      border-color: rgb(var(--f-user-group-chip-color));
+    }
+    &.v-theme--dark {
+      color: rgb(var(--v-theme-title));
+      background: rgba(var(--f-user-group-chip-color), 0.7);
+      &.active {
+        border-color: rgb(var(--v-theme-title));
+      }
+    }
+  }
+}
+</style>

package/src/assets/scss/input.scss

@@ -1,9 +1,10 @@
 // Override input styles
 .f-input {
   border-radius: 5.8px;
-  background-color: rgb(var(--v-theme-background));
   color: rgb(var(--v-theme-text));
-
+  .v-input__control {
+    background-color: rgb(var(--v-theme-fields));
+  }
   &:hover {
     .v-field {
       .v-label {
@@ -45,6 +46,10 @@
     .v-label {
       opacity: 1;
       color: rgb(var(--v-theme-text));
+      font-size: 0.95rem;
+      &.v-field-label--floating {
+        font-size: 0.7rem;
+      }
     }
 
     &.v-field--variant-outlined {
@@ -72,7 +77,7 @@
       padding-top: 16px;
       padding-bottom: 10px;
       padding-inline: 12px 12px;
-      min-height: auto;
+      min-height: 20px;
       font-size: 0.95em;
       line-height: 1em;
       color: rgb(var(--v-theme-subTitle));
@@ -83,6 +88,15 @@
         border-radius: 5.8px !important;
       }
     }
+    input {
+      min-height: 20px;
+      &:is(:-webkit-autofill, :autofill) {
+        -webkit-text-fill-color: rgb(var(--v-theme-subTitle)) !important;
+        -webkit-box-shadow: 0 0 0 1000px rgb(var(--v-theme-background)) inset !important;
+        background-color: rgb(var(--v-theme-background)) !important;
+        border-radius: 5.8px !important;
+      }
+    }
     input::placeholder {
       font-size: 0.9em;
       opacity: 0.9;
@@ -140,6 +154,26 @@
   }
 }
 
+// Autocomplete User
+.f-input.f-autocomplete-user {
+  // .v-field {
+  //   .v-field__outline__end {
+  // min-width: calc(100% - 53px);
+  // }
+  // }
+  &.v-input--horizontal .v-input__append {
+    margin-inline-start: 0px;
+    .f-icon {
+      opacity: 1;
+      transition: all 0.3s ease-in-out;
+      &:hover {
+        background: rgb(var(--v-theme-primary)) !important;
+      }
+    }
+  }
+}
+
+// Textarea
 .f-input.v-textarea {
   .v-field {
     .v-field__input {
@@ -164,12 +198,14 @@
     }
   }
   .v-autocomplete__selection {
+    height: 20px;
     .f-chip.v-chip {
-      --v-chip-height: 22px;
+      --v-chip-height: 20px;
       padding: 0;
       border-radius: 16.8px;
       font-size: 0.75em;
       background: rgb(var(--v-theme-line));
+      color: rgb(var(--v-theme-subTitle));
       .v-chip__close {
         margin-inline-start: 5px;
         margin-inline-end: 5px;
@@ -242,11 +278,11 @@
 
 //Radio
 .f-radio {
-  --v-selection-control-size: 16px;
   &.v-selection-control--inline:not(:last-child) {
     margin-right: 8px;
   }
   .v-selection-control__wrapper {
+    --v-selection-control-size: 16px;
     .v-selection-control__input {
       &::before {
         content: none;

package/src/assets/scss/tabs.scss

@@ -15,7 +15,7 @@
         height: 1px;
         width: 100%;
         background: rgb(var(--v-theme-line));
-        transform: scaleY(0.7);
+        transform: scaleY(1);
         transform-origin: bottom;
       }
       .v-slide-group__content {
@@ -29,8 +29,8 @@
           }
           .v-btn__content {
             .v-tab__slider {
-              height: 1.5px;
-              z-index: 1;
+              // height: 0;
+              // opacity: 0;
             }
           }
         }

package/src/assets/scss/utilities.scss

@@ -63,19 +63,41 @@
   &::-webkit-scrollbar {
     width: 6px;
   }
-
+  &::-webkit-scrollbar-track {
+    border-radius: 10.8px;
+    box-shadow: inset 0 0 6px rgba(var(--v-theme-disabled));
+  }
   &::-webkit-scrollbar-thumb {
-    background: rgba(var(--v-theme-primary), 0.6);
+    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: rgba(var(--v-theme-primary), 1);
+      background-color: rgba(var(--v-theme-primary));
     }
   }
+}
 
+.v-virtual-scroll {
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
   &::-webkit-scrollbar-track {
-    background: rgba(var(--v-theme-disabled), 0.4);
     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/locales/en.json

@@ -53,7 +53,19 @@
   "user": {
     "telephone": "Phone number",
     "position": "Position",
-    "department": "Department"
+    "department": "Department",
+    "executor": "Executor",
+    "executors": "Executors",
+    "initiator": "Initiator",
+    "candidates": "Candidates",
+    "inform": "To attention",
+    "executorLists": "Executor lists",
+    "usersByGroup": "Users by groups",
+    "usersByPosition": "Users by job title",
+    "allUsers": "All users",
+    "allUsersAndGroups": "All users and groups",
+    "selectGroup": "Select group",
+    "selectAllFromList": "Select all from list"
   },
   "tooltip": {
     "actions": "Additional actions",

package/src/locales/ru.json

@@ -53,7 +53,20 @@
   "user": {
     "telephone": "Номер телефона",
     "position": "Должность",
-    "department": "Департамент"
+    "department": "Департамент",
+    "executor": "Исполнитель",
+    "executors": "Исполнители",
+    "candidate": "Кандидат",
+    "candidates": "Кандидаты",
+    "initiator": "Инициатор",
+    "inform": "К сведению",
+    "executorLists": "Списки исполнителей",
+    "usersByGroup": "Пользователи по группам",
+    "usersByPosition": "Пользователи по должностям",
+    "allUsers": "Все пользователи",
+    "allUsersAndGroups": "Все пользователи и группы",
+    "selectGroup": "Выбрать группу",
+    "selectAllFromList": "Выбрать всех из списка"
   },
   "tooltip": {
     "actions": "Дополнительные действия",

package/src/locales/uk.json

@@ -53,7 +53,20 @@
   "user": {
     "telephone": "Номер телефону",
     "position": "Посада",
-    "department": "Департамент"
+    "department": "Департамент",
+    "executor": "Виконавець",
+    "executors": "Виконавці",
+    "candidate": "Кандидат",
+    "candidates": "Кандидати",
+    "initiator": "Ініціатор",
+    "inform": "До відома",
+    "executorLists": "Списки виконавців",
+    "usersByGroup": "Користувачі за групами",
+    "usersByPosition": "Користувачі за посадою",
+    "allUsers": "Всі користувачі",
+    "allUsersAndGroups": "Всі користувачі та групи",
+    "selectGroup": "Вибрати групу",
+    "selectAllFromList": "Вибрати всіх зі списку"
   },
   "tooltip": {
     "actions": "Додаткові дії",

package/src/utils/color.js

@@ -31,3 +31,8 @@ export const hexToRGBA = (hex, alpha) => {
 export const createRadialGradient = (mainColor, spreadColor) => {
   return `radial-gradient(83.34% 88.78% at 50.00% 50.00%, ${hexToRGBA(mainColor, 0.25)} 0%, ${hexToRGBA(mainColor, 0.08)} 31.56%, ${hexToRGBA(spreadColor, 0)} 57.76%)`
 }
+
+export const colorCollection = {
+  light: ['#5400A1', '#038D00', '#0051DC', '#EE6D10', '#DC005C', '#7400CF', '#006794', '#0B14EF', '#CA00DC', '#007B5E'],
+  dark: ['#8848C5', '#6A9269', '#6E96DB', '#D45496', '#0081B9', '#D1AD55', '#DC7B7B', '#614FCF', '#007B5E', '#AF3EB9']
+}