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

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

@@ -0,0 +1,498 @@
+<script setup>
+// FTextFieldDate
+import { ref, computed, watch, useTemplateRef, nextTick } from 'vue'
+import { useFocus } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import moment from 'moment'
+
+const { t, locale } = useI18n()
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'secondary'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  allowedDates: {
+    type: Function,
+    default: () => true
+  },
+  type: {
+    type: String,
+    default: 'date',
+    validator: value => ['date', 'datetime'].includes(value)
+  }
+})
+
+const modelValue = defineModel({
+  type: String,
+  default: ''
+})
+
+const emit = defineEmits(['blur', 'focus'])
+
+const fields = {
+  day: {
+    min: 1,
+    max: () => moment(month.value + '-' + year.value, 'MM-YYYY').daysInMonth() || 31,
+    placeholder: t('pickers.dFormat'),
+    next: 'month',
+    prev: null,
+    value: ref(''),
+    temp: ref(''),
+    ref: useTemplateRef('day-input')
+  },
+  month: {
+    min: 1,
+    max: 12,
+    placeholder: t('pickers.mFormat'),
+    next: 'year',
+    prev: 'day',
+    value: ref(''),
+    temp: ref(''),
+    ref: useTemplateRef('month-input')
+  },
+  year: {
+    min: 1,
+    max: 9999,
+    placeholder: t('pickers.yFormat'),
+    next: props.type === 'datetime' ? 'hour' : null,
+    prev: 'month',
+    value: ref(''),
+    temp: ref(''),
+    ref: useTemplateRef('year-input')
+  },
+  hour: {
+    min: 0,
+    max: 23,
+    placeholder: t('pickers.hFormat'),
+    next: 'minute',
+    prev: 'year',
+    value: ref(''),
+    temp: ref(''),
+    ref: useTemplateRef('hour-input')
+  },
+  minute: {
+    min: 0,
+    max: 59,
+    placeholder: t('pickers.minFormat'),
+    next: null,
+    prev: 'hour',
+    value: ref(''),
+    temp: ref(''),
+    ref: useTemplateRef('minute-input')
+  }
+}
+
+const isAllowedDates = ref(true)
+
+const classList = computed(() => {
+  const list = [`text-${props.color}`]
+  if (props.disabled) list.push('is-disabled')
+  if (!isAllowedDates.value) list.push('is-error')
+  return list
+})
+
+const isValidDate = computed(() => moment(modelValue.value).isValid())
+
+// Computed shortcuts for field values
+const day = computed({
+  get: () => fields.day.value.value,
+  set: val => {
+    fields.day.value.value = val
+  }
+})
+const month = computed({
+  get: () => fields.month.value.value,
+  set: val => {
+    fields.month.value.value = val
+  }
+})
+const year = computed({
+  get: () => fields.year.value.value,
+  set: val => {
+    fields.year.value.value = val
+  }
+})
+const hour = computed({
+  get: () => fields.hour.value.value,
+  set: val => {
+    fields.hour.value.value = val
+  }
+})
+const minute = computed({
+  get: () => fields.minute.value.value,
+  set: val => {
+    fields.minute.value.value = val
+  }
+})
+
+// Track focus for each field
+const { focused: dayFocused } = useFocus(fields.day.ref)
+const { focused: monthFocused } = useFocus(fields.month.ref)
+const { focused: yearFocused } = useFocus(fields.year.ref)
+const { focused: hourFocused } = useFocus(fields.hour.ref)
+const { focused: minuteFocused } = useFocus(fields.minute.ref)
+
+const isFocused = computed(() => dayFocused.value || monthFocused.value || yearFocused.value || hourFocused.value || minuteFocused.value)
+
+watch([day, month, year, hour, minute], () => {
+  if (props.type === 'date' && !isNaN(day.value) && !isNaN(month.value) && !isNaN(year.value)) {
+    modelValue.value = `${year.value}-${month.value}-${day.value}`
+    return
+  }
+
+  if (props.type === 'datetime' && !isNaN(day.value) && !isNaN(month.value) && !isNaN(year.value) && !isNaN(hour.value) && !isNaN(minute.value)) {
+    modelValue.value = `${year.value}-${month.value}-${day.value} ${hour.value}:${minute.value}`
+    return
+  }
+
+  modelValue.value = ''
+})
+
+// If the day is greater than the number of days in the month, set the last day of the month
+watch([month, year], () => {
+  const maxDay = moment(month.value + '-' + year.value, 'MM-YYYY').daysInMonth() || 31
+  const currentDay = parseInt(day.value, 10)
+
+  if (currentDay > maxDay) {
+    day.value = maxDay.toString().padStart(2, '0')
+    fields.day.value.value = maxDay.toString().padStart(2, '0')
+    fields.day.temp.value = ''
+  }
+})
+
+watch(
+  modelValue,
+  val => {
+    const format = props.type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm'
+    if (val && moment(val, format).isValid()) {
+      isAllowedDates.value = props.allowedDates(val)
+    }
+
+    if (typeof val === 'string' || val instanceof Date) {
+      if (isValidDate.value) {
+        day.value = moment(val, format).format('DD')
+        month.value = moment(val, format).format('MM')
+        year.value = moment(val, format).format('YYYY')
+        if (props.type === 'datetime') {
+          hour.value = moment(val, format).format('HH')
+          minute.value = moment(val, format).format('mm')
+        }
+      }
+    } else {
+      day.value = fields.day.placeholder
+      month.value = fields.month.placeholder
+      year.value = fields.year.placeholder
+      hour.value = fields.hour.placeholder
+      minute.value = fields.minute.placeholder
+    }
+  },
+  { immediate: true }
+)
+
+// Generic input handler factory
+const createInputHandler = fieldName => {
+  return e => {
+    const field = fields[fieldName]
+    const max = typeof field.max === 'function' ? field.max() : field.max
+    const inputValue = parseInt(e.target.value, 10)
+
+    // Arrow key handling
+    if (e.type === 'arrow') {
+      const clamped = Math.max(field.min, Math.min(inputValue, max)) // Limit values from min to max
+      const padLength = fieldName === 'year' ? 4 : 2 // Format: year - 4 characters, the rest - 2 characters
+
+      field.value.value = clamped.toString().padStart(padLength, '0')
+      nextTick(() => {
+        if (field.ref.value[0]) {
+          field.ref.value[0].setSelectionRange(0, 0)
+          field.ref.value[0].select()
+        }
+      })
+      return
+    }
+
+    // Handle non-numeric input
+    if (isNaN(inputValue)) {
+      field.temp.value = ''
+      field.value.value = field.placeholder
+      nextTick(() => field.ref.value[0].select())
+      return
+    }
+
+    // Handle numeric input
+    handleNumericInput({ field, fieldName, inputValue, max, target: e.target })
+  }
+}
+
+const handleNumericInput = ({ field, fieldName, inputValue, max, target }) => {
+  const firstDigitMax = parseInt(max.toString()[0])
+  const nextRef = field.next ? fields[field.next].ref.value[0] : null
+  const tempValue = parseInt(field.temp.value, 10)
+
+  // First digit exceeds first digit of max
+  if (inputValue > firstDigitMax && isNaN(tempValue)) {
+    field.temp.value = '0' + inputValue
+    if (nextRef) {
+      nextRef.focus()
+    } else if (fieldName === 'minute') {
+      target.blur()
+    }
+    return
+  }
+
+  // First digit input
+  if (isNaN(tempValue)) {
+    if (fieldName === 'year') {
+      field.temp.value = inputValue.toString()
+      field.value.value = inputValue.toString().padStart(4, '0')
+    } else {
+      field.temp.value = '0' + inputValue
+    }
+    nextTick(() => target.select())
+    return
+  }
+
+  // Second+ digit input
+  if (fieldName === 'year') {
+    // For year: add digit to temp
+    const newTempValue = field.temp.value + inputValue.toString()
+
+    if (newTempValue.length <= 4 && parseInt(newTempValue) <= max) {
+      field.temp.value = newTempValue
+      field.value.value = newTempValue.padStart(4, '0')
+
+      if (field.temp.value.length === 4) {
+        // Year fully entered
+        if (props.type === 'datetime' && nextRef) {
+          nextRef.focus()
+        } else {
+          target.blur()
+        }
+      } else {
+        nextTick(() => target.select())
+      }
+    }
+  } else {
+    // For day/month/hour/minute: second digit + new digit
+    const newValue = field.temp.value.charAt(1) + inputValue.toString()
+
+    if (parseInt(newValue) <= max) {
+      field.temp.value = newValue
+      if (nextRef) {
+        nextRef.focus()
+      } else if (fieldName === 'minute') {
+        target.blur()
+      }
+    } else {
+      // Exceeded max - set max and move on
+      field.temp.value = max.toString().padStart(2, '0')
+      if (nextRef) {
+        nextRef.focus()
+      } else if (fieldName === 'minute') {
+        target.blur()
+      }
+    }
+  }
+}
+
+const focusHandler = e => {
+  e.target.setSelectionRange(0, 0)
+  e.target.select()
+}
+
+const blurHandler = fieldName => {
+  const field = fields[fieldName]
+
+  if (field.temp.value) {
+    field.value.value = field.temp.value
+    field.temp.value = ''
+  }
+
+  // Timeout 0 to allow focus to move to another field before emitting blur
+  setTimeout(() => {
+    if (!isFocused.value) {
+      if (props.type === 'date') {
+        emit('blur', `${year.value}-${month.value}-${day.value}`)
+      } else {
+        emit('blur', `${year.value}-${month.value}-${day.value} ${hour.value}:${minute.value}`)
+      }
+    }
+  }, 0)
+}
+
+const inputHandlers = {
+  day: createInputHandler('day'),
+  month: createInputHandler('month'),
+  year: createInputHandler('year'),
+  hour: createInputHandler('hour'),
+  minute: createInputHandler('minute')
+}
+
+const keydownHandler = (e, fieldName) => {
+  const preventKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+  if (preventKeys.includes(e.key)) e.preventDefault()
+
+  const field = fields[fieldName]
+  const currentValue = !isNaN(field.value.value) ? parseInt(field.value.value) : 0
+  const handler = inputHandlers[fieldName]
+
+  const actions = {
+    ArrowUp: () => handler({ target: { value: currentValue + 1 }, type: 'arrow' }),
+    ArrowDown: () => handler({ target: { value: currentValue - 1 }, type: 'arrow' }),
+    ArrowLeft: () => {
+      const prevField = field.prev
+      if (prevField && fields[prevField].ref.value[0]) {
+        fields[prevField].ref.value[0].focus()
+      }
+    },
+    ArrowRight: () => {
+      const nextField = field.next
+      if (nextField && fields[nextField].ref.value[0]) {
+        fields[nextField].ref.value[0].focus()
+      }
+    }
+  }
+
+  actions[e.key]?.()
+}
+</script>
+
+<template>
+  <div class="d-flex align-center f-text-field-date" :class="classList">
+    <div v-if="disabled && isValidDate" :class="`text-${color}`">
+      {{ type === 'date' ? `${day}.${month}.${year}` : `${day}.${month}.${year} ${hour}:${minute}` }}
+    </div>
+
+    <template v-else>
+      <template v-for="(fieldName, index) in ['day', 'month', 'year']" :key="fieldName">
+        <!-- Separator before month and year -->
+        <span v-if="index > 0" class="f-text-field-date-separator" :class="`text-${color}`">.</span>
+
+        <!-- Field input -->
+        <input
+          :ref="fieldName + '-input'"
+          v-model="fields[fieldName].value.value"
+          type="text"
+          :name="fieldName"
+          :class="[
+            'f-text-field-date-input',
+            `text-${color}`,
+            fieldName,
+            locale,
+            { 'is-empty': fields[fieldName].value.value === fields[fieldName].placeholder }
+          ]"
+          :placeholder="fields[fieldName].placeholder"
+          :disabled="disabled"
+          @click="focusHandler"
+          @focus="focusHandler"
+          @blur="blurHandler(fieldName)"
+          @input="inputHandlers[fieldName]"
+          @keydown.stop="keydownHandler($event, fieldName)"
+        />
+      </template>
+
+      <template v-if="type === 'datetime'">
+        <template v-for="fieldName in ['hour', 'minute']" :key="fieldName">
+          <!-- Separator before hour (space) and minute (colon) -->
+          <span class="f-text-field-date-separator" :class="[`text-${color}`, { 'ml-1': fieldName === 'hour' }]">
+            {{ fieldName === 'hour' ? '' : ':' }}
+          </span>
+
+          <!-- Field input -->
+          <input
+            :ref="fieldName + '-input'"
+            v-model="fields[fieldName].value.value"
+            type="text"
+            :name="fieldName"
+            :class="[
+              'f-text-field-date-input',
+              `text-${color}`,
+              fieldName,
+              locale,
+              { 'is-empty': fields[fieldName].value.value === fields[fieldName].placeholder }
+            ]"
+            :placeholder="fields[fieldName].placeholder"
+            :disabled="disabled"
+            @click="focusHandler"
+            @focus="focusHandler"
+            @blur="blurHandler(fieldName)"
+            @input="inputHandlers[fieldName]"
+            @keydown.stop="keydownHandler($event, fieldName)"
+          />
+        </template>
+      </template>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.f-text-field-date {
+  background: transparent;
+  width: max-content;
+  position: relative;
+  font-size: 1.1em;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    min-height: 0.5px;
+    height: 0.5px;
+    width: 100%;
+    background: currentColor;
+  }
+  &.is-disabled::after {
+    content: none;
+  }
+  &.is-error {
+    &::after {
+      background: rgb(var(--v-theme-error));
+    }
+    .f-text-field-date-input,
+    .f-text-field-date-separator {
+      color: rgb(var(--v-theme-error)) !important;
+    }
+  }
+  .f-text-field-date-input {
+    border: none;
+    outline: none;
+    width: 2ch;
+    text-align: center;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    color: inherit;
+    &.is-empty {
+      &.ru.year {
+        width: 3ch;
+      }
+      &.en {
+        &.month {
+          width: calc(2ch + 6px);
+        }
+        &.year {
+          width: calc(3ch + 3px);
+        }
+      }
+    }
+    &.year {
+      width: 4ch;
+    }
+    &:focus {
+      outline: none;
+    }
+    &::placeholder {
+      color: rgb(var(--v-theme-disabled));
+    }
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+}
+</style>

package/src/f-toolbar/FFilterPanel.vue

@@ -0,0 +1,62 @@
+<script setup>
+// FFilterPanel
+import { mergeProps } from 'vue'
+
+defineProps({
+  badge: {
+    type: [Number, String, Boolean],
+    default: false
+  }
+})
+
+const modelValue = defineModel({
+  type: Boolean,
+  default: false
+})
+</script>
+<template>
+  <v-menu v-model="modelValue" :close-on-content-click="false" content-class="f-filter-panel">
+    <template #activator="{ props: menuProps }">
+      <v-tooltip :text="$t('tooltip.filter')">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn class="f-filter-panel-activator" variant="text" size="30" v-bind="mergeProps(menuProps, tooltipProps)">
+            <v-badge dot :model-value="badge" offset-x="-2" offset-y="-2" color="primary">
+              <FIcon icon="filter" color="text" size="18" />
+            </v-badge>
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </template>
+
+    <!-- Filter content -->
+    <div>
+      <!-- Filter header -->
+      <div class="f-filter-panel-header d-flex align-center pa-3 text-uppercase text-subTitle">
+        <FIcon icon="filter" color="text" size="14" class="mr-2" style="margin-top: -2px" />
+        {{ $t('filterPanel.Filter.Name') }}
+
+        <v-spacer />
+
+        <!-- Counter -->
+        <v-badge
+          v-if="typeof badge === 'number' || typeof badge === 'string'"
+          :content="badge"
+          offset-x="4"
+          offset-y="-6"
+          min-width="16"
+          width="16"
+          height="16"
+          rounded="xs"
+          color="secondary"
+        />
+      </div>
+
+      <v-divider />
+
+      <!-- Filter body -->
+      <div class="f-filter-panel-body">
+        <slot></slot>
+      </div>
+    </div>
+  </v-menu>
+</template>

package/src/f-toolbar/FSortPanel.vue

@@ -0,0 +1,47 @@
+<script setup>
+// FSortPanel
+import { mergeProps } from 'vue'
+
+defineProps({
+  badge: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const modelValue = defineModel({
+  type: Boolean,
+  default: false
+})
+</script>
+<template>
+  <v-menu v-model="modelValue" :close-on-content-click="false" content-class="f-sort-panel">
+    <template #activator="{ props: menuProps }">
+      <v-tooltip :text="$t('tooltip.sort')">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn class="f-sort-panel-activator" variant="text" size="30" v-bind="mergeProps(menuProps, tooltipProps)">
+            <v-badge dot color="primary" :model-value="badge" offset-x="-4" offset-y="-2">
+              <FIcon icon="sort" color="text" size="18" />
+            </v-badge>
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </template>
+
+    <!-- Sort content -->
+    <div>
+      <!-- Sort header -->
+      <div class="f-sort-panel-header d-flex align-end pa-3 text-uppercase text-subTitle">
+        <FIcon icon="sort" color="text" size="14" class="mr-2" />
+        <span class="lh-1">{{ $t('filterPanel.Sort.Name') }}</span>
+      </div>
+
+      <v-divider />
+
+      <!-- Sort body -->
+      <div class="f-sort-panel-body">
+        <slot></slot>
+      </div>
+    </div>
+  </v-menu>
+</template>