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

package/index.js

@@ -10,6 +10,21 @@ export { default as FNoData } from './src/FNoData.vue'
 export { default as FNotify } from './src/FNotify.vue'
 export { default as FShare } from './src/FShare.vue'
 export { default as FContextMenu } from './src/FContextMenu.vue'
+export { default as FSearchPanel } from './src/FSearchPanel.vue'
+export { default as FDialog } from './src/FDialog.vue'
+export { default as FToolbar } from './src/f-toolbar/FToolbar.vue'
+export { default as FTabPanel } from './src/f-toolbar/FTabPanel.vue'
+export { default as FViewerPanel } from './src/f-toolbar/FViewerPanel.vue'
+export { default as FFilterPanel } from './src/f-toolbar/FFilterPanel.vue'
+export { default as FSortPanel } from './src/f-toolbar/FSortPanel.vue'
+export { default as FTruncate } from './src/FTruncate.vue'
+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'
+
+// Icon components
+export { FIcon, forcebpmIcon } from './src/forcebpmIcon.js'
 
 // Plugin and translations
 export { default as ForceBPMUiKit, defaultMessages } from './plugin.js'

package/package.json

@@ -1,6 +1,7 @@
 {
+  "type": "module",
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.21",
+  "version": "1.0.2-beta.22",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",
@@ -37,20 +38,42 @@
   ],
   "dependencies": {
     "dompurify": "^3.0.0",
+    "moment": "^2.30.1",
     "vue": "^3.0.0"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "@vueuse/core": "^14.1.0",
+    "vue": "^3.0.0",
+    "vue-i18n": "^11.2.8",
+    "vuetify": "^3.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.0",
+    "@eslint/js": "^9.39.2",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
     "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.7.0",
+    "jsdom": "^27.4.0",
+    "prettier": "^3.8.1",
     "sass-embedded": "^1.97.2",
-    "vite": "^5.0.0"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "scripts": {
+    "lint": "eslint --ext .js,.vue src",
+    "lint:fix": "eslint --ext .js,.vue src --fix",
+    "format": "prettier --write \"src/**/*.{js,vue,json,scss}\"",
+    "preview": "vite preview",
     "build": "vite build",
-    "test": "echo 'Test script placeholder'"
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -60,4 +83,4 @@
     "url": "https://gitlab.com/it-enterprise/npm-packages/forcebpm-ui-kit/-/issues"
   },
   "homepage": "https://gitlab.com/it-enterprise/npm-packages/forcebpm-ui-kit#readme"
-}
+}

package/plugin.js

@@ -11,32 +11,32 @@ export { defaultMessages }
 
 /**
  * ForceBPM UI Kit Plugin
- * 
+ *
  * @example
  * // Basic usage with global registration
  * import { createApp } from 'vue'
  * import { ForceBPMUiKit } from '@it-enterprise/forcebpm-ui-kit'
- * 
+ *
  * const app = createApp(App)
  * app.use(ForceBPMUiKit)
- * 
+ *
  * @example
  * // With i18n integration
  * import { createApp } from 'vue'
  * import { createI18n } from 'vue-i18n'
  * import { ForceBPMUiKit } from '@it-enterprise/forcebpm-ui-kit'
- * 
+ *
  * const i18n = createI18n({ locale: 'uk', messages: {} })
  * const app = createApp(App)
- * 
+ *
  * app.use(i18n)
  * app.use(ForceBPMUiKit, { i18n })
- * 
+ *
  * @example
  * // Without global registration (tree-shaking friendly)
  * import { createApp } from 'vue'
  * import { ForceBPMUiKit } from '@it-enterprise/forcebpm-ui-kit'
- * 
+ *
  * const app = createApp(App)
  * app.use(ForceBPMUiKit, { registerGlobal: false })
  */
@@ -53,14 +53,7 @@ export const ForceBPMUiKit = {
    * @param {Object} [options.events={}] - Events map for modal windows
    */
   install(app, options = {}) {
-    const {
-      registerGlobal = true,
-      i18n = null,
-      prefix = 'F',
-      messages = null,
-      emitter = null,
-      events = {}
-    } = options
+    const { registerGlobal = true, i18n = null, prefix = 'F', messages = null, emitter = null, events = {} } = options
 
     // Provide emitter and events to components
     if (emitter) {
@@ -70,9 +63,7 @@ export const ForceBPMUiKit = {
 
     // Merge translations into i18n if provided
     if (i18n) {
-      const messagesToMerge = messages 
-        ? mergeDeep(defaultMessages, messages) 
-        : defaultMessages
+      const messagesToMerge = messages ? mergeDeep(defaultMessages, messages) : defaultMessages
 
       Object.entries(messagesToMerge).forEach(([locale, localeMessages]) => {
         if (i18n.global) {
@@ -91,10 +82,8 @@ export const ForceBPMUiKit = {
         // Skip special exports
         if (name === 'default' || name === 'ForceBPMUiKit' || name === 'defaultMessages') return
         // Allow custom prefix (e.g., 'Fbpm' instead of 'F')
-        const componentName = prefix === 'F' 
-          ? name 
-          : name.replace(/^F/, prefix)
-        
+        const componentName = prefix === 'F' ? name : name.replace(/^F/, prefix)
+
         app.component(componentName, component)
       })
     }
@@ -112,7 +101,7 @@ export const ForceBPMUiKit = {
  */
 function mergeDeep(target, source) {
   const output = { ...target }
-  
+
   for (const key in source) {
     if (source[key] instanceof Object && key in target) {
       output[key] = mergeDeep(target[key], source[key])
@@ -120,7 +109,7 @@ function mergeDeep(target, source) {
       output[key] = source[key]
     }
   }
-  
+
   return output
 }
 

package/src/FAvatar.vue

@@ -1,6 +1,6 @@
 <script setup>
 // FAvatar
-import { computed, defineEmits } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps({
   activeUserId: {
@@ -9,7 +9,8 @@ const props = defineProps({
   },
   fullUser: {
     type: Object,
-    default: null
+    default: null,
+    validator: value => value && 'userId' in value && 'name' in value
   },
   group: {
     type: Object,
@@ -37,12 +38,12 @@ const props = defineProps({
 const emit = defineEmits(['clearUserPhoto'])
 
 const getInitialsByName = name => {
-    const splitter = name.split(' ')
-    const result = splitter.reduce((sum, current) => {
-      return sum + current.substr(0, 1)
-    }, '')
-    return result.slice(0, 2)
-  }
+  const splitter = name.split(' ')
+  const result = splitter.reduce((sum, current) => {
+    return sum + current.substr(0, 1)
+  }, '')
+  return result.slice(0, 2)
+}
 
 const userPhoto = computed(() => props.fullUser?.photo)
 
@@ -71,18 +72,10 @@ const errorHandler = () => {
 <template>
   <div class="f-avatar cursor-pointer" :style="sizeStyle">
     <!-- GROUP -->
-    <v-tooltip
-      v-if="group"
-      :text="group.name"
-      location="top right"
-      :disabled="disabled"
-    >
+    <v-tooltip v-if="group" :text="group.name" location="top right" :disabled="disabled">
       <template #activator="{ props: propsTooltip }">
         <div v-bind="propsTooltip" :style="sizeStyle" :class="avatarClass">
-          <i
-            class="f-icon group-star bg-secondary text-center"
-            :style="sizeStyle"
-          >
+          <i class="f-icon group-star bg-secondary text-center" :style="sizeStyle">
             <span class="text-subTitle" :style="fontStyle">
               {{ getInitialsByName(group.name) }}
             </span>
@@ -104,13 +97,7 @@ const errorHandler = () => {
     >
       <template #activator="{ props: propsMenu }">
         <!-- User -->
-        <div
-          v-if="fullUser"
-          v-bind="propsMenu"
-          class="f-avatar-user"
-          :class="avatarClass"
-          :style="sizeStyle"
-        >
+        <div v-if="fullUser" v-bind="propsMenu" class="f-avatar-user" :class="avatarClass" :style="sizeStyle">
           <!-- Image -->
           <v-img
             v-if="userPhoto"
@@ -124,17 +111,8 @@ const errorHandler = () => {
             @error="errorHandler"
           >
             <template #placeholder>
-              <v-skeleton-loader
-                v-if="!fullUser?.name"
-                :height="size"
-                :width="size"
-                type="avatar"
-              />
-              <span
-                v-else
-                class="f-avatar-initials text-subTitle d-flex align-center justify-center"
-                :style="[sizeStyle, fontStyle]"
-              >
+              <v-skeleton-loader v-if="!fullUser?.name" :height="size" :width="size" type="avatar" />
+              <span v-else class="f-avatar-initials text-subTitle d-flex align-center justify-center" :style="[sizeStyle, fontStyle]">
                 {{ getInitialsByName(fullUser.name) }}
               </span>
             </template>
@@ -142,12 +120,7 @@ const errorHandler = () => {
 
           <!-- No avatar -->
           <template v-else>
-            <v-skeleton-loader
-              v-if="!fullUser?.name"
-              :height="size"
-              :width="size"
-              type="avatar"
-            />
+            <v-skeleton-loader v-if="!fullUser?.name" :height="size" :width="size" type="avatar" />
             <span
               v-else
               :style="[sizeStyle, fontStyle]"
@@ -161,18 +134,8 @@ const errorHandler = () => {
       </template>
 
       <!-- User info -->
-      <div
-        v-if="fullUser"
-        class="d-flex flex-column align-center f-avatar-user-info"
-      >
-        <v-img
-          cover
-          height="120px"
-          width="120px"
-          :src="userPhoto"
-          :class="{ 'f-avatar-me': activeUserId === fullUser.userId }"
-          class="f-avatar-img"
-        >
+      <div v-if="fullUser" class="d-flex flex-column align-center f-avatar-user-info">
+        <v-img cover height="120px" width="120px" :src="userPhoto" :class="{ 'f-avatar-me': activeUserId === fullUser.userId }" class="f-avatar-img">
           <template #placeholder>
             <FIcon icon="user-line" color="disabled-light" size="55" />
           </template>
@@ -180,42 +143,36 @@ const errorHandler = () => {
 
         <div class="selectable-text mt-5">
           <!-- Name -->
-          <div
-            class="text-title text-center font-weight-semibold f-avatar-user-info-name"
-            style="word-break: break-all"
-          >
-            {{ fullUser.name || "No Name" }}
+          <div class="text-title text-center font-weight-semibold f-avatar-user-info-name" style="word-break: break-all">
+            {{ fullUser.name || 'No Name' }}
           </div>
 
           <v-table class="f-avatar-user-info-table mt-5">
             <tbody>
               <!-- Phone -->
               <tr>
-                <td class="text-text fs-09">{{ $t("user.telephone") }}</td>
-                <td class="text-subTitle">{{ fullUser.phone || "-" }}</td>
+                <td class="text-text fs-09">{{ $t('user.telephone') }}</td>
+                <td class="text-subTitle">{{ fullUser.phone || '-' }}</td>
               </tr>
               <!-- E-mail -->
               <tr>
                 <td class="text-text fs-09">E-mail</td>
-                <td
-                  class="text-subTitle text-lowercase"
-                  style="word-break: break-all"
-                >
-                  {{ fullUser.email || "-" }}
+                <td class="text-subTitle text-lowercase" style="word-break: break-all">
+                  {{ fullUser.email || '-' }}
                 </td>
               </tr>
               <!-- Position -->
               <tr>
-                <td class="text-text fs-09">{{ $t("user.position") }}</td>
+                <td class="text-text fs-09">{{ $t('user.position') }}</td>
                 <td class="text-subTitle">
-                  {{ fullUser.positionTitle || fullUser.positionCode || "-" }}
+                  {{ fullUser.positionTitle || fullUser.positionCode || '-' }}
                 </td>
               </tr>
               <!-- Department -->
               <tr>
-                <td class="text-text fs-09">{{ $t("user.department") }}</td>
+                <td class="text-text fs-09">{{ $t('user.department') }}</td>
                 <td class="text-subTitle">
-                  {{ fullUser.department || "-" }}
+                  {{ fullUser.department || '-' }}
                 </td>
               </tr>
             </tbody>

package/src/FConfirmModal.vue

@@ -50,14 +50,7 @@ onBeforeUnmount(() => {
 })
 </script>
 <template>
-  <v-dialog
-    v-model="show"
-    content-class="f-confirm-modal"
-    max-width="500"
-    persistent
-    @keydown.esc="declineHandler"
-    @keydown.enter="approveHandler"
-  >
+  <v-dialog v-model="show" content-class="f-confirm-modal" max-width="500" persistent @keydown.esc="declineHandler" @keydown.enter="approveHandler">
     <!-- Header -->
     <div class="f-confirm-modal-header">{{ title }}</div>
 
@@ -66,20 +59,11 @@ onBeforeUnmount(() => {
       <div class="f-confirm-modal-content mt-5 mx-5 mb-10">{{ subTitle }}</div>
 
       <!-- Actions -->
-      <v-btn
-        class="f-confirm-modal-btn"
-        variant="outlined"
-        :disabled="loading"
-        @click="declineHandler"
-      >
-        {{ $t("buttons.no") }}
+      <v-btn class="f-confirm-modal-btn" variant="outlined" :disabled="loading" @click="declineHandler">
+        {{ $t('buttons.no') }}
       </v-btn>
-      <v-btn
-        class="f-confirm-modal-btn mt-2 mb-10"
-        :loading="loading"
-        @click="approveHandler"
-      >
-        {{ $t("buttons.yes") }}
+      <v-btn class="f-confirm-modal-btn mt-2 mb-10" :loading="loading" @click="approveHandler">
+        {{ $t('buttons.yes') }}
       </v-btn>
     </div>
   </v-dialog>

package/src/FContextMenu.vue

@@ -46,18 +46,9 @@ const isEmpty = computed(() => !props.list.length || props.list.every(el => el.h
 </script>
 
 <template>
-  <v-menu
-    v-if="!isEmpty"
-    v-model="menu"
-    v-bind="menuProps"
-    content-class="f-context-menu-content"
-  >
+  <v-menu v-if="!isEmpty" v-model="menu" v-bind="menuProps" content-class="f-context-menu-content">
     <template #activator="{ props: propsMenu }">
-      <v-tooltip
-        :disabled="menu || disabled"
-        :text="$t('tooltip.actions')"
-        v-bind="tooltipProps"
-      >
+      <v-tooltip :disabled="menu || disabled" :text="$t('tooltip.actions')" v-bind="tooltipProps">
         <template #activator="{ props: propsTooltip }">
           <v-btn
             size="25"
@@ -67,11 +58,7 @@ const isEmpty = computed(() => !props.list.length || props.list.every(el => el.h
             :disabled="disabled"
             v-bind="mergeProps(propsMenu, propsTooltip)"
           >
-            <FIcon
-              icon="dots"
-              size="18"
-              :color="disabled ? 'disabled' : 'secondary'"
-            />
+            <FIcon icon="dots" size="18" :color="disabled ? 'disabled' : 'secondary'" />
           </v-btn>
         </template>
       </v-tooltip>
@@ -81,31 +68,18 @@ const isEmpty = computed(() => !props.list.length || props.list.every(el => el.h
       <template v-for="(item, idx) in list">
         <template v-if="!item.hide">
           <!-- Divider top -->
-          <v-divider
-            v-if="item.dividerTop"
-            :key="`divider-top-${idx}`"
-            class="bg-disabled my-3"
-          />
+          <v-divider v-if="item.dividerTop" :key="`divider-top-${idx}`" class="bg-disabled my-3" />
 
           <!-- 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="18" />
               <span :class="item.icon ? 'ml-1' : 'ml-5'">{{ item.name }}</span>
             </v-list-item-title>
           </v-list-item>
 
           <!-- Divider bottom -->
-          <v-divider
-            v-if="item.dividerBottom"
-            :key="`divider-bottom-${idx}`"
-            class="bg-disabled my-3"
-          />
+          <v-divider v-if="item.dividerBottom" :key="`divider-bottom-${idx}`" class="bg-disabled my-3" />
         </template>
       </template>
     </v-list>
@@ -113,35 +87,37 @@ const isEmpty = computed(() => !props.list.length || props.list.every(el => el.h
 </template>
 
 <style lang="scss" scoped>
-.f-context-menu-content {
-  .v-list {
-    padding: 12px 6px;
-    overflow-x: hidden;
-    .v-list-item {
-      padding: 4px 6px;
-      min-height: auto;
-      :deep(.v-list-item__overlay) {
-        border-radius: 5.8px;
-        background: rgb(var(--v-theme-primary));
-      }
-      &:hover {
+.f-menu {
+  .f-context-menu-content {
+    .v-list {
+      padding: 12px 6px;
+      overflow-x: hidden;
+      .v-list-item {
+        padding: 4px 6px;
+        min-height: auto;
         :deep(.v-list-item__overlay) {
-          opacity: 0.15;
+          border-radius: 5.8px;
+          background: rgb(var(--v-theme-primary));
         }
-      }
-      .v-list-item__content {
-        .v-list-item-title {
-          display: flex;
-          align-items: center;
-          font-weight: 600;
-          font-size: 1em;
+        &:hover {
+          :deep(.v-list-item__overlay) {
+            opacity: 0.15;
+          }
+        }
+        .v-list-item__content {
+          .v-list-item-title {
+            display: flex;
+            align-items: center;
+            font-weight: 600;
+            font-size: 1em;
+          }
         }
       }
-    }
-    .v-divider {
-      position: relative;
-      min-width: calc(100% + 12px);
-      left: -6px;
+      .v-divider {
+        position: relative;
+        min-width: calc(100% + 12px);
+        left: -6px;
+      }
     }
   }
 }