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

package/src/FTruncate.vue

@@ -0,0 +1,121 @@
+<script setup>
+// FTruncate
+import { ref, useTemplateRef, watch, useAttrs } from 'vue'
+import { useElementSize } from '@vueuse/core'
+
+const props = defineProps({
+  text: {
+    type: [String, Number],
+    default: ''
+  },
+  textClass: {
+    type: String,
+    default: ''
+  },
+  textStyle: {
+    type: String,
+    default: ''
+  },
+  lines: {
+    type: [String, Number],
+    default: 1,
+    validator: value => {
+      const num = Number(value)
+      return Number.isInteger(num) && num > 0
+    }
+  },
+  isHtml: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const truncateRef = useTemplateRef('truncate-text')
+const { width } = useElementSize(truncateRef)
+const disabled = ref(true)
+const menu = ref(false)
+const attrs = useAttrs()
+const isMouseLeave = ref(true)
+
+const mouseoverHandler = () => {
+  if (isMouseLeave.value) isMouseLeave.value = false
+  if (disabled.value) return
+  setTimeout(() => {
+    if (isMouseLeave.value) return
+    menu.value = true
+  }, attrs['open-delay'] || 300)
+}
+
+const mouseleaveHandler = () => {
+  if (disabled.value) return
+  menu.value = false
+  isMouseLeave.value = true
+}
+
+watch(
+  [() => width.value, () => props.text],
+  () => {
+    if (!truncateRef.value) return
+
+    const element = truncateRef.value
+    const style = window.getComputedStyle(element)
+    const lineHeight = parseFloat(style.lineHeight)
+    const maxHeight = lineHeight * Number(props.lines)
+
+    // Checking if text needs to be truncated
+    disabled.value = element.scrollHeight <= Math.round(maxHeight) + 1
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <v-menu
+    v-model="menu"
+    open-on-hover
+    z-index="1005"
+    offset="0, 6"
+    location="right"
+    max-height="500px"
+    content-class="f-truncate-menu-content"
+    :disabled="disabled"
+  >
+    <template #activator="{ props: activatorProps }">
+      <div
+        v-bind="activatorProps"
+        ref="truncate-text"
+        class="f-truncate"
+        :class="textClass"
+        :style="`-webkit-line-clamp: ${lines}; ${textStyle}`"
+        @mouseenter="mouseoverHandler"
+        @mouseleave="mouseleaveHandler"
+      >
+        <FHtmlContent v-if="isHtml" :data="text" />
+        <template v-else>{{ text }}</template>
+      </div>
+    </template>
+
+    <FHtmlContent v-if="isHtml" :data="text" />
+    <div v-else>{{ text }}</div>
+  </v-menu>
+</template>
+
+<style lang="scss" scoped>
+.f-truncate {
+  line-height: 1.1em;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  cursor: inherit;
+}
+:deep(.f-truncate-menu-content) {
+  background: rgb(var(--v-theme-background));
+  line-height: 1em;
+  font-size: 0.9em;
+  color: rgb(var(--v-theme-subTitle));
+  padding: 8px;
+  overflow: auto;
+}
+</style>

package/src/FUserRoles.vue

@@ -0,0 +1,195 @@
+<script setup>
+// FUserRoles
+import { useTemplateRef, watch, ref, nextTick } from 'vue'
+import { useElementSize, useParentElement } from '@vueuse/core'
+
+const props = defineProps({
+  userActions: {
+    type: Array,
+    required: true
+  },
+  statusIcon: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String,
+    default: 'subTitle'
+  }
+})
+
+const userRolesRef = useTemplateRef('userRoles')
+const parentEl = useParentElement(userRolesRef)
+const { width } = useElementSize(parentEl)
+const count = ref(props.userActions.length)
+const actionsWidth = ref([])
+
+const statuses = [
+  'COMPLETED',
+  'ISSUED',
+  'RUNNING',
+  'CHECKING',
+  'CANCELED',
+  'REJECTED',
+  'RETURNED_TO_INITIATOR',
+  'WAITING',
+  'DELEGATED',
+  'PROCESSED_BY_ASSISTANT'
+]
+
+const isStatusIcon = action => {
+  return props.statusIcon && action.status && statuses.includes(action.status)
+}
+
+const calculateActionsWidth = () => {
+  props.userActions.forEach((action, idx) => {
+    const virtualActionEl = document.createElement('div')
+    virtualActionEl.style.visibility = 'hidden'
+    virtualActionEl.style.position = 'absolute'
+    virtualActionEl.className = 'action'
+    virtualActionEl.style.whiteSpace = 'nowrap'
+    virtualActionEl.style.maxWidth = 'max-content'
+
+    if (isStatusIcon(action)) {
+      const iconEl = document.createElement('i')
+      iconEl.className = 'mr-1'
+      iconEl.style.display = 'inline-flex'
+      iconEl.style.minWidth = '6px'
+      iconEl.style.minHeight = '6px'
+      virtualActionEl.appendChild(iconEl)
+    }
+
+    const spanEl = document.createElement('span')
+    spanEl.innerText = action.identity.identityName
+    virtualActionEl.appendChild(spanEl)
+
+    if (idx < props.userActions.length - 1) {
+      const nbspSpanEl = document.createElement('span')
+      nbspSpanEl.innerHTML = ',&nbsp;'
+      virtualActionEl.appendChild(nbspSpanEl)
+    }
+
+    document.body.appendChild(virtualActionEl)
+    actionsWidth.value.push(virtualActionEl.clientWidth)
+    nextTick(() => {
+      document.body.removeChild(virtualActionEl)
+    })
+  })
+}
+
+watch(width, () => {
+  let totalWidth = 0
+  let availableWidth = width.value - 20 // 20px for menu and padding
+  let tempCount = 0
+
+  for (let i = 0; i < actionsWidth.value.length; i++) {
+    totalWidth += actionsWidth.value[i]
+    if (totalWidth < availableWidth) {
+      tempCount++
+    } else {
+      break
+    }
+  }
+
+  count.value = tempCount > 0 ? tempCount : 1
+})
+
+watch(
+  () => props.userActions,
+  () => calculateActionsWidth(),
+  {
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <div ref="userRoles" class="d-flex f-user-roles">
+    <!-- Many users -->
+    <template v-if="userActions.length >= count">
+      <div v-for="(a, idx) in userActions.slice(0, count)" :key="a.identity.identityId" class="action" :class="`text-${color}`">
+        <i v-if="isStatusIcon(a)" class="status-icon mr-1" :class="a.status"></i>
+        <span>{{ a.identity.identityName }}</span>
+        <span v-if="idx < userActions.length - 1">
+          {{ idx !== userActions.slice(0, count).length - 1 ? ',&nbsp;' : '' }}
+        </span>
+      </div>
+
+      <v-menu
+        v-if="userActions.length > count"
+        open-on-hover
+        offset="2, 0"
+        location="right"
+        open-delay="500"
+        min-width="100"
+        max-width="300"
+        content-class="user-actions-content"
+        :close-on-content-click="false"
+      >
+        <template #activator="{ props: activatorProps }">
+          <div v-bind="activatorProps" class="font-weight-semibold cursor-pointer f-user-roles-count ml-1" :class="`text-${color}`">
+            +{{ userActions.length - count }}
+          </div>
+        </template>
+
+        <v-virtual-scroll :items="userActions.slice(count, userActions.length)" item-key="identity.identityId" max-height="400">
+          <template #default="{ item }">
+            <i v-if="isStatusIcon(item)" class="status-icon mr-1" :class="item.status"></i>
+            <FTruncate :text="item.identity.identityName" :text-class="`text-${color}`" />
+          </template>
+        </v-virtual-scroll>
+      </v-menu>
+    </template>
+
+    <!-- One user -->
+    <template v-else>
+      <div v-if="userActions[0]" class="action mr-2" :class="`text-${color}`">
+        <i v-if="isStatusIcon(userActions[0])" class="status-icon" :class="userActions[0].status"></i>
+        {{ userActions[0].identity.identityName }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.f-user-roles,
+:deep(.f-user-actions-content) {
+  width: max-content;
+  .action {
+    white-space: nowrap;
+  }
+  .v-virtual-scroll {
+    scrollbar-width: thin;
+    padding: 4px 8px;
+    .v-virtual-scroll__item {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .status-icon {
+    display: inline-flex;
+    min-height: 6px;
+    min-width: 6px;
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+    margin-bottom: 2px;
+  }
+  .COMPLETED {
+    background: rgb(var(--v-theme-success));
+  }
+  .RUNNING,
+  .ISSUED,
+  .CHECKING,
+  .RETURNED_TO_INITIATOR,
+  .WAITING,
+  .DELEGATED,
+  .PROCESSED_BY_ASSISTANT {
+    background: rgb(var(--v-theme-info));
+  }
+  .CANCELED,
+  .REJECTED {
+    background: rgb(var(--v-theme-danger));
+  }
+}
+</style>

package/src/f-date-picker/FDatePicker.vue

@@ -0,0 +1,322 @@
+<script setup>
+// FDatePicker
+import { ref, computed, watch } from 'vue'
+import moment from 'moment'
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  isRange: {
+    type: Boolean,
+    default: false
+  },
+  isActions: {
+    type: Boolean,
+    default: false
+  },
+  allowedDates: {
+    type: Function,
+    default: () => true
+  },
+  type: {
+    type: String,
+    default: 'date',
+    validator(value, props) {
+      if (!['date', 'datetime'].includes(value)) return false
+
+      if (value === 'datetime' && props.isRange) {
+        console.warn('type "datetime" cannot be used with isRange')
+        return false
+      }
+      return true
+    }
+  }
+})
+
+const modelValue = defineModel({
+  type: [String, Date, Object],
+  default: null
+})
+
+const emit = defineEmits(['cancel', 'save'])
+
+const date = ref(null)
+const time = ref(null)
+
+const FORMAT_DATE = 'YYYY-MM-DD'
+
+const fromDateText = computed(() => {
+  if (props.isRange && modelValue?.value?.from) {
+    return moment(modelValue.value.from).format('DD.MM.YYYY')
+  }
+  return null
+})
+
+const toDateText = computed(() => {
+  if (props.isRange && modelValue?.value?.to) {
+    return moment(modelValue.value.to).format('DD.MM.YYYY')
+  }
+  return null
+})
+
+const saveDisabled = computed(() => {
+  if (props.isRange) {
+    return !(fromDateText.value && toDateText.value)
+  } else {
+    return !date.value
+  }
+})
+
+watch(
+  modelValue,
+  () => {
+    if ((typeof modelValue.value === 'string' || modelValue.value instanceof Date) && moment(modelValue.value).isValid()) {
+      date.value = moment(modelValue.value).format(FORMAT_DATE)
+      if (props.type === 'datetime') {
+        time.value = moment(modelValue.value).format('HH:mm')
+      }
+      return
+    }
+
+    if (props.isRange && modelValue.value && typeof modelValue.value === 'object' && modelValue.value.from && modelValue.value.to) {
+      const datesArray = []
+      const current = moment(modelValue.value.from).clone()
+      const end = moment(modelValue.value.to)
+
+      while (current.isSameOrBefore(end)) {
+        datesArray.push(new Date(current))
+        current.add(1, 'day')
+      }
+
+      date.value = datesArray
+      return
+    }
+
+    date.value = null
+    if (props.type === 'datetime') time.value = null
+  },
+  { immediate: true }
+)
+
+const updateDateHandler = value => {
+  if (props.type === 'date') {
+    if (props.isRange && Array.isArray(value) && value.length) {
+      const from = value[0]
+      const to = value.length > 1 ? value[value.length - 1] : moment(from).endOf('day').toDate()
+      modelValue.value = { from, to }
+    } else {
+      modelValue.value = value instanceof Date ? value : null
+    }
+  }
+
+  if (props.type === 'datetime') {
+    if (!time.value) time.value = '00:00'
+    const dateTimeString = `${moment(date.value).format(FORMAT_DATE)} ${time.value}`
+    modelValue.value = dateTimeString
+  }
+}
+</script>
+
+<template>
+  <v-date-picker
+    v-model="date"
+    hide-title
+    show-adjacent-months
+    color="secondary"
+    first-day-of-week="1"
+    weekday-format="short"
+    class="f-date-picker"
+    mode-icon="f-icon:chevron-down bg-secondary"
+    next-icon="f-icon:chevron-right bg-secondary"
+    prev-icon="f-icon:chevron-left bg-secondary"
+    :hide-header="!isRange"
+    :allowed-dates="allowedDates"
+    :multiple="isRange ? 'range' : false"
+    @update:model-value="updateDateHandler"
+  >
+    <!-- Header for "is-range" -->
+    <template v-if="isRange" #header>
+      <div class="d-flex align-center justify-space-between f-date-picker-header">
+        <span class="range-title">{{ $t('pickers.period.name') }}:</span>
+
+        <!-- From date -->
+        <div v-if="fromDateText" class="d-flex align-center">
+          <span class="range-from">{{ $t('pickers.from') }}</span>
+          <span class="range-from-date">{{ fromDateText }}</span>
+        </div>
+
+        <!-- To date -->
+        <div v-if="toDateText" class="d-flex align-center">
+          <span class="range-to ml-auto">{{ $t('pickers.to') }}</span>
+          <span class="range-to-date">{{ toDateText }}</span>
+        </div>
+      </div>
+    </template>
+
+    <!-- Footer -->
+    <template v-if="type === 'datetime' || isActions" #actions>
+      <div class="d-flex flex-column fill-width f-date-picker-footer">
+        <!-- Time picker -->
+        <div v-if="type === 'datetime'" class="d-flex mt-5 font-weight-semibold f-date-picker-footer-time">
+          <span class="mr-2">{{ $t('pickers.time') }}:</span>
+          <v-menu offset="0, -6" location="bottom right" content-class="time-picker-content" :close-on-content-click="false">
+            <template #activator="{ props: activatorProps }">
+              <div class="time pointer" v-bind="activatorProps">{{ time }}</div>
+            </template>
+
+            <v-time-picker v-model="time" hide-title scrollable format="24hr" @update:model-value="updateDateHandler" />
+          </v-menu>
+        </div>
+
+        <!-- Picker actions -->
+        <div v-if="isActions" class="d-flex justify-space-between fill-width mt-5 f-date-picker-actions">
+          <v-btn width="48%" variant="outlined" @click="emit('cancel')">
+            {{ $t('buttons.cancel') }}
+          </v-btn>
+          <v-btn width="48%" :disabled="saveDisabled" variant="elevated" @click="emit('save')">
+            {{ $t('buttons.save') }}
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </v-date-picker>
+</template>
+
+<style lang="scss" scoped>
+.f-date-picker {
+  .f-date-picker-header {
+    padding: 14px 14px 10px;
+    background-color: rgb(var(--v-theme-background));
+    border-bottom: 0.5px solid rgb(var(--v-theme-line));
+    .range-title {
+      font-size: 0.9em;
+      font-weight: 600;
+      line-height: 1.5em;
+      color: rgb(var(--v-theme-secondary));
+    }
+    .range-from,
+    .range-to {
+      font-size: 0.8em;
+      margin-right: 4px;
+      color: rgb(var(--v-theme-text));
+    }
+    .range-from-date,
+    .range-to-date {
+      font-size: 0.85em;
+      border-radius: 5.8px;
+      line-height: 1.5em;
+      padding-inline: 5px;
+      color: rgb(var(--v-theme-text));
+      background-color: rgb(var(--v-theme-fields));
+    }
+  }
+
+  &.v-picker.v-sheet {
+    border-radius: inherit;
+    box-shadow: none;
+  }
+  &.v-date-picker {
+    :deep(.v-picker__body) {
+      .v-date-picker-month__days {
+        .v-date-picker-month__day {
+          .v-btn.v-btn--variant-text .v-btn__overlay {
+            background: rgb(var(--v-theme-secondary));
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.v-picker__actions) {
+    padding-bottom: 40px;
+    border-top: 1px solid rgb(var(--v-theme-line));
+    justify-content: flex-start;
+    .v-btn {
+      margin-inline-end: 0;
+    }
+  }
+  .f-date-picker-footer {
+    .f-date-picker-footer-time {
+      color: rgb(var(--v-theme-secondary));
+      .time {
+        &::after {
+          content: '';
+          display: block;
+          width: 100%;
+          height: 0;
+          border-bottom: 0.5px solid rgb(var(--v-theme-secondary));
+          position: relative;
+          top: -1px;
+        }
+      }
+    }
+  }
+}
+.time-picker-content {
+  .v-time-picker {
+    min-width: 290px;
+    :deep(.v-picker__header) {
+      padding: 10px 20px 4px;
+      background: rgb(var(--v-theme-background-dark));
+      .v-time-picker-controls {
+        .v-time-picker-controls__time__field {
+          height: auto;
+          .v-field {
+            font-size: 32px;
+            background-color: rgb(var(--v-theme-fields));
+            .v-field__input {
+              padding: 4px 8px;
+              min-height: 20px;
+              color: rgb(var(--v-theme-fields-light));
+            }
+          }
+        }
+        .v-time-picker-controls__field-label {
+          opacity: 1;
+        }
+        .v-time-picker-controls__time__separator {
+          font-size: 32px;
+          line-height: 44px;
+          color: rgb(var(--v-theme-fields-light));
+        }
+      }
+    }
+    :deep(.v-picker__body) {
+      .v-time-picker-clock {
+        margin: 20px;
+        background: rgb(var(--v-theme-line));
+        .v-time-picker-clock__hand {
+          background: rgb(var(--v-theme-secondary));
+          &::before {
+            border-color: rgb(var(--v-theme-secondary));
+          }
+          &::after {
+            background: rgb(var(--v-theme-secondary));
+          }
+        }
+        .v-time-picker-clock__item {
+          color: rgb(var(--v-theme-text));
+          font-size: 14px;
+          height: 28px;
+          width: 28px;
+          &.v-time-picker-clock__item--active {
+            color: rgb(var(--v-theme-fields));
+            background: rgb(var(--v-theme-secondary));
+          }
+        }
+      }
+    }
+  }
+}
+.v-theme--dark {
+  .time-picker-content {
+    .v-time-picker {
+      :deep(.v-picker__header) {
+        border-bottom: 1px solid rgb(var(--v-theme-line));
+      }
+    }
+  }
+}
+</style>