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

package/index.js

@@ -1,3 +1,5 @@
 export { default as FHtmlContent } from './src/FHtmlContent.vue'
 export { default as FAvatar } from './src/FAvatar.vue'
 export { default as FConfirmModal } from './src/FConfirmModal.vue'
+export { default as FPreLoader } from './src/FPreLoader.vue'
+export { default as FNoData } from './src/FNoData.vue'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.3",
+  "version": "1.0.2-beta.5",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",
@@ -22,6 +22,14 @@
     "./FConfirmModal": {
       "import": "./src/FConfirmModal.vue",
       "require": "./src/FConfirmModal.vue"
+    },
+    "./FPreLoader": {
+      "import": "./src/FPreLoader.vue",
+      "require": "./src/FPreLoader.vue"
+    },
+    "./FNoData": {
+      "import": "./src/FNoData.vue",
+      "require": "./src/FNoData.vue"
     }
   },
   "files": [

package/src/FConfirmModal.vue

@@ -1,8 +1,6 @@
 <script setup>
 // FConfirmModal
 import { onBeforeMount, onBeforeUnmount, ref, defineEmits } from 'vue'
-import events from '@/plugins/eventBus/events'
-import emitter from '@/plugins/eventBus'
 
 const show = ref(false)
 const loading = ref(false)
@@ -38,11 +36,12 @@ const declineHandler = () => {
 }
 
 onBeforeMount(() => {
-  emitter.on(events.confirmModal, showModal)
+  emit('confirmModalMount', showModal)
 })
 
 onBeforeUnmount(() => {
-  emitter.off(events.confirmModal, showModal)
+  emit('confirmModalUnmount', showModal)
+  // emitter.off(events.confirmModal, showModal)
 })
 </script>
 <template>

package/src/FNoData.vue

@@ -0,0 +1,60 @@
+<script setup>
+// FNoData
+defineProps({
+  text: {
+    type: String,
+    default: null
+  },
+  height: {
+    type: String,
+    default: '100%',
+    validator: value => {
+      return /^(calc\([^()]+\)|\d+(\.\d+)?(px|em|rem|vh|vw|%)|auto)$/.test(value)
+    }
+  },
+  width: {
+    type: String,
+    default: 'auto',
+    validator: value => {
+      return /^(calc\([^()]+\)|\d+(\.\d+)?(px|em|rem|vh|vw|%)|auto)$/.test(value)
+    }
+  },
+  gradient: {
+    type: String,
+    default: ''
+  }
+})
+
+</script>
+
+<template>
+  <div class="f-no-data" :style="`height: ${height}; width: ${width}`">
+    <div class="f-no-data-overlay" :style="`background: ${gradient}`">
+      <span class="f-no-data-text">{{ text || $t('noData.title') }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.f-no-data {
+  min-height: 150px;
+  position: relative;
+  .f-no-data-overlay {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+    color: rgb(var(--v-theme-primary));
+    top: calc(50% - 100% / 2);
+    left: calc(50% - 100% / 2);
+    font-size: 1em;
+    .f-no-data-text {
+      width: 250px;
+    }
+  }
+}
+</style>

package/src/FPreLoader.vue

@@ -0,0 +1,108 @@
+<script setup>
+// FPreLoader
+const props = defineProps({
+  preLoaders: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+
+<template>
+  <v-overlay :model-value="!!props.preLoaders.length" z-index="208" opacity="0.5">
+    <div v-if="props.preLoaders.includes('tokenUpdate')" class="text-title">
+      {{ $t('updating') }}
+    </div>
+    <div class="lds-ellipsis">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </v-overlay>
+</template>
+
+<style lang="scss" scoped>
+.v-overlay {
+  :deep(.v-overlay__scrim) {
+    background: rgb(var(--v-theme-background)) !important;
+  }
+}
+
+.v-overlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  :deep(.v-overlay__content) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: rgb(var(--v-theme-primary));
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+</style>