@it-enterprise/forcebpm-ui-kit 1.0.2-beta.3 → 1.0.2-beta.30

package/src/f-toolbar/FTabPanel.vue

@@ -0,0 +1,123 @@
+<script setup>
+// FTabPanel
+
+defineProps({
+  tabs: {
+    type: Array,
+    default: () => [],
+    validator: value => {
+      const values = value.map(i => i.value)
+      const isUnique = new Set(values).size === values.length
+      return (
+        isUnique &&
+        value.every(
+          i =>
+            'name' in i &&
+            typeof i.name === 'string' &&
+            'value' in i &&
+            (typeof i.value === 'number' || typeof i.value === 'string') &&
+            (i.count === undefined || i.count === null || typeof i.count === 'number') &&
+            (i.loading === undefined || typeof i.loading === 'boolean') &&
+            (i.hide === undefined || typeof i.hide === 'boolean')
+        )
+      )
+    }
+    // Example:
+    //    {
+    //     name: String,
+    //     value: Number | String,
+    //     count: Number,
+    //     loading: Boolean,
+    //     hide: Boolean,
+    //   }
+  },
+  slider: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const modelValue = defineModel({
+  type: [Number, String],
+  default: 0
+})
+</script>
+
+<template>
+  <v-tabs v-model="modelValue" :hide-slider="!slider" height="32" class="f-tab-panel" :class="{ 'is-slider': slider }">
+    <template v-for="t in tabs">
+      <v-tab v-if="!t.hide" :key="t.value" :value="t.value">
+        <!-- Loading -->
+        <v-skeleton-loader v-if="t.loading" width="120px" height="24px" class="f-skeleton-loader" :class="{ 'pt-2': !slider }" type="text" />
+
+        <!-- Tab name -->
+        <div v-else class="d-flex align-center justify-center f-tab-panel-name">
+          <FTruncate location="top" offset="6, 6" :text="t.name" />
+          &nbsp;
+          <span v-if="typeof t.count === 'number'" class="lh-11">({{ t.count }})</span>
+        </div>
+      </v-tab>
+    </template>
+  </v-tabs>
+</template>
+
+<style lang="scss" scoped>
+.f-tab-panel {
+  position: relative;
+  bottom: -1px;
+  &.is-slider {
+    :deep(.v-slide-group__container) {
+      .v-slide-group__content {
+        .v-btn {
+          .v-btn__content {
+            .v-tab__slider {
+              height: 2px;
+            }
+          }
+        }
+      }
+    }
+  }
+  :deep(.v-slide-group__container) {
+    &::after {
+      content: none;
+    }
+  }
+  .f-tab-panel-name {
+    max-width: 320px;
+  }
+  &:not(.is-slider) {
+    :deep(.v-slide-group__container) {
+      .v-slide-group__content {
+        .v-tab {
+          border-bottom: 0 !important;
+          border-bottom-right-radius: 0 !important;
+          border-bottom-left-radius: 0 !important;
+          border-top-right-radius: 10.8px !important;
+          border-top-left-radius: 10.8px !important;
+          &::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background: rgb(var(--v-theme-line));
+          }
+          &.v-tab-item--selected {
+            background: rgb(var(--v-theme-fields));
+            border: 0.5px solid rgb(var(--v-theme-primary));
+            position: relative;
+            &::before {
+              content: none;
+            }
+          }
+          :deep(.v-btn__content) {
+            white-space: initial;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/f-toolbar/FToolbar.vue

@@ -0,0 +1,131 @@
+<script setup>
+// FToolbar
+
+defineProps({
+  tabs: {
+    type: Array,
+    default: () => []
+  },
+  viewers: {
+    type: Array,
+    default: () => []
+  },
+  config: {
+    type: Object,
+    default: () => ({
+      search: true,
+      sort: true,
+      filter: true,
+      menuFilter: false,
+      favorites: false
+    }),
+    validator: value => {
+      if (value.filter && value.menuFilter) {
+        console.warn('"filter" and "menuFilter" cannot both be true')
+        return false
+      }
+      return true
+    }
+  },
+  sortBadge: {
+    type: Boolean,
+    default: false
+  },
+  filterBadge: {
+    type: Boolean,
+    default: false
+  },
+  slider: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['filterActivator'])
+
+const activeTab = defineModel('activeTab', {
+  type: [Number, String],
+  default: 0
+})
+const activeViewer = defineModel('activeViewer', {
+  type: [Number, String],
+  default: 0
+})
+const search = defineModel('search', {
+  type: String,
+  default: ''
+})
+const filter = defineModel('filter', {
+  type: Boolean,
+  default: false
+})
+const sort = defineModel('sort', {
+  type: Boolean,
+  default: false
+})
+const favorites = defineModel('favorites', {
+  type: Boolean,
+  default: false
+})
+</script>
+
+<template>
+  <div class="f-toolbar d-flex">
+    <slot name="prependActions"></slot>
+    <!-- Tabs -->
+    <FTabPanel v-if="tabs.length" v-model="activeTab" :slider="slider" :tabs="tabs" />
+
+    <v-spacer />
+
+    <!-- Viewers -->
+    <FViewerPanel v-if="viewers.length" v-model="activeViewer" :viewers="viewers" />
+
+    <!-- Actions -->
+    <div class="d-flex f-toolbar-actions">
+      <!-- Search -->
+      <FSearchPanel v-if="config.search" v-model="search" search-on-blur :tooltip-props="{ location: 'top', offset: '10' }" />
+
+      <!-- Dialog filter activator -->
+      <v-tooltip v-if="config.filter && !config.menuFilter" :text="$t('tooltip.filter')">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn class="f-filter-activator" variant="text" size="30" v-bind="tooltipProps" @click="emit('filterActivator')">
+            <v-badge dot color="primary" :model-value="Boolean(filterBadge)" offset-x="-4" offset-y="-2">
+              <FIcon icon="filter" color="text" size="18" />
+            </v-badge>
+          </v-btn>
+        </template>
+      </v-tooltip>
+
+      <!-- Menu filter -->
+      <FFilterPanel v-if="!config.filter && config.menuFilter" v-model="filter" :badge="filterBadge">
+        <slot name="filter"></slot>
+      </FFilterPanel>
+
+      <!-- Sort -->
+      <FSortPanel v-if="config.sort" v-model="sort" :badge="sortBadge">
+        <slot name="sort"></slot>
+      </FSortPanel>
+
+      <!-- Favorites -->
+      <v-tooltip v-if="config.favorites" :text="$t('tooltip.favoritesFilter')">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn variant="text" v-bind="tooltipProps" size="30" @click="favorites = !favorites">
+            <FIcon :icon="favorites ? 'star' : 'star-line'" color="text" />
+          </v-btn>
+        </template>
+      </v-tooltip>
+
+      <!-- Custom actions -->
+      <slot name="customActions"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.f-toolbar {
+  max-height: 32px;
+  width: 100%;
+  position: relative;
+  border-bottom: 1px solid rgb(var(--v-theme-disabled));
+}
+</style>

package/src/f-toolbar/FViewerPanel.vue

@@ -0,0 +1,71 @@
+<script setup>
+// FViewerPanel
+defineProps({
+  viewers: {
+    type: Array,
+    default: () => [],
+    validator: value => {
+      const values = value.map(i => i.value)
+      const isUnique = new Set(values).size === values.length
+
+      return (
+        isUnique &&
+        value.every(
+          i =>
+            'name' in i &&
+            typeof i.name === 'string' &&
+            'value' in i &&
+            (typeof i.value === 'number' || typeof i.value === 'string') &&
+            (i.loading === undefined || typeof i.loading === 'boolean') &&
+            (i.hide === undefined || typeof i.hide === 'boolean')
+        )
+      )
+    }
+    // Example:
+    //    {
+    //     name: String,
+    //     value: Number | String,
+    //     loading: Boolean,
+    //     hide: Boolean,
+    //   }
+  }
+})
+
+const modelValue = defineModel({
+  type: [Number, String],
+  default: 0
+})
+</script>
+<template>
+  <v-tabs v-model="modelValue" hide-slider height="32" class="f-viewer-panel">
+    <template v-for="v in viewers">
+      <v-tab v-if="!v.hide" :key="v.value" :value="v.value" :ripple="false">
+        <!-- Loading -->
+        <v-skeleton-loader v-if="v.loading" width="120px" height="24px" class="pt-2 f-skeleton-loader" type="text" />
+
+        <!-- Viewer name -->
+        <template v-else>{{ v.name }}</template>
+      </v-tab>
+    </template>
+  </v-tabs>
+</template>
+
+<style lang="scss" scoped>
+.f-viewer-panel {
+  background: transparent;
+  :deep(.v-slide-group__container) {
+    &::after {
+      content: none;
+    }
+    .v-slide-group__content {
+      .v-tab {
+        padding-left: 13.5px;
+        padding-right: 13.5px;
+        .v-btn__overlay {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/forcebpmIcon.js

@@ -0,0 +1,69 @@
+import { h } from 'vue'
+
+// Component for using as <f-icon> or <FIcon>
+export const FIcon = {
+  name: 'FIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    size: {
+      type: [String, Number],
+      default: 20
+    },
+    height: {
+      type: [String, Number],
+      default: null
+    },
+    width: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  render() {
+    const formatSize = value => {
+      if (typeof value === 'string') {
+        // If already contains unit (em, rem, px), use as is
+        if (value.includes('em') || value.includes('rem') || value.includes('px')) {
+          return value
+        }
+        // If string but no unit, treat as number
+        return `${parseFloat(value)}px`
+      }
+      // If number, add px
+      return `${value}px`
+    }
+
+    const height = this.height || this.size
+    const width = this.width || this.size
+
+    return h('i', {
+      class: ['f-icon', this.icon, `bg-${this.color}`],
+      style: {
+        height: formatSize(height),
+        width: formatSize(width),
+        minHeight: formatSize(height),
+        minWidth: formatSize(width)
+      }
+    })
+  }
+}
+
+// Custom icon component for Vuetify
+export const forcebpmIcon = {
+  component: props => {
+    // Extract icon name from props.icon
+    // Example: 'f-icon:chevron-left' -> 'chevron-left'
+    const iconName = props.icon.replace('f-icon:', '')
+
+    return h('i', {
+      class: ['f-icon', iconName, props.class],
+      style: props.style
+    })
+  }
+}

package/src/locales/en.json

@@ -0,0 +1,115 @@
+{
+  "tokenRefresh": "Session is refreshing... Please wait",
+  "login": {
+    "title": "Sign In",
+    "welcome": "Welcome! Please select a login method",
+    "subTitle": "Enter your login and password to access the system",
+    "rememberMe": "Remember me",
+    "login": "Login",
+    "loginPlaceholder": "Enter your login",
+    "password": "Password",
+    "passwordPlaceholder": "Type password",
+    "loggedIn": "You are already logged in!",
+    "loginSuccess": "Login successful",
+    "loginFail": "Failed to login, try again",
+    "loginError": "Error trying to login, contact support",
+    "forgotPassword": "Forgot password?",
+    "errorLoginOrPass": "Wrong login or password",
+    "loginConfirmation": "Login confirmation",
+    "confirmationCode": "Confirmation code"
+  },
+  "errorPage": {
+    "title": "Oops... Something went wrong :(",
+    "youCan": "however, you can",
+    "checkConnection": "check your internet connection and try again",
+    "networkError": "No connection to the server",
+    "error400": "Bad request",
+    "error404": "Page not found",
+    "error500": "Server error, please contact support",
+    "error503": "Service unavailable, please try again later",
+    "errorUnknown": "An unknown error occurred, please contact support"
+  },
+  "buttons": {
+    "share": "Share",
+    "collect": "Collect",
+    "select": "Select",
+    "apply": "Apply",
+    "cancel": "Cancel",
+    "login": "Sign in",
+    "smartID": "Smart ID",
+    "logout": "Logout",
+    "refresh": "Refresh",
+    "edit": "Edit",
+    "editParams": "Edit parameters",
+    "delete": "Delete",
+    "save": "Save",
+    "close": "Close",
+    "toBack": "Back",
+    "rename": "Rename",
+    "yes": "Yes",
+    "no": "No",
+    "home": "Go to home",
+    "reload": "Reload"
+  },
+  "user": {
+    "telephone": "Phone number",
+    "position": "Position",
+    "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",
+    "colorTheme": "Color theme",
+    "darkTheme": "Dark theme",
+    "version": "Version",
+    "delegateRights": "Delegate rights",
+    "delegatedRights": "Delegation of rights"
+  },
+  "notification": {
+    "title": "Notifications",
+    "unmute": "Enable pop-up notifications",
+    "mute": "Disable pop-up notifications",
+    "read": "Read",
+    "unread": "Unread",
+    "markAllAsRead": "Mark all as read",
+    "markAsRead": "Mark as read"
+  },
+  "tooltip": {
+    "actions": "Additional actions",
+    "filter": "Filter",
+    "sort": "Sort",
+    "search": "Search",
+    "calendar": "Calendar",
+    "clearDate": "Clear date"
+  },
+  "noData": {
+    "title": "No data available",
+    "matches": "No matches found",
+    "notification": "No notifications"
+  },
+  "pickers": {
+    "from": "From",
+    "to": "To",
+    "time": "Time",
+    "periodName": "Period",
+    "dFormat": "dd",
+    "mFormat": "mm",
+    "yFormat": "yyyy",
+    "hFormat": "hh",
+    "minFormat": "mm"
+  },
+  "pagination": {
+    "itemsPerPage": "Items per page",
+    "total": "Total items",
+    "of": "of",
+    "all": "All"
+  }
+}

package/src/locales/index.js

@@ -0,0 +1,7 @@
+import en from './en.json'
+import uk from './uk.json'
+import ru from './ru.json'
+
+export const defaultMessages = { en, uk, ru }
+
+export { en, uk, ru }

package/src/locales/ru.json

@@ -0,0 +1,116 @@
+{
+  "tokenRefresh": "Сеанс обновляется... Пожалуйста, подождите",
+  "login": {
+    "title": "Вход",
+    "welcome": "Добро пожаловать! Пожалуйста, выберите способ входа в систему",
+    "subTitle": "Введите ваши логин и пароль для входа в систему",
+    "rememberMe": "Запомнить меня",
+    "login": "Логин",
+    "loginPlaceholder": "Введите логин",
+    "password": "Пароль",
+    "passwordPlaceholder": "Введите пароль",
+    "loggedIn": "Вы уже вошли в систему!",
+    "loginSuccess": "Вход выполнен успешно",
+    "loginFail": "Не удалось войти в систему, попробуйте еще раз",
+    "loginError": "Ошибка при попытке входа в систему, обратитесь в поддержку",
+    "forgotPassword": "Забыли пароль?",
+    "errorLoginOrPass": "Неверный логин или пароль",
+    "loginConfirmation": "Подтверждение входа",
+    "confirmationCode": "Код подтверждения"
+  },
+  "errorPage": {
+    "title": "Упс... Что-то пошло не так :(",
+    "youCan": "однако вы можете",
+    "checkConnection": "проверьте интернет-соединение и попробуйте снова",
+    "networkError": "Нет подключения к серверу",
+    "error400": "Плохой запрос",
+    "error404": "Такой страницы не существует",
+    "error500": "Ошибка сервера, обратитесь в поддержку",
+    "error503": "Сервис недоступен, попробуйте позже",
+    "errorUnknown": "Произошла неизвестная ошибка, обратитесь в поддержку"
+  },
+  "buttons": {
+    "share": "Поделиться",
+    "collect": "Отобрать",
+    "select": "Выбрать",
+    "apply": "Применить",
+    "cancel": "Отмена",
+    "login": "Вход",
+    "smartID": "Smart ID",
+    "logout": "Выход",
+    "refresh": "Обновить",
+    "edit": "Редактировать",
+    "editParams": "Редактировать параметры",
+    "delete": "Удалить",
+    "save": "Сохранить",
+    "close": "Закрыть",
+    "toBack": "Назад",
+    "rename": "Переименовать",
+    "yes": "Да",
+    "no": "Нет",
+    "home": "Вернуться на главную",
+    "reload": "Перезагрузить"
+  },
+  "user": {
+    "telephone": "Номер телефона",
+    "position": "Должность",
+    "department": "Департамент",
+    "executor": "Исполнитель",
+    "executors": "Исполнители",
+    "candidate": "Кандидат",
+    "candidates": "Кандидаты",
+    "initiator": "Инициатор",
+    "inform": "К сведению",
+    "executorLists": "Списки исполнителей",
+    "usersByGroup": "Пользователи по группам",
+    "usersByPosition": "Пользователи по должностям",
+    "allUsers": "Все пользователи",
+    "allUsersAndGroups": "Все пользователи и группы",
+    "selectGroup": "Выбрать группу",
+    "selectAllFromList": "Выбрать всех из списка",
+    "colorTheme": "Цветовая тема",
+    "darkTheme": "Темная тема",
+    "version": "Версия",
+    "delegateRights": "Делегировать права",
+    "delegatedRights": "Делегирование прав"
+  },
+  "notification": {
+    "title": "Уведомления",
+    "unmute": "Включить всплывающие уведомления",
+    "mute": "Отключить всплывающие уведомления",
+    "read": "Прочитанные",
+    "unread": "Непрочитанные",
+    "markAllAsRead": "Отметить все как прочитанные",
+    "markAsRead": "Отметить как прочитанное"
+  },
+  "tooltip": {
+    "actions": "Дополнительные действия",
+    "filter": "Фильтр",
+    "sort": "Сортировка",
+    "search": "Поиск",
+    "calendar": "Календарь",
+    "clearDate": "Очистить дату"
+  },
+  "noData": {
+    "title": "Нет доступных данных",
+    "matches": "Совпадений не найдено",
+    "notification": "Нет уведомлений"
+  },
+  "pickers": {
+    "from": "От",
+    "to": "До",
+    "time": "Время",
+    "periodName": "Период",
+    "dFormat": "дд",
+    "mFormat": "мм",
+    "yFormat": "гггг",
+    "hFormat": "чч",
+    "minFormat": "мм"
+  },
+  "pagination": {
+    "itemsPerPage": "Элементов на странице",
+    "total": "Всего элементов",
+    "of": "из",
+    "all": "Все"
+  }
+}