@it-enterprise/forcebpm-ui-kit 1.0.0 → 1.0.2

package/index.js

@@ -1 +1,2 @@
 export { default as FHtmlContent } from './src/FHtmlContent.vue'
+export { default as FAvatar } from './src/FAvatar.vue'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",
@@ -14,6 +14,10 @@
     "./FHtmlContent": {
       "import": "./src/FHtmlContent.vue",
       "require": "./src/FHtmlContent.vue"
+    },
+    "./FAvatar": {
+      "import": "./src/FAvatar.vue",
+      "require": "./src/FAvatar.vue"
     }
   },
   "files": [
@@ -39,8 +43,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
-    "vite": "^5.0.0",
-    "@vue/compiler-sfc": "^3.0.0"
+    "@vue/compiler-sfc": "^3.0.0",
+    "sass-embedded": "^1.97.2",
+    "vite": "^5.0.0"
   },
   "scripts": {
     "build": "vite build",

package/src/FAvatar.vue

@@ -0,0 +1,257 @@
+<script setup>
+// FAvatar
+import { computed, defineEmits } from 'vue'
+
+const props = defineProps({
+  activeUserId: {
+    type: String,
+    default: null
+  },
+  fullUser: {
+    type: Object,
+    default: null
+  },
+  group: {
+    type: Object,
+    default: null,
+    validator: value => value && 'identityId' in value && 'name' in value
+  },
+  menuProps: {
+    type: Object,
+    default: () => ({})
+  },
+  size: {
+    type: [String, Number],
+    default: 20
+  },
+  avatarClass: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+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 userPhoto = computed(() => props.fullUser?.photo)
+
+const sizeStyle = computed(() => {
+  return {
+    height: `${props.size}px`,
+    width: `${props.size}px`,
+    minHeight: `${props.size}px`,
+    minWidth: `${props.size}px`
+  }
+})
+
+const fontStyle = computed(() => {
+  const size = Number(props.size)
+  return {
+    'font-size': `${size - size / 2}px`,
+    'line-height': `${size}px`
+  }
+})
+
+const errorHandler = () => {
+  emit('clearUserPhoto', props.fullUser.userId)
+}
+</script>
+
+<template>
+  <div class="f-avatar cursor-pointer" :style="sizeStyle">
+    <!-- GROUP -->
+    <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">
+            <span class="text-subTitle" :style="fontStyle">
+              {{ getInitialsByName(group.name) }}
+            </span>
+          </i>
+        </div>
+      </template>
+    </v-tooltip>
+
+    <!-- USER -->
+    <v-menu
+      v-else
+      v-bind="menuProps"
+      open-on-hover
+      close-delay="100"
+      open-delay="500"
+      location="bottom right"
+      :disabled="disabled || !fullUser?.name"
+      :close-on-content-click="false"
+    >
+      <template #activator="{ props: propsMenu }">
+        <!-- User -->
+        <div v-if="fullUser" v-bind="propsMenu" class="f-avatar-user" :class="avatarClass" :style="sizeStyle">
+          <!-- Image -->
+          <v-img
+            v-if="userPhoto"
+            :src="userPhoto"
+            :width="size"
+            :height="size"
+            :min-width="size"
+            :min-height="size"
+            :class="{ 'f-avatar-me': activeUserId === fullUser.userId }"
+            class="f-avatar-img"
+            @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]">
+                {{ getInitialsByName(fullUser.name) }}
+              </span>
+            </template>
+          </v-img>
+
+          <!-- No avatar -->
+          <template v-else>
+            <v-skeleton-loader v-if="!fullUser?.name" :height="size" :width="size" type="avatar" />
+            <span
+              v-else
+              :style="[sizeStyle, fontStyle]"
+              :class="{ 'f-avatar-me': activeUserId === fullUser.userId }"
+              class="f-avatar-initials text-subTitle d-flex align-center justify-center"
+            >
+              {{ getInitialsByName(fullUser.name) }}
+            </span>
+          </template>
+        </div>
+      </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">
+          <template #placeholder>
+            <FIcon icon="user-line" color="disabled-light" size="55" />
+          </template>
+        </v-img>
+
+        <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>
+
+          <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>
+              </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>
+              </tr>
+              <!-- Position -->
+              <tr>
+                <td class="text-text fs-09">{{ $t('user.position') }}</td>
+                <td class="text-subTitle">
+                  {{ fullUser.positionTitle || fullUser.positionCode || '-' }}
+                </td>
+              </tr>
+              <!-- Department -->
+              <tr>
+                <td class="text-text fs-09">{{ $t('user.department') }}</td>
+                <td class="text-subTitle">
+                  {{ fullUser.department || '-' }}
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </div>
+      </div>
+    </v-menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.f-avatar {
+  .f-avatar-user {
+    .f-avatar-initials {
+      position: relative;
+      border-radius: 50%;
+      border: 1px solid rgb(var(--v-theme-disabled));
+      background: rgb(var(--v-theme-fields));
+    }
+
+    .v-skeleton-loader {
+      background: transparent;
+      :deep(.v-skeleton-loader__avatar) {
+        margin: 0;
+        height: inherit;
+        width: inherit;
+        max-width: inherit;
+        min-width: inherit;
+        max-height: inherit;
+        min-height: inherit;
+      }
+    }
+  }
+}
+
+:deep(.f-avatar-user-info) {
+  min-width: 250px;
+  max-width: 400px;
+  padding: 20px;
+
+  .f-avatar-user-info-table {
+    background: transparent;
+    .v-table__wrapper {
+      overflow-x: hidden;
+
+      table tbody tr {
+        &:hover {
+          background: transparent;
+        }
+
+        td {
+          padding: 4px 0;
+          border-bottom: none;
+          height: auto;
+          line-height: 1;
+
+          &:first-child {
+            vertical-align: top;
+            padding-right: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep(.f-avatar-img.v-img) {
+  border-radius: 50%;
+  border: 1px solid rgb(var(--v-theme-disabled));
+  background: rgb(var(--v-theme-line));
+  .v-img__img {
+    background: #fff;
+  }
+  .v-img__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.f-avatar-me {
+  border: 1px solid rgb(var(--v-theme-primary)) !important;
+}
+</style>