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

package/src/assets/scss/utilities.scss

@@ -0,0 +1,167 @@
+// Font size utilities
+.fs-08 {
+  font-size: 0.8em;
+}
+.fs-09 {
+  font-size: 0.9em;
+}
+.fs-1 {
+  font-size: 1em;
+}
+.fs-11 {
+  font-size: 1.1em;
+}
+.fs-12 {
+  font-size: 1.2em;
+}
+.fs-13 {
+  font-size: 1.3em;
+}
+.fs-14 {
+  font-size: 1.4em;
+}
+.fs-15 {
+  font-size: 1.5em;
+}
+
+// Line height utilities
+.lh-09 {
+  line-height: 0.9em;
+}
+.lh-1 {
+  line-height: 1em;
+}
+.lh-11 {
+  line-height: 1.1em;
+}
+.lh-12 {
+  line-height: 1.2em;
+}
+.lh-13 {
+  line-height: 1.3em;
+}
+.lh-14 {
+  line-height: 1.4em;
+}
+.lh-15 {
+  line-height: 1.5em;
+}
+.lh-16 {
+  line-height: 1.6em;
+}
+
+// Width utilities
+.fill-width {
+  width: 100%;
+}
+
+// Custom scrollbar styles
+.f-scrollbar-y {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: inherit;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 10.8px;
+    box-shadow: inset 0 0 6px rgba(var(--v-theme-disabled));
+  }
+  &::-webkit-scrollbar-thumb {
+    border-top: 0px solid rgba(0, 0, 0, 0);
+    border-bottom: 0px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    border-radius: 10.8px;
+    height: 50px;
+    background-color: rgba(var(--v-theme-disabled));
+    &:hover {
+      background-color: rgba(var(--v-theme-primary));
+    }
+  }
+}
+
+.f-menu.v-menu .v-overlay__content .f-context-menu-list.v-list {
+  padding: 12px 6px;
+  overflow-x: hidden;
+  .v-list-item {
+    padding: 4px 6px;
+    min-height: auto;
+    .v-list-item__overlay {
+      border-radius: 5.8px;
+      background: rgb(var(--v-theme-primary));
+    }
+    &:hover {
+      .v-list-item__overlay {
+        opacity: 0.15;
+      }
+    }
+    .v-list-item__content {
+      .v-list-item-title {
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+        font-size: 1em;
+        color: rgb(var(--v-theme-subTitle));
+      }
+    }
+  }
+  .v-divider {
+    position: relative;
+    min-width: calc(100% + 12px);
+    left: -6px;
+  }
+}
+
+.v-virtual-scroll {
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 10.8px;
+    box-shadow: inset 0 0 6px rgba(var(--v-theme-disabled));
+  }
+  &::-webkit-scrollbar-thumb {
+    border-top: 0px solid rgba(0, 0, 0, 0);
+    border-bottom: 0px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    border-radius: 10.8px;
+    height: 50px;
+    background-color: rgba(var(--v-theme-disabled));
+    &:hover {
+      background-color: rgba(var(--v-theme-primary));
+    }
+  }
+}
+
+// Box shadow utility
+:root {
+  --f-box-shadow: 0px 4px 20px 0px rgba(var(--v-theme-disabled));
+}
+.f-box-shadow {
+  box-shadow: 0px 4px 20px 0px var(--f-box-shadow);
+}
+.v-theme--dark {
+  --f-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.6);
+  .f-box-shadow {
+    box-shadow: 0px 4px 20px 0px var(--f-box-shadow);
+  }
+}
+
+.bg-overlay {
+  position: relative;
+  z-index: 1;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    border-radius: inherit;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0.2;
+    visibility: visible;
+    background: currentColor;
+  }
+}

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.periodName') }}:</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>