bfg-common 1.0.0

package/components/atoms/datepicker/Datepicker.vue

@@ -0,0 +1,612 @@
+<template>
+  <div class="container-datepicker">
+    <atoms-the-icon
+      name="calendar"
+      :class="[`btn-show-calendar  calendar-id-${uniqueId}`]"
+      @click.stop="showHideCalendar"
+    />
+    <div
+      v-show="isShowCalendar"
+      class="the-datepicer"
+      :style="[{ top: calendarTop + 'px' }, { left: calendarLeft + 'px' }]"
+      @click.stop
+    >
+      <div v-show="showAllMonths" class="content-month">
+        <div class="all-months">
+          <div
+            v-for="(item, key) in allMonths"
+            :key="key"
+            :class="['calendar-btn', item.class]"
+            @click="selectMonth(key)"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+      </div>
+      <div v-show="showAllYears" class="content-years">
+        <div class="content-buttons-arrow">
+          <button
+            :id="`${props.testId}-prev-button`"
+            class="calendar-btn"
+            title="Previous decade"
+            @click="prevYear"
+          >
+            <atoms-the-icon
+              name="arrow"
+              fill="#0095d3"
+              class="arrow-btn prev"
+            />
+          </button>
+          <button
+            :id="`${props.testId}-current-year-button`"
+            class="calendar-btn set-current-data"
+            title="Current decade"
+            @click="setCurrentYear"
+          >
+            <atoms-the-icon name="calendar-current-date" class="current-btn" />
+          </button>
+          <button
+            :id="`${props.testId}-next-button`"
+            class="calendar-btn"
+            title="Next decade"
+            @click="nextYear"
+          >
+            <atoms-the-icon
+              name="arrow"
+              fill="#0095d3"
+              class="arrow-btn next"
+            />
+          </button>
+        </div>
+        <div class="all-years">
+          <div
+            v-for="(item, key) in allYears"
+            :key="key"
+            :class="['calendar-btn', item.class]"
+            @click="selectYear(item.text)"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+      </div>
+      <div v-if="!showAllMonths && !showAllYears" class="main-content">
+        <div class="the-month">
+          <div class="date top-menu">
+            <button
+              :id="`${props.testId}-current-month-button`"
+              class="calendar-btn show-all-months"
+              title="Select Month"
+              @click="showAllMonths = true"
+            >
+              {{ currentMonth }}
+            </button>
+            <button
+              :id="`${props.testId}-current-year-button`"
+              class="calendar-btn current-year"
+              title="Select Year"
+              @click="showAllYears = true"
+            >
+              {{ currentYear }}
+            </button>
+          </div>
+          <div class="content-buttons-arrow">
+            <button
+              :id="`${props.testId}-prev-month-button`"
+              class="calendar-btn"
+              title="Previous Month"
+              @click="prevMonth"
+            >
+              <atoms-the-icon
+                name="arrow"
+                fill="#0095d3"
+                class="arrow-btn prev"
+              />
+            </button>
+            <button
+              :id="`${props.testId}-current-date-button`"
+              class="calendar-btn set-current-data"
+              title="Current Month"
+              @click="setCurrentDate"
+            >
+              <atoms-the-icon
+                name="calendar-current-date"
+                class="current-btn"
+              />
+            </button>
+            <button
+              :id="`${props.testId}-next-month-icon`"
+              class="calendar-btn"
+              title="Next Month"
+              @click="nextMonth"
+            >
+              <atoms-the-icon
+                name="arrow"
+                fill="#0095d3"
+                class="arrow-btn next"
+              />
+            </button>
+          </div>
+        </div>
+        <div class="bottom-panel">
+          <div class="weekdays">
+            <div v-for="(item, key) in weekdays" :key="key">{{ item }}</div>
+          </div>
+          <div class="days">
+            <div
+              v-for="(item, key) in days"
+              :key="key"
+              :class="['item-day', item.class]"
+              @click="selectDay(item.text, item.class)"
+            >
+              {{ item.text }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_Items } from '~/components/atoms/datepicker/models/interfaces'
+import {
+  getMonthsFunc,
+  getWeekdaysFunc,
+} from '~/components/atoms/datepicker/config/datapicker'
+import { getShortMonths } from '~/components/atoms/datepicker/config/allShortMonths'
+
+const { $isDate } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    modelValue: number
+    lang: string
+  }>(),
+  { testId: 'ui-datepicker' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', num: number): void
+  (event: 'update', num: number): void
+}>()
+
+const interfaceLang = computed<string>(() => props.lang)
+
+let isEnabledEmit = false
+const checkingDate = computed<Date>({
+  get() {
+    return new Date(props.modelValue)
+  },
+  set(newValue) {
+    if (isEnabledEmit) {
+      const newDate = new Date(newValue).getTime()
+      emits('update:model-value', newDate)
+      emits('update', newDate)
+      isEnabledEmit = false
+      if ($isDate(newValue.toString())) {
+        renderCalendar()
+      }
+    }
+  },
+})
+
+const currentYear = ref<number>()
+const currentMonth = ref<string>()
+const showAllYears = ref<boolean>(false)
+const showAllMonths = ref<boolean>(false)
+const selectedMonth = ref<number>(new Date().getMonth())
+
+const days = ref<UI_I_Items[]>([])
+const months = computed<string[]>(() => getMonthsFunc(localization.value))
+const weekdays = computed<string[]>(() => {
+  const language = interfaceLang.value
+  return getWeekdaysFunc(localization.value, language)
+})
+
+const renderCalendar = () => {
+  checkingDate.value.setDate(1)
+  days.value = []
+
+  const lastDay = new Date(
+    checkingDate.value.getFullYear(),
+    checkingDate.value.getMonth() + 1,
+    0
+  ).getDate()
+
+  const prevLastDay = new Date(
+    checkingDate.value.getFullYear(),
+    checkingDate.value.getMonth(),
+    0
+  ).getDate()
+
+  const firstDayIndex = checkingDate.value.getDay()
+  const language = interfaceLang.value
+  const firstDayIndexByLanguage =
+    language === 'en_US' ? firstDayIndex : firstDayIndex - 1
+
+  const shortMonths = getShortMonths(language)
+
+  currentMonth.value = shortMonths[checkingDate.value.getMonth()]
+
+  currentYear.value = checkingDate.value.getFullYear()
+
+  for (let x = firstDayIndexByLanguage; x > 0; x--) {
+    const result = prevLastDay - x + 1
+    days.value.push({
+      text: result,
+      class: 'prev-date',
+    })
+  }
+  const indexCurrentMonth = shortMonths.findIndex(
+    (x) => x === currentMonth.value
+  )
+
+  for (let i = 1; i <= lastDay; i++) {
+    if (
+      i === new Date(props.modelValue).getDate() &&
+      new Date(props.modelValue).getMonth() === indexCurrentMonth &&
+      new Date(props.modelValue).getFullYear() === currentYear.value
+    ) {
+      days.value.push({
+        text: i,
+        class: 'active',
+      })
+    } else if (
+      i === new Date().getDate() &&
+      indexCurrentMonth === new Date().getMonth() &&
+      currentYear.value === new Date().getFullYear()
+    ) {
+      days.value.push({
+        text: i,
+        class: 'today',
+      })
+    } else {
+      days.value.push({ text: i, class: '' })
+    }
+  }
+
+  const x = 42 - days.value.length
+  for (let j = 1; j <= x; j++) {
+    days.value.push({
+      text: j,
+      class: 'next-date',
+    })
+  }
+}
+
+const allMonths = computed<UI_I_Items[]>(() => {
+  const result = []
+  for (let i = 0; i < months.value.length; i++) {
+    const active = i + 1 === selectedMonth.value + 1 ? 'active' : ''
+    result.push({
+      text: months.value[i],
+      class: active,
+    })
+  }
+  return result
+})
+
+const firstYear = ref<number>(
+  Number(checkingDate.value.getFullYear().toString().slice(0, 3) + 0)
+)
+const allYears = computed<UI_I_Items[]>(() => {
+  const result = []
+  for (let i = firstYear.value; i < firstYear.value + 10; i++) {
+    const active = i === currentYear.value ? 'active' : ''
+    result.push({
+      text: i,
+      class: active,
+    })
+  }
+  return result
+})
+const prevYear = (): void => {
+  firstYear.value = firstYear.value - 10
+}
+const nextYear = (): void => {
+  firstYear.value = firstYear.value + 10
+}
+const setCurrentYear = (): void => {
+  firstYear.value = Number(
+    checkingDate.value.getFullYear().toString().slice(0, 3) + 0
+  )
+}
+const selectYear = (value: number): void => {
+  checkingDate.value = new Date(checkingDate.value.setFullYear(value))
+  renderCalendar()
+  showAllYears.value = false
+}
+
+const prevMonth = (): void => {
+  checkingDate.value.setMonth(checkingDate.value.getMonth() - 1)
+
+  renderCalendar()
+}
+const nextMonth = (): void => {
+  checkingDate.value.setMonth(checkingDate.value.getMonth() + 1)
+
+  renderCalendar()
+}
+const setCurrentDate = (): void => {
+  isEnabledEmit = true
+  checkingDate.value = new Date()
+
+  setTimeout(() => {
+    renderCalendar()
+  }, 0)
+}
+
+const selectMonth = (value: number): void => {
+  checkingDate.value = new Date(checkingDate.value.setMonth(value))
+  selectedMonth.value = value
+  showAllMonths.value = false
+
+  renderCalendar()
+}
+const selectDay = (value: number | string, type: string): void => {
+  isEnabledEmit = true
+  if (type === 'prev-date') {
+    checkingDate.value = new Date(
+      checkingDate.value.setMonth(checkingDate.value.getMonth() - 1)
+    )
+  } else if (type === 'next-date') {
+    checkingDate.value = new Date(
+      checkingDate.value.setMonth(checkingDate.value.getMonth() + 1)
+    )
+  }
+  checkingDate.value = new Date(checkingDate.value.setDate(+value))
+
+  isShowCalendar.value = false
+}
+
+const isShowCalendar = ref<boolean>(false)
+
+const uniqueId = ref<number>(0)
+const calendarTop = ref<number>()
+const calendarLeft = ref<number>()
+const showHideCalendar = (): void => {
+  const allDatePickers = document.querySelectorAll('.the-datepicer')
+  allDatePickers.forEach((element: any) => (element.style.display = 'none'))
+  const element = document.querySelector(
+    `.calendar-id-${uniqueId.value}`
+  ) as HTMLElement
+
+  calendarTop.value = element.getBoundingClientRect().y - 314 + 2
+  calendarLeft.value = element.getBoundingClientRect().x - 278 / 2
+
+  isShowCalendar.value = !isShowCalendar.value
+}
+
+const windowClick = (): void => {
+  isShowCalendar.value = false
+}
+
+const bodyScroll = (): void => {
+  isShowCalendar.value = false
+}
+
+onMounted(() => {
+  renderCalendar()
+  window.addEventListener('click', windowClick)
+  uniqueId.value = useUniqueId()
+})
+onUnmounted(() => {
+  window.removeEventListener('scroll', windowClick)
+})
+
+watch(isShowCalendar, (value) => {
+  if (value) {
+    checkingDate.value.setMonth(new Date(props.modelValue).getMonth())
+    checkingDate.value.setFullYear(new Date(props.modelValue).getFullYear())
+    renderCalendar()
+    window.addEventListener('scroll', bodyScroll, true)
+  } else window.removeEventListener('scroll', bodyScroll, true)
+})
+</script>
+
+<style scoped lang="scss">
+.item-day {
+  font-size: 13px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  border-radius: 0.15rem;
+}
+.container-datepicker {
+  background: unset;
+
+  .the-datepicer {
+    width: 278px;
+    height: 314px;
+    border: 1px solid var(--vertical-nav-hover-bg-color);
+    border-radius: 0.15rem;
+    box-shadow: 0 1px 2.4px hsl(0deg 0% 45% / 25%);
+    padding: 12px;
+    position: fixed;
+    z-index: 1050;
+    background-color: var(--modal-other-bg-color);
+
+    .content-month {
+      .all-months {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+        .calendar-btn {
+          width: 100%;
+          height: 48px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: var(--checkbox-label-color);
+        }
+        .active {
+          background: var(--vertical-nav-hover-bg-color);
+          color: var(--form-input-color);
+        }
+      }
+    }
+    .content-years {
+      .content-buttons-arrow {
+        max-width: 108px;
+        margin: 0 auto;
+      }
+      .all-years {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+        .calendar-btn {
+          width: 100%;
+          height: 48px;
+          color: var(--checkbox-label-color);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .active {
+          background: var(--vertical-nav-hover-bg-color);
+          color: var(--form-input-color);
+        }
+      }
+    }
+    .main-content {
+      .the-month {
+        height: 36px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        text-align: center;
+
+        i {
+          font-size: 29px;
+          cursor: pointer;
+        }
+        h1 {
+          font-size: 3rem;
+          font-weight: 400;
+          text-transform: uppercase;
+          letter-spacing: 0.2rem;
+          margin-bottom: 1rem;
+        }
+        p {
+          font-size: 1.6rem;
+        }
+
+        .top-menu {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .bottom-panel {
+        .weekdays {
+          display: flex;
+          align-items: center;
+
+          div {
+            font-size: 12px;
+            font-weight: bold;
+            letter-spacing: 0.1rem;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--checkbox-label-color);
+          }
+        }
+        .days {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+
+          .item-day {
+            font-size: 13px;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: background-color 0.2s;
+            cursor: pointer;
+            border-radius: 0.15rem;
+            color: var(--checkbox-label-color);
+
+            &:not(.prev-date):not(.today):hover {
+              background: #eee;
+            }
+            &.active {
+              background: #d9e4ea;
+              color: #000;
+              font-weight: bold;
+            }
+            &.today {
+              color: var(--blue-950);
+              font-weight: bold;
+            }
+            &.prev-date,
+            &.next-date {
+              opacity: 0.5;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .calendar-btn {
+    width: 48px;
+    height: 36px;
+    color: #0095d3;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: unset;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    border-radius: 3px;
+
+    &:hover {
+      background: #eee;
+    }
+  }
+
+  .content-buttons-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .icons {
+      color: #0095d3;
+    }
+
+    .calendar-btn {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .arrow-btn {
+    width: 18px;
+    height: 18px;
+
+    &.prev {
+      transform: rotate(-90deg);
+    }
+    &.next {
+      transform: rotate(90deg);
+    }
+  }
+}
+</style>

package/components/atoms/datepicker/config/allShortMonths.ts

@@ -0,0 +1,103 @@
+import { UI_I_ArbitraryObject } from '~/models/interfaces'
+
+const hyShortMonths: string[] = [
+  'Հնվ',
+  'Փետ',
+  'Մար',
+  'Ապր',
+  'Մայ',
+  'Հուն',
+  'Հուլ',
+  'Օգս',
+  'Սեպ',
+  'Հոկ',
+  'Նոյ',
+  'Դեկ',
+]
+
+const enShortMonths: string[] = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+]
+
+const ruShortMonths: string[] = [
+  'янв',
+  'фев',
+  'мар',
+  'апр',
+  'мая',
+  'июн',
+  'июл',
+  'авг',
+  'сен',
+  'окт',
+  'ноя',
+  'дек',
+]
+
+const beShortMonths: string[] = [
+  'сту',
+  'лют',
+  'сак',
+  'кра',
+  'тра',
+  'чэр',
+  'ліп',
+  'жні',
+  'вер',
+  'кас',
+  'ліс',
+  'сне',
+]
+
+const kzShortMonths: string[] = [
+  'қаң',
+  'ақп',
+  'нау',
+  'сәу',
+  'мам',
+  'мау',
+  'шіл',
+  'там',
+  'қыр',
+  'қаз',
+  'қар',
+  'қар',
+]
+
+const chShortMonths: string[] = [
+  '哈月',
+  '阿克鲁月',
+  '纳乌月',
+  '萨乌月',
+  '马穆月',
+  '茉月',
+  '希尔月',
+  '塔穆月',
+  '奎尔月',
+  '哈斯月',
+  '哈尔月',
+  '哲尔月',
+]
+
+const allShortMonths: UI_I_ArbitraryObject<string[]> = {
+  hy_AM: hyShortMonths,
+  en_US: enShortMonths,
+  ru_RU: ruShortMonths,
+  be_BY: beShortMonths,
+  kk_KZ: kzShortMonths,
+  zh_CHS: chShortMonths,
+}
+
+export const getShortMonths = (language: string): string[] =>
+  allShortMonths[language]