its_ui_vite 1.0.8 → 1.0.10

package/README.md

@@ -130,6 +130,22 @@ slots: ['без имени' <!-- есть дефольное значение (p
 slots: ['customIcon' <!-- есть дефольное значение -->]
 ```
 
+* CDatepicker 
+
+```
+{
+  date?: string,
+  locale?: 'rus' | 'usa' | 'tur' | 'spa',
+  max?: string,
+  min?: string,
+  width?: string,
+  isOpen?: boolean,
+  modelValue?: any,
+}
+
+slots: ['customIcon' <!-- есть дефольное значение -->]
+```
+
 * CTooltip
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "main": "./src/libIndex.js",
   "module": "./src/libIndex.js",
   "files": [
@@ -23,6 +23,7 @@
     "compression": "^1.7.4",
     "dotenv": "^16.3.1",
     "express": "4.18.2",
+    "luxon": "^3.7.2",
     "vue": "^3.3.11",
     "vue3-perfect-scrollbar": "^2.0.0",
     "yargs": "^17.7.2"

package/src/assets/icon/icons-manifest.ts

@@ -75,6 +75,8 @@ export type TIcon = {
     'bx-volume-mute'?: boolean,
     /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMgNS41QzEzIDMuNTcgMTEuNDMgMiA5LjUgMkM3LjQ2NiAyIDYuMjUgMy41MjUgNi4yNSA1SDguMjVDOC4yNSA0LjU4NSA4LjYzOCA0IDkuNSA0QzEwLjMyNyA0IDExIDQuNjczIDExIDUuNUMxMSA2LjMyNyAxMC4zMjcgNyA5LjUgN0gyVjlIOS41QzExLjQzIDkgMTMgNy40MyAxMyA1LjVaTTE1LjUgMTVIOFYxN0gxNS41QzE2LjMyNyAxNyAxNyAxNy42NzMgMTcgMTguNUMxNyAxOS4zMjcgMTYuMzI3IDIwIDE1LjUgMjBDMTQuNjM4IDIwIDE0LjI1IDE5LjQxNSAxNC4yNSAxOUgxMi4yNUMxMi4yNSAyMC40NzUgMTMuNDY2IDIyIDE1LjUgMjJDMTcuNDMgMjIgMTkgMjAuNDMgMTkgMTguNUMxOSAxNi41NyAxNy40MyAxNSAxNS41IDE1WiIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNMTggNUMxNS43OTQgNSAxNCA2Ljc5NCAxNCA5SDE2QzE2IDcuODk3IDE2Ljg5NyA3IDE4IDdDMTkuMTAzIDcgMjAgNy44OTcgMjAgOUMyMCAxMC4xMDMgMTkuMTAzIDExIDE4IDExSDJWMTNIMThDMjAuMjA2IDEzIDIyIDExLjIwNiAyMiA5QzIyIDYuNzk0IDIwLjIwNiA1IDE4IDVaTTIgMTVINlYxN0gyVjE1WiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=) */
     'bx-wind'?: boolean,
+    /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNyAxMUg5VjEzSDdWMTFaTTIxIDVWMTlDMjEgMjAuMTEgMjAuMTEgMjEgMTkgMjFINUMzLjg5IDIxIDMgMjAuMSAzIDE5VjVDMyAzLjkgMy45IDMgNSAzSDZWMUg4VjNIMTZWMUgxOFYzSDE5QzIwLjExIDMgMjEgMy45IDIxIDVaTTUgN0gxOVY1SDVWN1pNMTkgMTlWOUg1VjE5SDE5Wk0xNSAxM1YxMUgxN1YxM0gxNVpNMTEgMTNWMTFIMTNWMTNIMTFaTTcgMTVIOVYxN0g3VjE1Wk0xNSAxN1YxNUgxN1YxN0gxNVpNMTEgMTdWMTVIMTNWMTdIMTFaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==) */
+    'calendar-month-outline'?: boolean,
 }
 export const iconContent = {
     'Bar-chart': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 20V10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 20V4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 20V14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
@@ -115,4 +117,5 @@ export const iconContent = {
     'bx-volume-full': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 21C19.527 19.453 21.999 16.091 21.999 12C21.999 7.909 19.527 4.547 16 3V5C18.387 6.386 19.999 9.047 19.999 12C19.999 14.953 18.387 17.614 16 19V21Z" fill="white"/><path d="M16 6.99997V17C17.225 15.9 18 13.771 18 12C18 10.229 17.225 8.09997 16 6.99997ZM4 17H6.697L12.445 20.832C12.5958 20.9321 12.7708 20.9896 12.9516 20.9984C13.1324 21.0072 13.3122 20.967 13.472 20.882C13.6316 20.7965 13.765 20.6693 13.858 20.514C13.951 20.3587 14.0001 20.181 14 20V3.99997C13.9999 3.81909 13.9508 3.64162 13.8578 3.48646C13.7648 3.3313 13.6315 3.20427 13.472 3.11889C13.3125 3.03351 13.1329 2.99299 12.9522 3.00163C12.7715 3.01027 12.5966 3.06776 12.446 3.16797L6.697 6.99997H4C2.897 6.99997 2 7.89697 2 8.99997V15C2 16.103 2.897 17 4 17ZM4 8.99997H7C7.033 8.99997 7.061 8.98397 7.093 8.98097C7.22601 8.96741 7.35509 8.928 7.473 8.86497C7.499 8.84997 7.53 8.84797 7.555 8.83197L12 5.86797V18.132L7.555 15.168C7.53 15.151 7.499 15.148 7.473 15.135C7.35491 15.0707 7.22491 15.0312 7.091 15.019C7.059 15.016 7.032 15 7 15H4V8.99997Z" fill="white"/></svg>`,
     'bx-volume-mute': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.707 20.293L19.684 18.27C21.1845 16.5263 22.0063 14.3003 21.999 12C21.999 7.90897 19.527 4.54697 16 2.99997V4.99997C18.387 6.38597 19.999 9.04697 19.999 12C19.9946 13.7765 19.4072 15.5025 18.327 16.913L17.042 15.628C17.644 14.536 18 13.19 18 12C18 10.229 17.225 8.09997 16 6.99997V14.586L14 12.586V3.99997C13.9999 3.81908 13.9508 3.64161 13.8578 3.48645C13.7648 3.3313 13.6315 3.20426 13.472 3.11889C13.3125 3.03351 13.1329 2.99298 12.9522 3.00163C12.7715 3.01027 12.5966 3.06776 12.446 3.16797L7.727 6.31297L3.707 2.29297L2.293 3.70697L20.293 21.707L21.707 20.293ZM12 5.86797V10.586L9.169 7.75497L12 5.86797ZM4 17H6.697L12.445 20.832C12.5958 20.9321 12.7708 20.9896 12.9516 20.9984C13.1324 21.0072 13.3122 20.967 13.472 20.882C13.6316 20.7965 13.765 20.6693 13.858 20.514C13.951 20.3587 14.0001 20.181 14 20V18.121L12 16.121V18.132L7.555 15.168C7.53 15.151 7.499 15.148 7.473 15.135C7.35491 15.0707 7.22491 15.0312 7.091 15.019C7.059 15.016 7.032 15 7 15H4V8.99997H4.879L3.102 7.22297C2.77189 7.38821 2.4941 7.6418 2.29954 7.95553C2.10499 8.26926 2.00129 8.63081 2 8.99997V15C2 16.103 2.897 17 4 17Z" fill="white"/></svg>`,
     'bx-wind': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 5.5C13 3.57 11.43 2 9.5 2C7.466 2 6.25 3.525 6.25 5H8.25C8.25 4.585 8.638 4 9.5 4C10.327 4 11 4.673 11 5.5C11 6.327 10.327 7 9.5 7H2V9H9.5C11.43 9 13 7.43 13 5.5ZM15.5 15H8V17H15.5C16.327 17 17 17.673 17 18.5C17 19.327 16.327 20 15.5 20C14.638 20 14.25 19.415 14.25 19H12.25C12.25 20.475 13.466 22 15.5 22C17.43 22 19 20.43 19 18.5C19 16.57 17.43 15 15.5 15Z" fill="white"/><path d="M18 5C15.794 5 14 6.794 14 9H16C16 7.897 16.897 7 18 7C19.103 7 20 7.897 20 9C20 10.103 19.103 11 18 11H2V13H18C20.206 13 22 11.206 22 9C22 6.794 20.206 5 18 5ZM2 15H6V17H2V15Z" fill="white"/></svg>`,
+    'calendar-month-outline': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11H9V13H7V11ZM21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5ZM5 7H19V5H5V7ZM19 19V9H5V19H19ZM15 13V11H17V13H15ZM11 13V11H13V13H11ZM7 15H9V17H7V15ZM15 17V15H17V17H15ZM11 17V15H13V17H11Z" fill="white"/></svg>`,
 }

package/src/assets/icon/svg/calendar-month-outline.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 11H9V13H7V11ZM21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5ZM5 7H19V5H5V7ZM19 19V9H5V19H19ZM15 13V11H17V13H15ZM11 13V11H13V13H11ZM7 15H9V17H7V15ZM15 17V15H17V17H15ZM11 17V15H13V17H11Z" fill="white"/>
+</svg>

package/src/components/CDatepicker.vue

@@ -0,0 +1,1006 @@
+<template>
+  <div
+    ref="root"
+    :data-c-datepicker-id="datePickerId"
+    class="c-datepicker"
+    :style="`--transition: ${transition}ms; --width: ${width}; --picker-content-indent-y: ${pickerContentIndentY}px`"
+  >
+    <div
+      ref="inpWrap"
+      :class="['c-datepicker__inp_wrap', { open: isOpenPicker }]"
+      @click="setIsOpen(!isOpenPicker)"
+    >
+      <CInput
+        class="c-datepicker__inp"
+        size="sm"
+        :width="width"
+        :placeholder="activeDate.toLocaleString(DateTime.DATE_FULL)"
+        :disabled="true"
+      >
+        <template #customIcon>
+          <CIcon :name="{'calendar-month-outline': true}" :size="24" />
+        </template>
+      </CInput>
+    </div>
+
+    
+    <div
+      ref="time"
+      :class="['c-datepicker__hours_wrap', { open: isOpenTime }]"
+    >
+      <div
+        class="c-datepicker__hours_inps"
+        @click="isOpenTime = true"
+      >
+        <input
+          type="text"
+          name="hours"
+          v-model="modelHour"
+          @input="setTime('hour', ($event.target as HTMLInputElement).value)"
+          @focus="isOpenTime = true, isOpenPicker = false"
+          @blur="dispatchEmit"
+        />
+        <span>:</span>
+        <input
+          type="text"
+          name="minute"
+          v-model="modelMinute"
+          @input="setTime('minute', ($event.target as HTMLInputElement).value)"
+          @focus="isOpenTime = true"
+          @blur="isOpenTime = false"
+        />
+      </div>
+      <Teleport to="body">
+        <div
+          class="c-datepicker__hours_list-wrap"
+          ref="timeContent"
+          :data-c-datepicker-id="datePickerId"
+          :style="timeStyle"
+        >
+          <div
+            :style="`--transition: ${transition}ms; --picker-time-indent-y: ${pickerContentIndentY}px`"
+            :class="['c-datepicker__hours_list', pickerContentPosition, {open: isOpenTime}]"
+          >
+            <div class="c-datepicker__hours_list-content">
+              <CScroll class="c-datepicker__hours_list-scroll">
+                <button
+                  v-for="item in hoursOptions"
+                  :key="item.value"
+                  :class="['c-datepicker__hours_btn', {active: item.text === modelHour}]"
+                  @click="setTime('hour', item.text)"
+                >
+                  {{ item.text }}
+                </button>
+              </CScroll>
+              <div class="c-datepicker__hours_list-line"></div>
+              <CScroll class="c-datepicker__hours_list-scroll">
+                <button
+                  v-for="item in minuteOptions"
+                  :key="item.value"
+                  :class="['c-datepicker__hours_btn', {active: item.text === modelMinute}]"
+                  @click="setTime('minute', item.text)"
+                >
+                  {{ item.text }}
+                </button>
+              </CScroll>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+    </div>
+
+    <Teleport to="body">
+      <div
+        :style="pickerContentStyle"
+        :class="['c-datepicker__content_wrap', { open: isOpenPicker }]"
+      >
+        <div
+          ref="pickerContent"
+          :data-c-datepicker-id="datePickerId"
+          :class="['c-datepicker__content', pickerContentPosition, {open: isOpenPicker}]"
+          :style="`--transition: ${transition}ms; --width: ${width}; --picker-content-indent-y: ${pickerContentIndentY}px`"
+        >
+          <div class="c-datepicker__selects">
+            <CSelect
+              class="c-datepicker__select"
+              ref="monthSelect"
+              size="sm"
+              :options="monthsOption"
+              :transform-val="true"
+              :placeholder="monthsOption[activeMonth - 1].text"
+              :locale="locale"
+              :iconPosition="['right']"
+              width="100px"
+              :model-value="modelYear"
+              @change_cselect="setSelect('month', $event[0])"
+            />
+            <CSelect
+              class="c-datepicker__select"
+              ref="yearSelect"
+              size="sm"
+              :options="yearOption"
+              :transform-val="true"
+              :placeholder="String(activeYear)"
+              :locale="locale"
+              :iconPosition="['right']"
+              width="70px"
+              :model-value="modelYear"
+              @change_cselect="setSelect('year', $event[0])"
+            />
+          </div>
+          <div class="c-datepicker__table">
+            <div v-for="day in text.daysOfWeek" :key="day" class="c-datepicker__table_item c-datepicker__table_name">
+              {{ day }}
+            </div>
+
+            <button 
+              v-for="day in monthDays"
+              :key="day.ISO"
+              class="c-datepicker__table_item"
+              :class="{
+                disable: isDisableDay(day.ISO),
+                active: isActiveDay(day.ISO),
+              }"
+
+              @click="setActiveDay(day.ISO)"
+            >
+              <span>{{ day.value }}</span>
+            </button>
+          </div>
+          <div class="c-datepicker__action">
+            <CButton
+              class="c-datepicker__action_btn"
+              variant="outlined"
+              size="md"
+              @click="setIsOpen(false)"
+            >
+              {{ text.cancel }}
+            </CButton>
+            <CButton
+              class="c-datepicker__action_btn"
+              size="md"
+              @click="dispatchEmit()"
+            >
+              {{ text.accept }}
+            </CButton>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DateTime } from 'luxon'
+
+import CIcon from './CIcons/CIcon.vue';
+import CSelect from './CSelect.vue';
+import CInput from './CInput.vue';
+import CButton from './CButton.vue';
+import CScroll from './CScroll.vue';
+
+import { addTracingElement } from '../assets/js/helpers';
+import { computed, ref, watch, onMounted, onUnmounted, Teleport } from 'vue';
+
+type TProps = {
+  date?: string,
+  locale?: 'rus' | 'usa' | 'tur' | 'spa',
+  max?: string,
+  min?: string,
+  width?: string,
+  isOpen?: boolean,
+  modelValue?: any,
+}
+
+const props = withDefaults(defineProps<TProps>(), {
+  locale: 'rus',
+  isOpen: false,
+  width: '100%',
+  modelValue: () => [],
+});
+
+const defaultDate = DateTime.now()
+
+type TMonthDay = {
+  ISO: string
+  value: number
+}
+
+type TSelectOption = {
+  text: string,
+  value: number,
+}
+
+const transition = 200;
+const pickerContentIndentY = 12;
+const datePickerId = Math.random() * 100_000_000
+
+let monthDays = ref<TMonthDay[]>([]);
+
+let root = ref();
+let inpWrap = ref();
+let pickerContent = ref();
+let monthSelect = ref();
+let yearSelect = ref();
+let time = ref();
+let timeContent = ref();
+
+let isOpenTime = ref(false);
+let isOpenPicker = ref(props.isOpen || false);
+let pickerContentPosition = ref<'bottom' | 'top'>('bottom');
+
+let oldDateISO = ref<any>(defaultDate.toISO())
+let activeDate = ref<any>(defaultDate);
+let activeMonth = ref<number>(defaultDate.month);
+let activeYear = ref<number>(defaultDate.year);
+
+let modelMonth: any = ref([]);
+let modelYear: any = ref([]);
+let modelHour = ref('00');
+let modelMinute = ref('00');
+
+let pickerContentStyle = ref({
+  left: '0px',
+  top: '0px',
+  width: '210px',
+  height: '38px'
+});
+
+let timeStyle = ref({
+  left: '0px',
+  top: '0px',
+  width: '50px',
+  height: '34px'
+});
+
+const TracingElement = addTracingElement(root, handlePicker);
+const TracingTime = addTracingElement(time, handleTime);
+
+onMounted(() => {
+  if (props.date) {
+    if (typeof props.date === 'string') {
+      activeDate.value = DateTime.fromISO(props.date)
+    }
+
+    if (!activeDate.value?.isValid) {
+      activeDate.value = defaultDate
+    }
+  }
+
+  oldDateISO.value = activeDate.value;
+
+  const currentDate = activeDate.value.toISO();
+
+  activeMonth.value = activeDate.value.month;
+  activeYear.value = activeDate.value.year;
+
+  fillMonthDays(currentDate);
+
+  modelHour.value = activeDate.value.toFormat('HH');
+  modelMinute.value = activeDate.value.toFormat('mm');
+
+  TracingElement.addListeners();
+  TracingTime.addListeners();
+  document.body.addEventListener('click', handleClickPicker);
+  document.body.addEventListener('click', handleClickTime);
+});
+
+onUnmounted(() => {
+  TracingElement.removeListeners();
+  TracingTime.removeListeners();
+  document.body.removeEventListener('click', handleClickPicker)
+  document.body.removeEventListener('click', handleClickTime);
+});
+
+const emit = defineEmits<{
+  (name: 'update:modelValue', value: string),
+  (name: 'change_cdatepicker', value: string),
+  (name: 'update:isOpen', value: boolean)
+}>();
+
+const text = computed(() => {
+  const lang = {
+    rus: {
+      daysOfWeek: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
+      months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+      cancel: 'Отмена',
+      accept: 'OK',
+    },
+
+    usa: {
+      daysOfWeek: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ],
+      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      cancel: 'Cancel',
+      accept: 'OK',
+    },
+
+    tur: {
+      daysOfWeek: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ],
+      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      cancel: 'Cancel',
+      accept: 'OK',
+    },
+
+    spa: {
+      daysOfWeek: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ],
+      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      cancel: 'Cancel',
+      accept: 'OK',
+    },
+  };
+
+  return lang[props.locale]
+})
+
+const monthsOption = computed(() => {
+  let options: TSelectOption[] = [];
+
+  text.value.months.forEach((item, index) => {
+    options.push({
+      text: item,
+      value: index + 1,
+    });
+  });
+
+  return options;
+});
+
+const yearOption = computed(() => {
+  let options: TSelectOption[] = [];
+
+  const range = 10;
+  const minYear = activeDate.value.year - range;
+  const maxYear = activeDate.value.year + range;
+
+  for(let i = minYear; i < maxYear; i++) {
+    options.push({
+      text: String(i),
+      value: i,
+    })
+  }
+
+  return options;
+});
+
+const hoursOptions = computed(() => {
+  let options: TSelectOption[] = [];
+  
+  const max = 24;
+
+  for (let i = 0; i < max; i++) {
+    options.push({
+      text: getTimeStr(i),
+      value: i,
+    })
+  }
+
+  return options;
+});
+
+const minuteOptions = computed(() => {
+  let options: TSelectOption[] = [];
+  
+  const max = 60;
+
+  for (let i = 0; i < max; i++) {
+    options.push({
+      text: getTimeStr(i),
+      value: i,
+    })
+  }
+
+  return options;
+});
+
+watch(() => isOpenPicker.value, (newValue) => {
+  emit('update:isOpen', newValue);
+})
+
+watch(() => activeDate.value, (newValue) => {
+  const value = typeof newValue === 'string' ? newValue : newValue.toISO();
+
+  emit('update:modelValue', value);
+})
+
+function handlePicker(positionInfo?: any) {
+  pickerContentStyle.value.left = `${positionInfo.position.x}px`;
+  pickerContentStyle.value.top = `${positionInfo.position.y}px`;
+  pickerContentStyle.value.width = `${positionInfo.position.width}px`;
+  pickerContentStyle.value.height = `${positionInfo.position.height}px`;
+  setPickerContentPosition();
+
+  if (positionInfo.isVisible) return;
+
+  setIsOpen(false);
+}
+
+function handleClickPicker(evt: MouseEvent) {
+  const target = (evt.target as HTMLElement);
+  const classesArr = [
+    '.c-datepicker__inp_wrap',
+    '.c-datepicker__content',
+    `[data-c-select-id="${monthSelect.value.selectId}"]`,
+    `[data-c-select-id="${yearSelect.value.selectId}"]`,
+  ];
+  const classesStr = classesArr.join(',');
+  const isTarget: HTMLElement | null = target.closest(classesStr);
+
+  if (isCurrent(isTarget)) return;
+
+  setIsOpen(false);
+}
+
+function isCurrent(target: HTMLElement | null) {
+  const isMatchMonthSelectId = String(monthSelect.value.selectId) === target?.dataset?.cSelectId;
+  const isMatchYearSelectId = String(yearSelect.value.selectId) === target?.dataset?.cSelectId;
+
+  const isMatchInpWrap = inpWrap.value === target;
+  const isMatchPickerContent = pickerContent.value === target;
+
+  return isMatchMonthSelectId || isMatchYearSelectId || isMatchInpWrap || isMatchPickerContent;
+}
+
+function handleClickTime(evt: MouseEvent) {
+  const target = (evt.target as HTMLElement);
+  const classesStr = '.c-datepicker__hours_wrap, .c-datepicker__hours_list-wrap';
+  const isTimeContent = target.closest(classesStr);
+
+  const isTarget = isTimeContent === time.value;
+  const isContent = isTimeContent === timeContent.value;
+
+  if (isTarget || isContent) return;
+
+  isOpenTime.value = false;
+}
+
+function handleTime(positionInfo?: any) {
+  timeStyle.value.left = `${positionInfo.position.x}px`;
+  timeStyle.value.top = `${positionInfo.position.y}px`;
+  timeStyle.value.width = `${positionInfo.position.width}px`;
+  timeStyle.value.height = `${positionInfo.position.height}px`;
+
+  if (positionInfo.isVisible) return;
+
+  isOpenTime.value = false;
+} 
+
+function setPickerContentPosition() {
+  const windowHeight = window.innerHeight;
+  const inputHeight = root.value.clientHeight;
+  const listClientRect = pickerContent.value.getBoundingClientRect()
+  const isTop = pickerContentPosition.value === 'top'
+  
+  const indentTop = (listClientRect.height + inputHeight) * (isTop ? 1 : 0) + pickerContentIndentY
+  const indent = windowHeight - listClientRect.y - indentTop
+
+  pickerContentPosition.value = indent > listClientRect.height ? 'bottom' : 'top'
+}
+
+function fillMonthDays(ISO: string | null) {
+  if (typeof ISO !== 'string') return
+
+  if (monthDays.value.length < 1) {
+    const currentDaysDate = DateTime.fromISO(ISO).startOf('month').startOf('week');
+    const monthDayObj: TMonthDay = {
+      ISO: (currentDaysDate.toISO() as string),
+      value: currentDaysDate.day
+    };
+    monthDays.value.push(monthDayObj);
+
+    return fillMonthDays(currentDaysDate.toISO());
+  }
+
+  const lastWeekDate = DateTime.fromISO(ISO).set({ month: activeMonth.value, year: activeYear.value }).endOf('month', {}).endOf('week', {});
+  // добавляем по дню до тех пор пока не дойдем до последней даты
+  const currentDate = DateTime.fromISO(ISO).plus({ day: 1 });
+
+  const monthDayObj: TMonthDay = {
+    ISO: (currentDate.toISO() as string),
+    value: currentDate.day,
+  };
+  monthDays.value.push(monthDayObj);
+
+  const isMismatchYear = lastWeekDate.year !== currentDate.year;
+  const isMismatchMonth = lastWeekDate.month !== currentDate.month;
+  const isMismatchDay = lastWeekDate.day !== currentDate.day;
+  
+  // проверка на совпадение последней даты
+  if (isMismatchYear || isMismatchMonth || isMismatchDay) fillMonthDays(currentDate.toISO());
+}
+
+function isDisableDay(ISO: string): boolean {
+  if (!props.min && !props.max) return false;
+
+  const currentDate = DateTime.fromISO(ISO);
+  const maxDate = DateTime.fromISO(props.max as string);
+  const minDate = DateTime.fromISO(props.min as string);
+
+  const isMoreMax = maxDate.ts < currentDate.ts;
+  const isLessMin = minDate.ts > currentDate.ts;
+  
+  return isMoreMax || isLessMin;
+}
+
+function setTime(name: 'hour' | 'minute', value: string) {
+  const numValue = value.replace(/[^0-9]/g, '');
+
+  let min = 0;
+  let max = 59;
+
+  if (name === 'hour') {
+    max = 23;
+  }
+  if (name === 'minute') {
+    max = 59;
+  }
+
+  const validValue = Math.min(Math.max(min, +numValue), max);
+  const strValue = getTimeStr(validValue);
+
+  if (name === 'hour') modelHour.value = strValue
+  else modelMinute.value = strValue
+
+  const currentDate = activeDate.value.toISO();
+
+  activeDate.value = DateTime.fromISO(currentDate).set({ hour: +modelHour.value, minute: +modelMinute.value });
+
+  dispatchEmit()
+}
+
+function getTimeStr(value: number) {
+  return `0${value}`.match(/.{2}$/)?.[0] || '00'
+}
+
+function setIsOpen(value: boolean) {
+  isOpenPicker.value = value;
+  setOldDate(value);
+}
+
+function setOldDate(value: boolean) {
+  if (value) {
+    oldDateISO.value = activeDate.value.toISO()
+  } else {
+    activeDate.value = DateTime.fromISO(oldDateISO.value);
+    activeMonth.value = activeDate.value.month;
+    activeYear.value = activeDate.value.year;
+
+    setSelect('month', activeMonth.value);
+    setSelect('year', activeYear.value);
+  }
+}
+
+function dispatchEmit() {
+  const currentDateISO = activeDate.value.toISO();
+  setIsOpen(false);
+  
+  oldDateISO.value = currentDateISO;
+  activeDate.value = DateTime.fromISO(currentDateISO);
+  emit('change_cdatepicker', currentDateISO);
+}
+
+function setActiveDay(ISO: string) {
+  if (isDisableDay(ISO)) return;
+
+  const currentDate = DateTime.fromISO(ISO);
+
+  const currentActiveDate = DateTime.fromISO(activeDate.value.toISO()).set({
+    year: currentDate.year,
+    month: currentDate.month,
+    day: currentDate.day,
+  });
+
+  activeDate.value = currentActiveDate;
+}
+
+function setSelect(dateName: 'month' | 'year', value: number) {
+  if (!value) return;
+
+  const currentISO = activeDate.value.toISO();
+
+  if (dateName === 'month') {
+    activeMonth.value = value;
+    modelMonth.value[0] = monthsOption.value[value - 1]
+  }
+
+  if (dateName === 'year') {
+    activeYear.value = value;
+    modelYear.value[0] = {
+      value,
+      text: String(value)
+    }
+  }
+
+  activeDate.value = DateTime.fromISO(currentISO).set({ month: activeMonth.value, year: activeYear.value })
+  const currentDate = activeDate.value.toISO();
+  
+  monthDays.value = [];
+  fillMonthDays(currentDate);
+}
+
+function isActiveDay(ISO: string): boolean {
+  const currentDate = DateTime.fromISO(ISO);
+
+  return activeDate.value.year === currentDate.year && activeDate.value.month === currentDate.month && activeDate.value.day === currentDate.day
+}
+
+defineExpose({
+  datePickerId
+})
+
+</script>
+
+<style lang="scss">
+
+$timeWidth: 60px;
+
+.c-datepicker {
+  display: flex;
+  align-items: center;
+
+  gap: 15px;
+
+  &__inp {
+    &_wrap {
+      position: relative;
+
+      cursor: pointer;
+
+      &.open,
+      &:hover {
+        .c-input {
+          border: 1px solid var(--green-light);
+        }
+
+        .c-input__custom-icon svg path {
+          fill: var(--green-light);
+        }
+      }
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+
+        display: flex;
+      }
+
+      .c-input__wrap {
+        opacity: 1;
+      }
+    }
+
+    .c-input__custom-icon { 
+      opacity: 1;
+
+      svg path {
+        transition: var(--transition);
+      }
+    }
+  }
+
+  &__hours {
+
+    &_inps {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      font-size: 14px;
+
+      color: var(--white);
+
+      input {
+        width: 16px;
+        padding: 0;
+
+        outline: none;
+        border: none;
+
+        color: inherit;
+        background: transparent;
+
+        -moz-appearance: textfield;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+      }
+    }
+
+    &_wrap {
+      box-sizing: border-box;
+
+      display: flex;
+      justify-content: center;
+
+      width: $timeWidth;
+      height: 32px;
+
+      border: 1px solid var(--white);
+      border-radius: 5px;
+
+      background: var(--black-dark);
+
+      transition: var(--transition);
+
+      cursor: pointer;
+
+      &.open,
+      &:hover {
+        border: 1px solid var(--green-light);
+      }
+    }
+  }
+}
+
+.c-datepicker__hours_list-wrap {
+  --max-height: 112px;
+  --scroll-height: 100px;
+
+  position: fixed;
+  z-index: 999;
+  transition: var(--transition);
+  pointer-events: none;
+
+  .c-datepicker {
+    &__hours {
+      &_list-content {
+        box-sizing: border-box;
+
+        display: flex;
+
+        max-height: var(--scroll-height);
+      }
+
+      &_list {
+        position: absolute;
+        left: 0%;
+        transform: translate(0px, 0px);
+        z-index: 20;
+
+        box-sizing: border-box;
+
+        width: $timeWidth;
+        max-height: var(--max-height);
+        padding: 6px;
+
+        border: 1px solid var(--green-dark);
+        border-radius: 5px;
+
+        background: var(--black-dark);
+        box-shadow: var(--shadow);
+
+        transition: var(--transition);
+
+        opacity: 0;
+        pointer-events: none;
+
+        &.bottom {
+          --indent-y: var(--picker-time-indent-y);
+
+          top: 100%;
+        }
+
+        &.top {
+          --indent-y: calc(var(--picker-time-indent-y) * -1);
+
+          bottom: 100%;
+        }
+
+        &.open {
+          transform: translate(0, var(--indent-y));
+
+          opacity: 1;
+          pointer-events: all;
+        }
+      }
+
+      &_list-scroll {
+        .c-scroll__content {
+          background: transparent;
+        }
+
+        .ps__rail-x,
+        .ps__rail-y {
+          display: none;
+        }
+      }
+
+      &_list-line {
+        display: flex;
+
+        width: 1px;
+        height: var(--scroll-height);
+
+        margin: 0 3px;
+
+        background: var(--green-dark);
+      }
+
+      &_btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        
+        width: 20px;
+        height: 20px;
+
+        font-size: 14px;
+
+        border: none;
+        outline: none;
+
+        background: transparent;
+        color: var(--white);
+
+        transition: var(--transition);
+
+        cursor: pointer;
+
+        &.active,
+        &:hover {
+          color: var(--green-light);
+        }
+      }
+    }
+  }
+}
+
+.c-datepicker__content_wrap {
+  position: fixed;
+  z-index: 999;
+  transition: var(--transition);
+  pointer-events: none;
+
+  .c-datepicker {
+    &__selects {
+      display: flex;
+      justify-content: space-between;
+
+      margin-bottom: 10px;
+    }
+
+    &__select {
+      .c-input {
+        padding: 5px;
+        padding-right: 30px !important;
+
+        border: none !important;
+        background: transparent;
+      }
+
+      .c-input__custom-icon {
+        right: 7px !important;
+
+        .c-select__inp_icon {
+          --svg-size: 18px !important;
+        }
+      }
+    }
+
+    &__content {
+      box-sizing: border-box;
+
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0px);
+      z-index: 20;
+
+      width: 100%;
+      min-width: 295px;
+      padding: 15px;
+
+      border: 1px solid var(--green-medium);
+      border-radius: 5px;
+
+      color: var(--white);
+      background: var(--black-dark);
+
+      pointer-events: none;
+      opacity: 0;
+
+      transition: var(--transition);
+
+      &.bottom {
+        --indent-y: var(--picker-content-indent-y);
+
+        top: 100%;
+      }
+
+      &.top {
+        --indent-y: calc(var(--picker-content-indent-y) * -1);
+
+        bottom: 100%;
+      }
+
+      &.open {
+        transform: translate(-50%, var(--indent-y));
+
+        opacity: 1;
+        pointer-events: all;
+      }
+
+      .c-input__custom-icon {
+        pointer-events: none;
+      }
+    }
+
+    &__table {
+      --item-size: 36px;
+
+      display: grid;
+      grid-template-columns: repeat(7, 36px);
+
+      gap: 2px;
+
+      font-size: 14px;
+
+      &_item {
+        width: var(--item-size);
+        height: var(--item-size);
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        padding: 0;
+        border: none;
+
+        background: transparent;
+        color: var(--white);
+
+        cursor: pointer;
+
+        &.disable {
+          opacity: 0.5;
+          pointer-events: none;
+        }
+
+        &.active span {
+          background: var(--green-light);
+        }
+
+        span {
+          width: 26px;
+          height: 26px;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          border-radius: 6px;
+        }
+      }
+
+      &_name {
+        display: flex;
+
+        font-weight: 500;
+
+        cursor: auto;
+      }
+    }
+
+    &__action {
+      display: flex;
+      justify-content: center;
+      gap: 12px;
+
+      margin: 10px auto 0;
+      
+      &_btn {
+        width: 84px;
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+</style>

package/src/components/CSelect.vue

@@ -1,8 +1,9 @@
 <template>
   <div
     ref="root"
+    :data-c-select-id="selectId"
     :style="`--transition: ${transition}ms; --width: ${width}; --list-indent-y: ${listIndentY}px`"
-    :class="[classes.root, variant, size, { disabled }]"
+    :class="[classes.root, variant, size, { disabled, open: isOpen }]"
   >
     <CInput
       :placeholder="activePlaceholder"
@@ -21,6 +22,7 @@
     </CInput>
     <Teleport to="body">
       <div
+        :data-c-select-id="selectId"
         :style="listStyle"
         :class="[classes.fixedContainer, variant, size, { open: isOpen, disabled }]"
       >
@@ -128,7 +130,8 @@ const emit = defineEmits<{
 }>();
 
 const transition = 200,
-  listIndentY = 12  
+  listIndentY = 12,
+  selectId = Math.random() * 100_000_000
   
 let findValue = ref(''),
   isOpen = ref(props.isOpen || false),
@@ -273,6 +276,7 @@ const handleOption: TDebounceEvent = function(option, evt) {
   setOption(option, evt);
 
   if (!isMultiple.value) dispatchEmit()
+  setActivePlaceholder()
 }
 
 const setOption: TDebounceEvent = function(option, evt) {
@@ -363,14 +367,15 @@ function setListPosition() {
 
 function handleClick(evt: MouseEvent) {
   const target = (evt.target as HTMLElement);
-  const classesStr = `.${classes.input},.c-input__custom-icon${isMultiple.value ? ',.c-input__custom-icon,.c-select__list_btn' : ''}`
+  const classesStr = `.${classes.input},.c-input__custom-icon${isMultiple.value ? ',.c-input__custom-icon,.c-select__list' : ''}`
   const currentRoot = target.closest(`.${classes.root}`)
   const domElements = target.closest(classesStr)
 
   const isRoot = currentRoot === root.value
+  const isList = domElements === list.value.$el
   const isToggle = target.closest('.c-input__custom-icon')
 
-  if (isRoot && domElements) {
+  if ((isRoot || isList) && domElements) {
     setListPosition()
     isOpen.value = isToggle ? !isOpen.value : true
     emit('update:isOpen', isOpen.value)
@@ -397,6 +402,10 @@ function dispatchEmit() {
   }, transition);
 }
 
+defineExpose({
+  selectId
+})
+
 </script>
 
 <style lang="scss">

package/src/libIndex.js

@@ -7,6 +7,7 @@ import CTooltip from './components/CTooltip.vue';
 import CPopup from './components/CPopup.vue';
 import CAlert from './components/CAlert.vue';
 import CIcon from './components/CIcons/CIcon.vue';
+import CDatepicker from './components/CDatepicker.vue';
 import CScroll from './components/CScroll.vue';
 
 import { CClasses } from './assets/js/helpers';
@@ -23,6 +24,7 @@ export {
   CPopup, 
   CAlert,
   CIcon,
+  CDatepicker,
   CScroll,
 
   CClasses,

package/src/pages/index.vue

@@ -639,6 +639,40 @@
     </div>
     <!-- ./checkboxes -->
 
+    <!-- CDatepicker -->
+    <div class="table content">
+      <div class="table__wrap">
+        <div class="table__item table__title">
+          CDatepicker
+        </div>
+        <div class="table">
+          <!-- col -->
+          <div class="table__col checkboxes">
+            <div class="table__item">
+            </div>
+          </div>
+          <!-- ./col -->
+          
+          <!-- col -->
+          <div class="table__col checkboxes">
+            <div class="table__item">
+              <CDatepicker @change_cdatepicker="(e) => console.log(e)" />
+            </div>
+          </div>
+          <!-- ./col -->
+
+          <!-- col -->
+          <div class="table__col checkboxes">
+            <div class="table__item">
+              <CDatepicker @change_cdatepicker="(e) => console.log(e)" />
+            </div>
+          </div>
+          <!-- ./col -->
+        </div>
+      </div>
+    </div>
+    <!-- ./CDatepicker -->
+
     <!-- select -->
     <div style="min-height: 400px;" class="table content">
       <div class="table__wrap">
@@ -955,6 +989,7 @@ import CTooltip from '../components/CTooltip.vue';
 import CPopup from '../components/CPopup.vue';
 import CAlert from '../components/CAlert.vue';
 import CIcon from '../components/CIcons/CIcon.vue';
+import CDatepicker from '../components/CDatepicker.vue';
 
 import { iconContent } from '../assets/icon/icons-manifest';
 
@@ -1089,6 +1124,7 @@ export default {
     CPopup,
     CAlert,
     CIcon,
+    CDatepicker,
   }, 
 }
 </script>