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

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')
+  }
+})
+</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-size: 1.15em;
+      line-height: 1.25em;
+      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/FNoData.vue

@@ -24,7 +24,6 @@ defineProps({
     default: ''
   }
 })
-
 </script>
 
 <template>

package/src/FNotify.vue

@@ -1,7 +1,6 @@
 <script setup>
 // FNotify
-import { computed, ref, onBeforeUnmount, onMounted, watch, defineAsyncComponent, defineEmits } from 'vue'
-const FHtmlContent = defineAsyncComponent(() => import('./FHtmlContent'))
+import { ref, onBeforeUnmount, onMounted, watch } from 'vue'
 
 const props = defineProps({
   notify: {
@@ -115,9 +114,9 @@ onBeforeUnmount(() => {
 })
 
 watch(
-  props.notify,
+  () => props.notify,
   (newval, oldVal) => {
-    if (newval.length > oldVal.length) {
+    if (newval.length > oldVal?.length) {
       // New notifications added
       const newNotifications = newval.filter(n => !timers.value[n.id])
       newNotifications.forEach(v => removeNotifyAfterTimeOut(v))
@@ -132,49 +131,28 @@ watch(
       v-for="nf in props.notify"
       :key="nf.id"
       :data-notify-id="nf.id"
-      :style="`border-color: rgb(var(--v-theme-${
-        !nf.color ? 'secondary' : nf.color
-      }))`"
+      :style="`border-color: rgb(var(--v-theme-${!nf.color ? 'secondary' : nf.color}))`"
       class="snack"
       @mouseover="hoveredNotifyId = nf.id"
       @mouseleave="
         () => {
-          hoveredNotifyId = null;
-          continueTimer(nf.id);
+          hoveredNotifyId = null
+          continueTimer(nf.id)
         }
       "
       @mouseenter="stopTimer(nf.id)"
     >
       <!-- Icon -->
       <div class="icon" :class="`bg-${nf.color || 'secondary'}`">
-        <span
-          v-if="nf.color === 'secondary' || nf.color === undefined"
-          class="simple-icon"
-          >i</span
-        >
-        <FIcon
-          v-if="nf.color === 'success' || nf.color === 'primary'"
-          icon="check"
-          size="16"
-          color="white"
-        />
+        <span v-if="nf.color === 'secondary' || nf.color === undefined" class="simple-icon">i</span>
+        <FIcon v-if="nf.color === 'success' || nf.color === 'primary'" icon="check" size="16" color="white" />
         <span v-if="nf.color === 'info'" class="info-icon">!</span>
-        <FIcon
-          v-if="nf.color === 'error' || nf.color === 'danger'"
-          icon="times"
-          size="16"
-          color="white"
-        />
+        <FIcon v-if="nf.color === 'error' || nf.color === 'danger'" icon="times" size="16" color="white" />
       </div>
 
       <!-- Text -->
       <div
-        v-if="
-          nf.taskId ||
-          (nf.businessObjectKey &&
-            nf.businessObjectKeyType &&
-            nf.businessObjectDefinitionCode)
-        "
+        v-if="nf.taskId || (nf.businessObjectKey && nf.businessObjectKeyType && nf.businessObjectDefinitionCode)"
         class="text-subTitle"
         style="overflow-wrap: anywhere"
       >
@@ -182,51 +160,29 @@ watch(
           <span class="snack-text selectable-text">
             {{ nf.text }}
           </span>
-          <span
-            v-if="nf.commentId && nf.taskId"
-            class="link-open-text cursor-pointer"
-            @click.stop="goToL(nf)"
-          >
-            {{ $t("notification.openDescussion") }}
+          <span v-if="nf.commentId && nf.taskId" class="link-open-text cursor-pointer" @click.stop="goToL(nf)">
+            {{ $t('notification.openDescussion') }}
           </span>
-          <span
-            v-else-if="nf.taskId"
-            class="link-open-text cursor-pointer"
-            @click.stop="goToL(nf)"
-          >
-            {{ $t("notification.openTask") }}
+          <span v-else-if="nf.taskId" class="link-open-text cursor-pointer" @click.stop="goToL(nf)">
+            {{ $t('notification.openTask') }}
           </span>
           <span
-            v-else-if="
-              nf.businessObjectKey &&
-              nf.businessObjectKeyType &&
-              nf.businessObjectDefinitionCode
-            "
+            v-else-if="nf.businessObjectKey && nf.businessObjectKeyType && nf.businessObjectDefinitionCode"
             class="link-open-text cursor-pointer"
             @click.stop="goToL(nf)"
           >
-            {{ $t("notification.openDocument") }}
+            {{ $t('notification.openDocument') }}
           </span>
         </div>
       </div>
       <div v-else class="text-subTitle" style="overflow-wrap: anywhere">
-        <FHtmlContent
-          alowed-links
-          class="snack-text selectable-text"
-          :data="nf.text"
-        />
+        <FHtmlContent alowed-links class="snack-text selectable-text" :data="nf.text" />
       </div>
 
       <!-- Close btn -->
       <v-tooltip :text="$t('buttons.close')" attach offset="12">
         <template #activator="{ props: tooltipProps }">
-          <v-btn
-            class="mb-auto ml-auto"
-            size="20"
-            variant="text"
-            v-bind="tooltipProps"
-            @click="removeNotifyById(nf.id)"
-          >
+          <v-btn class="mb-auto ml-auto" size="20" variant="text" v-bind="tooltipProps" @click="removeNotifyById(nf.id)">
             <FIcon icon="times" color="text" size="0.9em" />
           </v-btn>
         </template>

package/src/FPreLoader.vue

@@ -3,20 +3,15 @@
 const props = defineProps({
   preLoaders: {
     type: Array,
-    default: () => [],
-  },
-});
+    default: () => []
+  }
+})
 </script>
 
 <template>
-  <v-overlay
-    :model-value="!!props.preLoaders.length"
-    z-index="208"
-    opacity="0.5"
-    class="f-preloader"
-  >
+  <v-overlay :model-value="!!props.preLoaders.length" z-index="208" opacity="0.5" class="f-preloader">
     <div v-if="props.preLoaders.includes('tokenUpdate')" class="text-title">
-      {{ $t("updating") }}
+      {{ $t('updating') }}
     </div>
     <div class="f-preloader-lds-ellipsis">
       <div></div>

package/src/FSearchPanel.vue

@@ -0,0 +1,188 @@
+<script setup>
+// FSearchPanel
+import { ref, watch, useTemplateRef } from 'vue'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String,
+    default: 'text'
+  },
+  background: {
+    type: String,
+    default: 'background'
+  },
+  outlined: {
+    type: Boolean,
+    default: false
+  },
+  searchOnBlur: {
+    type: Boolean,
+    default: false
+  },
+  tooltipProps: {
+    type: Object,
+    default: () => ({ location: 'top' })
+  },
+  ctrlF: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const modelValue = defineModel({
+  type: String,
+  default: null
+})
+
+const search = ref(null)
+
+const updateModelValue = useDebounceFn(value => {
+  if (modelValue.value === value) return
+  modelValue.value = value
+}, 300)
+
+const searchInputRef = useTemplateRef('search-input')
+useEventListener('keydown', e => {
+  if (!props.ctrlF) return
+
+  // Focus the search input when Ctrl+F or Cmd+F is pressed
+  if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+    e.preventDefault()
+    searchInputRef.value?.focus()
+  }
+})
+
+watch(
+  modelValue,
+  val => {
+    if (val === search.value) return
+    search.value = val
+  },
+  { immediate: true }
+)
+
+watch(search, v => {
+  if (props.searchOnBlur) return
+  updateModelValue(v)
+})
+
+const blurHandler = () => {
+  updateModelValue(search.value)
+}
+
+const keydownEnter = () => {
+  searchInputRef.value?.blur()
+  updateModelValue(search.value)
+}
+
+const keydownEsc = () => {
+  searchInputRef.value?.blur()
+}
+</script>
+
+<template>
+  <div class="f-search-panel">
+    <v-text-field
+      ref="search-input"
+      v-model.trim="search"
+      clearable
+      :disabled="disabled"
+      :bg-color="background"
+      :class="{ 'is-outlined': outlined }"
+      @blur="blurHandler"
+      @keydown.esc.stop.prevent="keydownEsc"
+      @keydown.enter="keydownEnter"
+    >
+      <template #prepend-inner>
+        <v-tooltip :disabled="disabled" :text="$t('tooltip.search')" v-bind="tooltipProps">
+          <template #activator="{ props: propsTooltip }">
+            <FIcon icon="search" :color="color" v-bind="propsTooltip" />
+          </template>
+        </v-tooltip>
+      </template>
+    </v-text-field>
+
+    <!-- Global search -->
+    <slot name="globalSearch"></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.f-search-panel {
+  position: relative;
+  min-height: 30px;
+  width: auto;
+  :deep(.f-input) {
+    height: 30px;
+    width: 30px;
+    transition: all 0.2s ease-in-out;
+    &.v-input--focused {
+      .v-field__prepend-inner {
+        margin-left: 0px;
+        cursor: default;
+        .f-icon {
+          background: rgb(var(--v-theme-primary)) !important;
+        }
+      }
+    }
+    &.v-input--focused,
+    &.v-input--dirty {
+      width: 250px;
+      max-width: 250px;
+      .f-icon {
+        background: rgb(var(--v-theme-text)) !important;
+      }
+    }
+
+    &:not(.is-outlined) {
+      background: transparent !important;
+      .v-field__prepend-inner {
+        cursor: pointer;
+        margin-left: -6px;
+      }
+      .v-field {
+        background: transparent !important;
+        .v-field__outline__start,
+        .v-field__outline__notch,
+        .v-field__outline__end {
+          border-color: transparent;
+        }
+      }
+      &.v-input--dirty,
+      &.v-input--focused {
+        background: rgb(var(--v-theme-background)) !important;
+      }
+    }
+    &.is-outlined {
+      &:not(.v-input--dirty, .v-input--focused) {
+        background: transparent !important;
+        .v-field__prepend-inner {
+          cursor: pointer;
+          margin-left: -6px;
+        }
+        .v-field {
+          background: transparent !important;
+          .v-field__outline__start,
+          .v-field__outline__notch,
+          .v-field__outline__end {
+            border-color: transparent;
+          }
+        }
+      }
+    }
+
+    .v-field {
+      .v-field__input {
+        padding-left: 8px;
+        padding-top: 8px;
+        padding-bottom: 4px;
+      }
+    }
+  }
+}
+</style>

package/src/FShare.vue

@@ -47,16 +47,10 @@ onBeforeUnmount(() => {
     <!-- Header -->
     <div class="f-dialog-header">
       <!-- Title -->
-      <div class="f-dialog-header-title">{{ $t("buttons.share") }}</div>
+      <div class="f-dialog-header-title">{{ $t('buttons.share') }}</div>
       <v-tooltip 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="close"
-          >
+          <v-btn v-bind="tooltipProps" variant="text" size="32" class="f-dialog-header-action f-dialog-header-action-close" @click="close">
             <FIcon icon="times" size="18" color="fields-light" />
           </v-btn>
         </template>
@@ -67,14 +61,7 @@ onBeforeUnmount(() => {
     <div class="f-dialog-body">
       <div class="share-wrap">
         <template v-for="(btn, idx) in props.buttons">
-          <v-btn
-            v-if="!btn.hide"
-            :key="idx"
-            variant="text"
-            class="share-btn"
-            color="subTitle"
-            @click="applyMethod(btn.action)"
-          >
+          <v-btn v-if="!btn.hide" :key="idx" variant="text" class="share-btn" color="subTitle" @click="applyMethod(btn.action)">
             <FIcon :icon="btn.icon" size="24" :color="btn.color" />
             <!-- <FHtmlContent :data="btn.name" /> -->
             <span v-if="btn.name" class="share-btn-name">{{ btn.name }}</span>