@it-enterprise/forcebpm-ui-kit 1.0.2-beta.21 → 1.0.2-beta.22

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

@@ -1,25 +1,25 @@
 {
-    "buttons": {
-        "close": "Close",
-        "share": "Share",
-        "yes": "Yes",
-        "no": "No"
-    },
-    "noData": {
-        "title": "No data available"
-    },
-    "tooltip": {
-        "actions": "Actions"
-    },
-    "updating": "Updating...",
-    "notification": {
-        "openTask": "Open task",
-        "openDocument": "Open document",
-        "openDescussion": "Open discussion"
-    },
-    "user": {
-        "telephone": "Phone",
-        "position": "Position",
-        "department": "Department"
-    }
-}
+  "buttons": {
+    "close": "Close",
+    "share": "Share",
+    "yes": "Yes",
+    "no": "No"
+  },
+  "noData": {
+    "title": "No data available"
+  },
+  "tooltip": {
+    "actions": "Actions"
+  },
+  "updating": "Updating...",
+  "notification": {
+    "openTask": "Open task",
+    "openDocument": "Open document",
+    "openDescussion": "Open discussion"
+  },
+  "user": {
+    "telephone": "Phone",
+    "position": "Position",
+    "department": "Department"
+  }
+}

package/src/locales/ru.json

@@ -1,25 +1,25 @@
 {
-    "buttons": {
-        "close": "Закрыть",
-        "share": "Поделиться",
-        "yes": "Да",
-        "no": "Нет"
-    },
-    "noData": {
-        "title": "Данные отсутствуют"
-    },
-    "tooltip": {
-        "actions": "Действия"
-    },
-    "updating": "Обновление...",
-    "notification": {
-        "openTask": "Открыть задачу",
-        "openDocument": "Открыть документ",
-        "openDescussion": "Открыть обсуждение"
-    },
-    "user": {
-        "telephone": "Телефон",
-        "position": "Должность",
-        "department": "Отдел"
-    }
-}
+  "buttons": {
+    "close": "Закрыть",
+    "share": "Поделиться",
+    "yes": "Да",
+    "no": "Нет"
+  },
+  "noData": {
+    "title": "Данные отсутствуют"
+  },
+  "tooltip": {
+    "actions": "Действия"
+  },
+  "updating": "Обновление...",
+  "notification": {
+    "openTask": "Открыть задачу",
+    "openDocument": "Открыть документ",
+    "openDescussion": "Открыть обсуждение"
+  },
+  "user": {
+    "telephone": "Телефон",
+    "position": "Должность",
+    "department": "Отдел"
+  }
+}

package/src/locales/uk.json

@@ -1,25 +1,25 @@
 {
-    "buttons": {
-        "close": "Закрити",
-        "share": "Поділитися",
-        "yes": "Так",
-        "no": "Ні"
-    },
-    "noData": {
-        "title": "Дані відсутні"
-    },
-    "tooltip": {
-        "actions": "Дії"
-    },
-    "updating": "Оновлення...",
-    "notification": {
-        "openTask": "Відкрити задачу",
-        "openDocument": "Відкрити документ",
-        "openDescussion": "Відкрити обговорення"
-    },
-    "user": {
-        "telephone": "Телефон",
-        "position": "Посада",
-        "department": "Відділ"
-    }
-}
+  "buttons": {
+    "close": "Закрити",
+    "share": "Поділитися",
+    "yes": "Так",
+    "no": "Ні"
+  },
+  "noData": {
+    "title": "Дані відсутні"
+  },
+  "tooltip": {
+    "actions": "Дії"
+  },
+  "updating": "Оновлення...",
+  "notification": {
+    "openTask": "Відкрити задачу",
+    "openDocument": "Відкрити документ",
+    "openDescussion": "Відкрити обговорення"
+  },
+  "user": {
+    "telephone": "Телефон",
+    "position": "Посада",
+    "department": "Відділ"
+  }
+}

package/src/scss/buttons.scss

@@ -1,6 +1,6 @@
 // Global button styles with theme support
 
-.v-btn {
+.f-btn.v-btn {
   --v-btn-size: 1em;
   --v-btn-height: 40px;
   letter-spacing: 0.03em;
@@ -58,45 +58,3 @@
     }
   }
 }
-
-// .fbpmp-add-tab-btn.v-btn.v-btn--icon {
-//   padding: 0 !important;
-//   min-width: 38px !important;
-//   width: 38px;
-//   height: 38px !important;
-//   border-radius: 0;
-//   border-bottom: 1px solid var(--v-line3-base) !important;
-//   &.v-btn--disabled {
-//     .f-icon {
-//       background-color: rgb(var(--v-theme-disabled) !important;
-//     }
-//   }
-//   .f-icon {
-//     height: 19px;
-//     width: 19px;
-//   }
-// }
-// .toolbar-icon-btn.v-btn {
-//   min-width: 30px !important;
-//   max-width: 30px !important;
-//   height: 30px !important;
-//   padding: 5px;
-//   padding-bottom: 0;
-//   .v-badge {
-//     width: 30px;
-//   }
-//   i {
-//     height: 15px;
-//     width: 15px;
-//   }
-// }
-// @media (max-width: 1350px) {
-//   .fbpmp-add-tab-btn {
-//     min-width: 32px !important;
-//     width: 32px;
-//     height: 32px !important;
-//     .v-btn__content {
-//       margin-right: 1px;
-//     }
-//   }
-// }

package/src/scss/card.scss

@@ -3,3 +3,9 @@
     box-shadow: var(--f-box-shadow);
   }
 }
+
+.v-sheet,
+.v-card {
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-text));
+}

package/src/scss/expansion.scss

@@ -1,8 +1,3 @@
-// .f-expansion-panels {
-//   &.v-expansion-panels {
-//   }
-// }
-
 .f-expansion-panel {
   &.v-expansion-panel {
     background: transparent;

package/src/scss/index.scss

@@ -6,8 +6,6 @@
 @use 'expansion';
 @use 'skeleton';
 @use 'card';
-@use 'checkbox';
 @use 'pagination';
 @use 'snackbar';
 // @use 'tables';
-// @use 'bryntum';