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

package/src/{FConfirmModal.vue → FConfirmDialog.vue}

@@ -1,24 +1,30 @@
 <script setup>
-// FConfirmModal
-import { onBeforeMount, onBeforeUnmount, ref, defineEmits } from 'vue'
-import events from '@/plugins/eventBus/events'
-import emitter from '@/plugins/eventBus'
+// FConfirmDialog
+import { onBeforeMount, onBeforeUnmount, ref, inject } from 'vue'
 
-const show = ref(false)
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'confirm-dialog'
+  }
+})
+
+const state = ref(false)
 const loading = ref(false)
 const title = ref('')
 const subTitle = ref('')
 const approve = ref(null)
-const decline = ref(null)
+const reject = ref(null)
 
-const emit = defineEmits(['confirmModalMount', 'confirmModalUnmount'])
+// Inject emitter and events from plugin
+const emitter = inject('fbpm-emitter', null)
 
-const showModal = props => {
+const open = props => {
   title.value = props.title
   subTitle.value = props.subTitle
   approve.value = props.approve
-  decline.value = props.decline
-  show.value = true
+  reject.value = props.reject
+  state.value = true
 }
 
 const approveHandler = async () => {
@@ -27,38 +33,42 @@ const approveHandler = async () => {
     await approve.value()
   }
   loading.value = false
-  show.value = false
+  state.value = false
 }
 
-const declineHandler = () => {
-  if (typeof decline.value === 'function') {
-    decline.value()
+const rejectHandler = () => {
+  if (typeof reject.value === 'function') {
+    reject.value()
   }
-  show.value = false
+  state.value = false
 }
 
 onBeforeMount(() => {
-  emitter.on(events.confirmModal, showModal)
+  if (emitter && props.name) {
+    emitter.on(props.name, open)
+  }
 })
 
 onBeforeUnmount(() => {
-  emitter.off(events.confirmModal, showModal)
+  if (emitter && props.name) {
+    emitter.off(props.name, open)
+  }
 })
 </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="state" content-class="f-confirm-dialog" max-width="500" persistent @keydown.esc="rejectHandler" @keydown.enter="approveHandler">
     <!-- Header -->
-    <div class="f-confirm-modal-header">{{ title }}</div>
+    <div class="f-confirm-dialog-header">{{ title }}</div>
 
     <!-- Body -->
     <div class="d-flex flex-column">
-      <div class="f-confirm-modal-content mt-5 mx-5 mb-10">{{ subTitle }}</div>
+      <div class="f-confirm-dialog-content mt-5 mx-5 mb-10">{{ subTitle }}</div>
 
       <!-- Actions -->
-      <v-btn class="f-confirm-modal-btn" variant="outlined" :disabled="loading" @click="declineHandler">
+      <v-btn class="f-confirm-dialog-btn" variant="outlined" :disabled="loading" @click="rejectHandler">
         {{ $t('buttons.no') }}
       </v-btn>
-      <v-btn class="f-confirm-modal-btn mt-2 mb-10" :loading="loading" @click="approveHandler">
+      <v-btn class="f-confirm-dialog-btn mt-2 mb-10" :loading="loading" @click="approveHandler">
         {{ $t('buttons.yes') }}
       </v-btn>
     </div>
@@ -66,14 +76,14 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
-:deep(.f-confirm-modal) {
+:deep(.f-confirm-dialog) {
   background: rgb(var(--v-theme-background));
   box-shadow: 0px 4px 20px 0px rgb(var(--v-theme-title));
   border-radius: 5.8px;
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  .f-confirm-modal-header {
+  .f-confirm-dialog-header {
     display: flex;
     justify-content: space-between;
     background: rgb(var(--v-theme-background-dark));
@@ -85,20 +95,20 @@ onBeforeUnmount(() => {
     color: rgb(var(--v-theme-fields-light));
     padding: 12px 0px 10px 20px;
   }
-  .f-confirm-modal-content {
+  .f-confirm-dialog-content {
     font-size: 1em;
     line-height: 1.5em;
     color: rgb(var(--v-theme-title));
   }
-  .f-confirm-modal-btn {
+  .f-confirm-dialog-btn {
     margin: 0 34px;
   }
 }
 
 .v-theme--dark {
-  :deep(.f-confirm-modal) {
+  :deep(.f-confirm-dialog) {
     box-shadow: var(--f-box-shadow);
-    .f-confirm-modal-header {
+    .f-confirm-dialog-header {
       border-bottom: 1px solid rgb(var(--v-theme-line));
     }
   }

package/src/FContextMenu.vue

@@ -0,0 +1,87 @@
+<script setup>
+// FContextMenu
+import { computed, mergeProps } from 'vue'
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true
+    // Example of list item:
+    //   {
+    //     name: 'Button Name',
+    //     action: () => {},
+    //     color: 'text',
+    //     icon: 'fire',
+    //     dividerTop: false, // optional setting to add top visual separation of list blocks
+    //     dividerBottom: false // optional setting to add bottom visual separation of list blocks
+    //   }
+  },
+  menuProps: {
+    type: Object,
+    default: () => ({
+      location: 'start'
+    })
+  },
+  tooltipProps: {
+    type: Object,
+    default: () => ({
+      location: 'bottom'
+    })
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  btnClass: {
+    type: String,
+    default: ''
+  }
+})
+
+const menu = defineModel({
+  type: Boolean,
+  default: false
+})
+
+const isEmpty = computed(() => !props.list.length || props.list.every(el => el.hide))
+</script>
+
+<template>
+  <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">
+        <template #activator="{ props: propsTooltip }">
+          <v-btn
+            size="25"
+            variant="text"
+            class="f-context-menu-activator"
+            :class="btnClass"
+            :disabled="disabled"
+            v-bind="mergeProps(propsMenu, propsTooltip)"
+          >
+            <FIcon icon="dots" size="18" :color="disabled ? 'disabled' : 'secondary'" />
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </template>
+
+    <v-list class="f-context-menu-list">
+      <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" />
+
+          <!-- 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" />
+              <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" />
+        </template>
+      </template>
+    </v-list>
+  </v-menu>
+</template>

package/src/FDialog.vue

@@ -0,0 +1,264 @@
+<script setup>
+// FDialog
+import { onBeforeMount, onBeforeUnmount, watch, inject } from 'vue'
+
+const props = defineProps({
+  disableCloseBtn: {
+    type: Boolean,
+    default: false
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    default: 'Modal title'
+  },
+  backAction: {
+    type: Function,
+    default: null
+  },
+  noSpace: {
+    type: Boolean,
+    default: false
+  },
+  isSearch: {
+    type: Boolean,
+    default: false
+  },
+  headerActions: {
+    type: Array,
+    default: null,
+    validator: value => {
+      return value.every(
+        action =>
+          'label' in action &&
+          'icon' in action &&
+          'action' in action &&
+          typeof action.label === 'string' &&
+          typeof action.icon === 'string' &&
+          typeof action.action === 'function'
+      )
+    }
+  },
+  actions: {
+    type: Array,
+    default: null,
+    validator: value => {
+      return value.every(
+        action =>
+          'name' in action &&
+          'action' in action &&
+          typeof action.name === 'string' &&
+          typeof action.action === 'function' &&
+          (action.outlined === undefined || typeof action.outlined === 'boolean')
+      )
+    }
+  }
+})
+
+const emit = defineEmits(['open', 'close'])
+
+const emitter = inject('fbpm-emitter', null)
+const events = inject('fbpm-events', {})
+
+const modelValue = defineModel({
+  type: Boolean,
+  default: false
+})
+
+const search = defineModel('search', {
+  type: String,
+  default: null
+})
+
+onBeforeMount(() => {
+  emitter.on(events.modal[props.name], open)
+})
+
+onBeforeUnmount(() => {
+  emitter.off(events.modal[props.name], open)
+})
+
+const open = props => {
+  modelValue.value = true
+  emit('open', props)
+}
+
+watch(modelValue, val => {
+  if (!val) {
+    search.value = null
+    emit('close')
+  } else {
+    emit('open')
+  }
+})
+</script>
+<template>
+  <v-dialog v-model="modelValue" min-width="350" content-class="f-dialog">
+    <!-- Header -->
+    <div class="f-dialog-header">
+      <!-- Title -->
+      <div class="f-dialog-header-title">{{ title }}</div>
+
+      <div class="d-flex align-center f-dialog-header-actions-wrapper">
+        <!-- Search -->
+        <FSearchPanel
+          v-if="isSearch"
+          v-model="search"
+          ctrl-f
+          outlined
+          color="fields-light"
+          class="f-dialog-header-action"
+          :tooltip-props="{ location: 'top', offset: 16 }"
+        />
+
+        <!-- Header actions -->
+        <div v-for="(btn, index) in headerActions" :key="index" class="d-flex f-dialog-header-actions">
+          <v-tooltip offset="10" :text="btn.label">
+            <template #activator="{ props: tooltipProps }">
+              <v-btn
+                v-bind="tooltipProps"
+                size="32"
+                variant="text"
+                class="f-dialog-header-action"
+                :disabled="Boolean(btn.disabled)"
+                @click="btn.action"
+              >
+                <FIcon :icon="btn.icon" size="18" color="fields-light" />
+              </v-btn>
+            </template>
+          </v-tooltip>
+        </div>
+
+        <!-- Close btn -->
+        <v-tooltip v-if="!disableCloseBtn" offset="10" :text="$t('buttons.close')">
+          <template #activator="{ props: tooltipProps }">
+            <v-btn
+              v-bind="tooltipProps"
+              variant="text"
+              size="32"
+              class="f-dialog-header-action f-dialog-header-action-close"
+              @click="modelValue = false"
+            >
+              <FIcon icon="times" size="18" color="fields-light" />
+            </v-btn>
+          </template>
+        </v-tooltip>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="f-dialog-body">
+      <!-- Back btn -->
+      <v-btn
+        v-if="typeof backAction === 'function'"
+        height="20"
+        variant="text"
+        color="secondary"
+        class="f-dialog-back-btn pa-0 font-weight-semibold align-self-start"
+        :class="noSpace ? 'ml-n1' : 'mt-5 ml-4'"
+        @click="
+          () => {
+            modelValue = false
+            backAction()
+          }
+        "
+      >
+        <FIcon icon="chevron-left" size="16" color="secondary" />
+        {{ $t('buttons.toBack') }}
+      </v-btn>
+
+      <!-- Default slot | browser scroll -->
+      <div class="f-dialog-content f-scrollbar-y" :class="{ 'mt-5 pl-5 mr-2 pr-3': !noSpace }">
+        <slot></slot>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <div v-if="actions || $slots.actions" class="f-dialog-actions d-flex justify-center flex-wrap my-10 mx-5">
+      <slot name="actions">
+        <v-btn
+          v-for="btn in actions"
+          :key="btn.name"
+          min-width="320"
+          class="f-dialog-action"
+          :variant="btn.outlined ? 'outlined' : 'elevated'"
+          @click="btn.action"
+        >
+          {{ btn.name }}
+        </v-btn>
+      </slot>
+    </div>
+  </v-dialog>
+</template>
+
+<style lang="scss" scoped>
+:deep(.f-dialog) {
+  background: rgb(var(--v-theme-background));
+  box-shadow: 0px 4px 20px 0px rgb(var(--v-theme-title));
+  border-radius: 5.8px;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh; // Limit for the entire dialog
+  .f-dialog-header {
+    flex-shrink: 0; // Header does not shrink
+    display: flex;
+    justify-content: space-between;
+    background: rgb(var(--v-theme-title-dark));
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    .f-dialog-header-title {
+      font-weight: 600;
+      color: rgb(var(--v-theme-fields-light));
+      padding: 12px 0px 10px 20px;
+    }
+
+    .f-dialog-header-actions-wrapper {
+      display: flex;
+      align-items: center;
+      margin: 0 10px 0 20px;
+
+      .f-dialog-header-actions {
+        display: flex;
+        align-items: center;
+
+        .f-dialog-header-action {
+          margin-left: 8px;
+        }
+      }
+      .f-dialog-header-action {
+        .v-btn__overlay {
+          background-color: currentColor;
+        }
+      }
+    }
+  }
+  .f-dialog-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0; // Important for flexbox to work with overflow
+    .f-dialog-content {
+      flex: 1;
+      overflow: auto;
+    }
+  }
+
+  .f-dialog-actions {
+    flex-shrink: 0; // Action section does not shrink
+    gap: 8px 24px;
+  }
+}
+
+.v-theme--dark {
+  :deep(.f-dialog) {
+    box-shadow: var(--f-box-shadow);
+    .f-dialog-header {
+      border-bottom: 1px solid rgb(var(--v-theme-line));
+    }
+  }
+}
+</style>

package/src/FLangSwitcher.vue

@@ -0,0 +1,47 @@
+<script setup>
+// FLangSwitcher
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+defineProps({
+  background: {
+    type: String,
+    default: 'transparent'
+  },
+  color: {
+    type: String,
+    default: 'text'
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const { locale } = useI18n()
+
+const locales = [
+  { code: 'uk', name: 'Українська', flag: 'UA' },
+  { code: 'ru', name: 'Русский', flag: 'RU' },
+  { code: 'en', name: 'English', flag: 'EN' }
+]
+
+const lang = computed(() => {
+  return locales.find(i => i.code === locale.value) || locales[0]
+})
+</script>
+
+<template>
+  <v-menu offset="0, -6" location="bottom right" content-class="f-lang-switcher-content">
+    <template #activator="{ props }">
+      <v-btn v-bind="props" variant="text" height="32px" width="54px" class="pa-0 f-lang-switcher-btn" :class="`bg-${background}`" :color="color">
+        {{ lang.flag }}
+        <FIcon icon="chevron-down" :color="color" size="0.9em" />
+      </v-btn>
+    </template>
+
+    <v-list>
+      <v-list-item v-for="item in locales" :key="item.code" @click="emit('change', item.code)">
+        <v-list-item-title :class="item.code === lang.code ? 'text-primary' : `text-${color}`"> {{ item.flag }} ({{ item.name }}) </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>

package/src/FNoData.vue

@@ -0,0 +1,80 @@
+<script setup>
+// FNoData
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+import { createRadialGradient } from './utils/color'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: null
+  },
+  isSearch: {
+    type: Boolean,
+    default: false
+  },
+  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)
+    }
+  }
+})
+
+const { current } = useTheme()
+const gradient = computed(() => {
+  const primary = current.value.colors.primary
+  const spread = current.value.colors.disabled
+  return createRadialGradient(primary, spread)
+})
+
+const dataText = computed(() => {
+  if (props.text) {
+    return props.text
+  }
+  return props.isSearch ? t('noData.matches') : t('noData.title')
+})
+</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">{{ dataText }}</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>