From e24cf6b5c4485506d07303c888eb4c71ad0e5318 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Thu, 19 May 2022 20:23:03 +0500
Subject: [PATCH 01/38] feat: add borders to the center of the picker that's
 visualize selected values

---
 .../va-time-picker/VaTimePicker.vue           | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 3008d60609..108d14a759 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, ref, computed, PropType } from 'vue'
 import { useTimePicker } from './hooks/useTimePicker'
 import VaTimePickerColumn from './components/VaTimePickerColumn.vue'
 import { useStateful, useStatefulEmits, useStatefulProps } from '../../composables/useStateful'
@@ -39,6 +39,7 @@ export default defineComponent({
     hoursFilter: { type: Function as PropType<(h: number) => boolean> },
     minutesFilter: { type: Function as PropType<(h: number) => boolean> },
     secondsFilter: { type: Function as PropType<(h: number) => boolean> },
+    framed: { type: Boolean, default: false },
   },
 
   emits: useStatefulEmits,
@@ -73,9 +74,14 @@ export default defineComponent({
       focus(activeColumnIndex.value)
     }
 
+    const computedClass = computed(() => ({
+      ...createComputedClass('va-time-picker').value,
+      'va-time-picker--framed': props.framed,
+    }))
+
     return {
       columns,
-      computedClass: createComputedClass('va-time-picker'),
+      computedClass,
       isPM,
       pickers,
       setItemRef,
@@ -122,5 +128,22 @@ export default defineComponent({
 
       opacity: var(--va-time-picker-disabled-opacity);
     }
+
+    &--framed {
+      position: relative;
+
+      &::before {
+        content: "";
+        height: 30px;
+        width: 100%;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        border-top: 1px solid var(--va-divider);
+        border-bottom: 1px solid var(--va-divider);
+        z-index: 0;
+      }
+    }
   }
 </style>

From 73f6f86716c93eec340ab1af64dd1c440f7c8c33 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Thu, 19 May 2022 20:25:03 +0500
Subject: [PATCH 02/38] feat: add selection that's always centered

feat: add auto selection on scroll
---
 .../components/VaTimePickerColumn.vue         | 61 +++++++++++++------
 1 file changed, 41 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
index 13f2bb79e8..1aea8d7def 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
@@ -5,26 +5,26 @@
     @keydown.down.stop.prevent="makeActiveNext()"
     @keydown.space.stop.prevent="makeActiveNext(5)"
     @keydown.up.stop.prevent="makeActivePrev()"
+    @scroll="onScroll"
     ref="rootElement"
   >
-    <div class="va-time-picker-cell va-time-picker-cell--fake" />
     <div
       v-for="(item, index) in items" :key="item"
-      :class="{
-        'va-time-picker-cell': true,
-        'va-time-picker-cell--active': index === $props.activeItemIndex
-      }"
+      class="va-time-picker-cell"
+      :class="{ 'va-time-picker-cell--active': index === $props.activeItemIndex }"
+      :data-index="index"
+      :data-item="item"
       @click="onCellClick(index)"
     >
       <slot name="cell" v-bind="{ item, index, activeItemIndex, items, formattedItem: formatCell(item) }">
         {{ formatCell(item) }}
       </slot>
     </div>
-    <div class="va-time-picker-cell va-time-picker-cell--fake" />
   </div>
 </template>
 
 <script lang="ts">
+import debounce from 'lodash/debounce'
 import { defineComponent, nextTick, onMounted, PropType, ref, watch } from 'vue'
 import { useSyncProp } from '../../../composables/useSyncProp'
 import { useFocus, useFocusEmits } from '../../../composables/useFocus'
@@ -41,6 +41,7 @@ export default defineComponent({
 
   setup (props, { emit }) {
     const rootElement = ref<HTMLElement>()
+    const cellElementHeight = ref(30)
 
     // Will be used later, after fix 'withConfigTransport'
     const { focus, blur } = useFocus(rootElement, emit)
@@ -49,25 +50,20 @@ export default defineComponent({
 
     watch(syncActiveItemIndex, (newVal) => { scrollTo(newVal) })
 
-    onMounted(() => scrollTo(syncActiveItemIndex.value, false))
+    onMounted(() => {
+      if (rootElement.value) {
+        // 170 here it's a sum of gaps from "before" and "after" pseudo elements
+        cellElementHeight.value = (rootElement.value!.scrollHeight - 170) / props.items.length
+      }
+
+      scrollTo(syncActiveItemIndex.value, false)
+    })
 
     const scrollTo = (index: number, animate = true) => {
       nextTick(() => {
-        const children = rootElement.value!.children
-
-        const element = children[index] as HTMLElement
-
-        if (!element) {
-          rootElement.value?.scrollTo({
-            behavior: animate ? 'smooth' : 'auto',
-            top: 0,
-          })
-          return
-        }
-
         rootElement.value?.scrollTo({
           behavior: animate ? 'smooth' : 'auto',
-          top: element.offsetTop - element.parentElement!.offsetTop,
+          top: index * cellElementHeight.value,
         })
       })
     }
@@ -97,12 +93,29 @@ export default defineComponent({
       return n < 10 ? `0${n}` : `${n}`
     }
 
+    const getIndex = () => {
+      const scrollTop = rootElement.value!.scrollTop
+      const scrollBarHeight = rootElement.value!.offsetHeight
+
+      return Math.round((scrollTop - (scrollBarHeight * 0.5 - 10) / cellElementHeight.value + 3) / cellElementHeight.value)
+    }
+
+    const debounceScroll = () => debounce(() => {
+      syncActiveItemIndex.value = getIndex()
+      scrollTo(syncActiveItemIndex.value)
+    }, 200)()
+
+    const onScroll = () => {
+      debounceScroll()
+    }
+
     return {
       rootElement,
 
       makeActiveNext,
       makeActivePrev,
       makeActiveByIndex,
+      onScroll,
 
       onCellClick,
       formatCell,
@@ -139,6 +152,14 @@ export default defineComponent({
     height: 100%;
     border-right: var(--va-time-picker-column-border-right);
 
+    &::before,
+    &::after, {
+      content: "";
+      display: block;
+      height: 85px;
+      width: 100%;
+    }
+
     &:last-child {
       border-right: 0;
     }

From 83e95ab96f49f76e424a5ec4c314755186bac275 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 12:09:44 +0500
Subject: [PATCH 03/38] feat: rename function

---
 .../va-time-picker/components/VaTimePickerColumn.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
index 1aea8d7def..d9775d14d0 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
@@ -100,13 +100,13 @@ export default defineComponent({
       return Math.round((scrollTop - (scrollBarHeight * 0.5 - 10) / cellElementHeight.value + 3) / cellElementHeight.value)
     }
 
-    const debounceScroll = () => debounce(() => {
+    const debouncedScroll = () => debounce(() => {
       syncActiveItemIndex.value = getIndex()
       scrollTo(syncActiveItemIndex.value)
     }, 200)()
 
     const onScroll = () => {
-      debounceScroll()
+      debouncedScroll()
     }
 
     return {

From 061e0babb0e96f605989d8d650e050ed4eed3a08 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 13:00:13 +0500
Subject: [PATCH 04/38] feat: refactor debounced scroll function

feat: remove animated scroll
---
 .../components/VaTimePickerColumn.vue               | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
index d9775d14d0..621dc612a9 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
@@ -56,15 +56,12 @@ export default defineComponent({
         cellElementHeight.value = (rootElement.value!.scrollHeight - 170) / props.items.length
       }
 
-      scrollTo(syncActiveItemIndex.value, false)
+      scrollTo(syncActiveItemIndex.value)
     })
 
-    const scrollTo = (index: number, animate = true) => {
+    const scrollTo = (index: number) => {
       nextTick(() => {
-        rootElement.value?.scrollTo({
-          behavior: animate ? 'smooth' : 'auto',
-          top: index * cellElementHeight.value,
-        })
+        rootElement.value!.scrollTop = index * cellElementHeight.value
       })
     }
 
@@ -100,10 +97,10 @@ export default defineComponent({
       return Math.round((scrollTop - (scrollBarHeight * 0.5 - 10) / cellElementHeight.value + 3) / cellElementHeight.value)
     }
 
-    const debouncedScroll = () => debounce(() => {
+    const debouncedScroll = debounce(() => {
       syncActiveItemIndex.value = getIndex()
       scrollTo(syncActiveItemIndex.value)
-    }, 200)()
+    }, 200)
 
     const onScroll = () => {
       debouncedScroll()

From fa125b79fcc5ea16747661efee3972b3a8f9b9fb Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 13:04:57 +0500
Subject: [PATCH 05/38] feat: add component property description

---
 packages/docs/src/locales/en/en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 2916baccc1..d2901151c0 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1139,7 +1139,8 @@
         "minutesFilter": "Function that allows you to hide some specific minutes",
         "secondsFilter": "Function that allows you to hide some specific seconds",
         "view": "View specifying which columns will be shown",
-        "periodUpdatesModelValue": "If user will change period it will automatically update model value. You can turn off it and am/pm switch will only change view."
+        "periodUpdatesModelValue": "If user will change period it will automatically update model value. You can turn off it and am/pm switch will only change view.",
+        "framed": "Adds borders to center of the picker"
       },
       "events": {},
       "methods": {},

From 7075d26d47b7ec0b1956ca405e581610669cb084 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 13:12:29 +0500
Subject: [PATCH 06/38] feat: add props translation

---
 packages/docs/src/locales/ru/ru.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 2284919100..52bb1ff1c5 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1120,7 +1120,14 @@
       "slots": {}
     },
     "VaTimePicker": {
-      "props": {},
+      "props": {
+        "ampm": "12 часовой формат.",
+        "hoursFilter": "Функция, позволяющая скрыть определенные часы",
+        "minutesFilter": "Функция, позволяющая скрыть определенные минуты",
+        "secondsFilter": "Функция, позволяющая скрыть определенные секунды",
+        "view": "Отображение только выбранных колонок",
+        "periodUpdatesModelValue": "Изменение периода времен автоматически обновит model value при переключении AM/PM"
+      },
       "events": {},
       "methods": {},
       "slots": {}

From 59d424e716b97aa27064d95b6aa0697b56927552 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 13:14:58 +0500
Subject: [PATCH 07/38] feat: add translation to framed property

---
 packages/docs/src/locales/ru/ru.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 52bb1ff1c5..0d87bca91a 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1126,7 +1126,8 @@
         "minutesFilter": "Функция, позволяющая скрыть определенные минуты",
         "secondsFilter": "Функция, позволяющая скрыть определенные секунды",
         "view": "Отображение только выбранных колонок",
-        "periodUpdatesModelValue": "Изменение периода времен автоматически обновит model value при переключении AM/PM"
+        "periodUpdatesModelValue": "Изменение периода времен автоматически обновит model value при переключении AM/PM",
+        "framed": "Добавляет рамки по центру компонента для выделения выбранных значений"
       },
       "events": {},
       "methods": {},

From 51310540ac4c8383fce72ec12429d1af6da5e601 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 13:21:36 +0500
Subject: [PATCH 08/38] feat: add framed property usage example

---
 packages/docs/src/locales/en/en.json              |  4 ++++
 packages/docs/src/locales/ru/ru.json              |  4 ++++
 .../ui-elements/time-picker/examples/framed.vue   | 15 +++++++++++++++
 .../ui-elements/time-picker/page-config.ts        |  6 ++++++
 4 files changed, 29 insertions(+)
 create mode 100644 packages/docs/src/page-configs/ui-elements/time-picker/examples/framed.vue

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index d2901151c0..77033e8c90 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -3856,6 +3856,10 @@
         "title": "Default",
         "text": ""
       },
+      "framed": {
+        "title": "Framed",
+        "text": ""
+      },
       "readonlyAndDisabled": {
         "title": "Readonly and disabled",
         "text": ""
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 0d87bca91a..11e8f5e675 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -3740,6 +3740,10 @@
         "title": "Базовое использование",
         "text": ""
       },
+      "framed": {
+        "title": "Рамки",
+        "text": ""
+      },
       "readonlyAndDisabled": {
         "title": "Только для чтения и отключение",
         "text": ""
diff --git a/packages/docs/src/page-configs/ui-elements/time-picker/examples/framed.vue b/packages/docs/src/page-configs/ui-elements/time-picker/examples/framed.vue
new file mode 100644
index 0000000000..c60aca7143
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/time-picker/examples/framed.vue
@@ -0,0 +1,15 @@
+<template>
+  <h6>{{ value.getHours() }}:{{ value.getMinutes() }}:{{ value.getSeconds() }}</h6>
+
+  <va-time-picker v-model="value" framed />
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: new Date(),
+    }
+  },
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts b/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
index dfbf83f0a2..6e4f2aac14 100644
--- a/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
@@ -16,6 +16,12 @@ const config: ApiDocsBlock[] = [
     'default',
   ),
 
+  ...block.exampleBlock(
+    'timePicker.examples.framed.title',
+    'timePicker.examples.framed.text',
+    'framed',
+  ),
+
   ...block.exampleBlock(
     'timePicker.examples.readonlyAndDisabled.title',
     'timePicker.examples.readonlyAndDisabled.text',

From 954b10eaa14015946e2773a1448a17c0591edfc1 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 13:33:26 +0500
Subject: [PATCH 09/38] feat: rename VaTimePickerColumn directory

---
 packages/ui/src/components/va-time-picker/VaTimePicker.vue      | 2 +-
 .../{components => VaTimePickerColumn}/VaTimePickerColumn.vue   | 0
 .../{components => VaTimePickerColumn}/_variables.scss          | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/ui/src/components/va-time-picker/{components => VaTimePickerColumn}/VaTimePickerColumn.vue (100%)
 rename packages/ui/src/components/va-time-picker/{components => VaTimePickerColumn}/_variables.scss (100%)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 108d14a759..6b70c9cb8d 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, PropType } from 'vue'
 import { useTimePicker } from './hooks/useTimePicker'
-import VaTimePickerColumn from './components/VaTimePickerColumn.vue'
+import VaTimePickerColumn from './VaTimePickerColumn/VaTimePickerColumn.vue'
 import { useStateful, useStatefulEmits, useStatefulProps } from '../../composables/useStateful'
 import { useFormProps, useForm } from '../../composables/useForm'
 import { useArrayRefs } from '../../composables/useArrayRefs'
diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
similarity index 100%
rename from packages/ui/src/components/va-time-picker/components/VaTimePickerColumn.vue
rename to packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
diff --git a/packages/ui/src/components/va-time-picker/components/_variables.scss b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/_variables.scss
similarity index 100%
rename from packages/ui/src/components/va-time-picker/components/_variables.scss
rename to packages/ui/src/components/va-time-picker/VaTimePickerColumn/_variables.scss

From dc6e0371ca67379d9748fbdb7fa230c7046ecd42 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 16:23:51 +0500
Subject: [PATCH 10/38] feat: update component export/import

---
 packages/ui/src/components/va-time-picker/VaTimePicker.vue    | 2 +-
 .../src/components/va-time-picker/VaTimePickerColumn/index.ts | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/va-time-picker/VaTimePickerColumn/index.ts

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 6b70c9cb8d..a22c8a5120 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, PropType } from 'vue'
 import { useTimePicker } from './hooks/useTimePicker'
-import VaTimePickerColumn from './VaTimePickerColumn/VaTimePickerColumn.vue'
+import VaTimePickerColumn from './VaTimePickerColumn'
 import { useStateful, useStatefulEmits, useStatefulProps } from '../../composables/useStateful'
 import { useFormProps, useForm } from '../../composables/useForm'
 import { useArrayRefs } from '../../composables/useArrayRefs'
diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/index.ts b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/index.ts
new file mode 100644
index 0000000000..5d923f18c1
--- /dev/null
+++ b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/index.ts
@@ -0,0 +1,4 @@
+import withConfigTransport from '../../../services/config-transport/withConfigTransport'
+import VaTimePickerColumn from './VaTimePickerColumn.vue'
+
+export default withConfigTransport(VaTimePickerColumn)

From e0e7f08e9db6b1e6428f919895b312cacc071e0d Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 20 May 2022 18:31:33 +0500
Subject: [PATCH 11/38] fix: fix scroll flickering

---
 .../VaTimePickerColumn/VaTimePickerColumn.vue        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
index 621dc612a9..1c92ff61e0 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -98,13 +98,15 @@ export default defineComponent({
     }
 
     const debouncedScroll = debounce(() => {
-      syncActiveItemIndex.value = getIndex()
-      scrollTo(syncActiveItemIndex.value)
+      const idx = getIndex()
+
+      if (idx !== syncActiveItemIndex.value) {
+        syncActiveItemIndex.value = idx
+        scrollTo(syncActiveItemIndex.value)
+      }
     }, 200)
 
-    const onScroll = () => {
-      debouncedScroll()
-    }
+    const onScroll = () => debouncedScroll()
 
     return {
       rootElement,

From 24a6ff5afd4f85dc1db800fad19a6f25c689beaf Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 12:45:23 +0500
Subject: [PATCH 12/38] feat: remove nested computed properties

feat: set to the frame cell height from a variable
---
 .../ui/src/components/va-time-picker/VaTimePicker.vue    | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index a22c8a5120..7437a84e72 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -20,7 +20,7 @@ import { defineComponent, ref, computed, PropType } from 'vue'
 import { useTimePicker } from './hooks/useTimePicker'
 import VaTimePickerColumn from './VaTimePickerColumn'
 import { useStateful, useStatefulEmits, useStatefulProps } from '../../composables/useStateful'
-import { useFormProps, useForm } from '../../composables/useForm'
+import { useFormProps } from '../../composables/useForm'
 import { useArrayRefs } from '../../composables/useArrayRefs'
 
 export default defineComponent({
@@ -60,8 +60,6 @@ export default defineComponent({
       idx ? pickers.value[idx]?.blur() : pickers.value.forEach((el) => el?.blur())
     }
 
-    const { createComputedClass } = useForm(props)
-
     const focusNext = () => {
       const nextIndex = (activeColumnIndex?.value || 0) + 1
       activeColumnIndex.value = nextIndex % columns.value.length
@@ -75,7 +73,8 @@ export default defineComponent({
     }
 
     const computedClass = computed(() => ({
-      ...createComputedClass('va-time-picker').value,
+      'va-time-picker--disabled': props.disabled,
+      'va-time-picker--readonly': props.readonly,
       'va-time-picker--framed': props.framed,
     }))
 
@@ -134,7 +133,7 @@ export default defineComponent({
 
       &::before {
         content: "";
-        height: 30px;
+        height: var(--va-time-picker-cell-height);
         width: 100%;
         position: absolute;
         top: 50%;

From a6092dce36a217fd45938c43d4529a6f4a95b96a Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 13:28:42 +0500
Subject: [PATCH 13/38] feat: add column vertical gap variable, remove cell
 height variable

---
 .../va-time-picker/VaTimePickerColumn/_variables.scss           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/_variables.scss b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/_variables.scss
index f9698deb9b..cb87d59bba 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/_variables.scss
+++ b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/_variables.scss
@@ -1,6 +1,6 @@
 .va-time-picker-column {
   --va-time-picker-column-border-right: 1px solid var(--va-divider);
-  --va-time-picker-cell-height: 30px;
+  --va-time-picker-column-gap-height: 85px;
   --va-time-picker-cell-width: 40px;
   --va-time-picker-cell-cursor: pointer;
   --va-time-picker-cell-active-background: var(--va-primary);

From def65a28b20cd90484f5b5c568992256c524e5df Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 13:29:38 +0500
Subject: [PATCH 14/38] feat: add time picker cell height variable

---
 packages/ui/src/components/va-time-picker/_variables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/va-time-picker/_variables.scss b/packages/ui/src/components/va-time-picker/_variables.scss
index e06e85efdb..cafe8cbd87 100644
--- a/packages/ui/src/components/va-time-picker/_variables.scss
+++ b/packages/ui/src/components/va-time-picker/_variables.scss
@@ -1,5 +1,6 @@
 .va-time-picker {
   --va-time-picker-display: inline-flex;
   --va-time-picker-height: 200px;
+  --va-time-picker-cell-height: 30px;
   --va-time-picker-disabled-opacity: 0.4;
 }

From f9c06a349f9553a1ac696a02ca087054d784ae83 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 14:05:15 +0500
Subject: [PATCH 15/38] feat: refactoring

---
 .../VaTimePickerColumn/VaTimePickerColumn.vue      | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
index 1c92ff61e0..c3f0ea6f60 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import debounce from 'lodash/debounce'
+import debounce from 'lodash/debounce.js'
 import { defineComponent, nextTick, onMounted, PropType, ref, watch } from 'vue'
 import { useSyncProp } from '../../../composables/useSyncProp'
 import { useFocus, useFocusEmits } from '../../../composables/useFocus'
@@ -152,10 +152,10 @@ export default defineComponent({
     border-right: var(--va-time-picker-column-border-right);
 
     &::before,
-    &::after, {
+    &::after {
       content: "";
       display: block;
-      height: 85px;
+      height: var(--va-time-picker-column-gap-height);
       width: 100%;
     }
 
@@ -189,14 +189,6 @@ export default defineComponent({
         }
       }
 
-      &--fake {
-        visibility: hidden;
-
-        &:last-child {
-          height: calc(100% - var(--va-time-picker-cell-height) * 2);
-        }
-      }
-
       &:hover {
         background: var(--va-time-picker-cell-background-color-hover);
       }

From d461ca8f161bbafdfafefca8b1f2e3711181e29a Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 14:17:02 +0500
Subject: [PATCH 16/38] feat: remove redundant datasets

---
 .../va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
index c3f0ea6f60..a4c9fd469e 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -12,8 +12,6 @@
       v-for="(item, index) in items" :key="item"
       class="va-time-picker-cell"
       :class="{ 'va-time-picker-cell--active': index === $props.activeItemIndex }"
-      :data-index="index"
-      :data-item="item"
       @click="onCellClick(index)"
     >
       <slot name="cell" v-bind="{ item, index, activeItemIndex, items, formattedItem: formatCell(item) }">

From ace6564d201969baeb3c846f773697d73f01f893 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 16:15:01 +0500
Subject: [PATCH 17/38] feat: move types to the separate file and folder

---
 .../va-time-picker/hooks/useTimePicker.ts        | 16 +---------------
 .../src/components/va-time-picker/types/index.ts | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 15 deletions(-)
 create mode 100644 packages/ui/src/components/va-time-picker/types/index.ts

diff --git a/packages/ui/src/components/va-time-picker/hooks/useTimePicker.ts b/packages/ui/src/components/va-time-picker/hooks/useTimePicker.ts
index ccbd85ab4d..dd6cc85dcd 100644
--- a/packages/ui/src/components/va-time-picker/hooks/useTimePicker.ts
+++ b/packages/ui/src/components/va-time-picker/hooks/useTimePicker.ts
@@ -1,19 +1,5 @@
 import { computed, ref, Ref, toRefs, watch } from 'vue'
-
-interface TimePickerProps {
-  ampm: boolean;
-  hidePeriodSwitch: boolean;
-  periodUpdatesModelValue: boolean;
-  view: 'hours' | 'minutes' | 'seconds';
-  modelValue?: Date;
-  hoursFilter?: (h: number) => boolean,
-  minutesFilter?: (h: number) => boolean
-  secondsFilter?: (h: number) => boolean
-
-  readonly?: boolean;
-}
-
-type ModelValueRef = Ref<Date | null | undefined>
+import { TimePickerProps, ModelValueRef } from '../types'
 
 // Use safeModelValue if we need to update model value
 const safeModelValue = (m: ModelValueRef) => m.value ? m.value : new Date(new Date().setHours(0, 0, 0, 0))
diff --git a/packages/ui/src/components/va-time-picker/types/index.ts b/packages/ui/src/components/va-time-picker/types/index.ts
new file mode 100644
index 0000000000..1d3e42024c
--- /dev/null
+++ b/packages/ui/src/components/va-time-picker/types/index.ts
@@ -0,0 +1,15 @@
+import { Ref } from 'vue'
+
+export interface TimePickerProps {
+  ampm: boolean;
+  hidePeriodSwitch: boolean;
+  periodUpdatesModelValue: boolean;
+  view: 'hours' | 'minutes' | 'seconds';
+  modelValue?: Date;
+  hoursFilter?: (h: number) => boolean,
+  minutesFilter?: (h: number) => boolean
+  secondsFilter?: (h: number) => boolean
+
+  readonly?: boolean;
+}
+export type ModelValueRef = Ref<Date | null | undefined>

From c9015bd6be58431ab40de795195564640c207646 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 16:48:50 +0500
Subject: [PATCH 18/38] feat: rewrite height constants to the component props

---
 packages/docs/src/locales/en/en.json          |  3 ++-
 packages/docs/src/locales/ru/ru.json          |  3 ++-
 .../va-time-picker/VaTimePicker.vue           |  6 ++++-
 .../VaTimePickerColumn/VaTimePickerColumn.vue | 22 +++++++------------
 .../components/va-time-picker/_variables.scss |  1 -
 5 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 77033e8c90..ee0dc8a521 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1140,7 +1140,8 @@
         "secondsFilter": "Function that allows you to hide some specific seconds",
         "view": "View specifying which columns will be shown",
         "periodUpdatesModelValue": "If user will change period it will automatically update model value. You can turn off it and am/pm switch will only change view.",
-        "framed": "Adds borders to center of the picker"
+        "framed": "Adds borders to center of the picker",
+        "cellHeight": "Height of the time cell"
       },
       "events": {},
       "methods": {},
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 11e8f5e675..746d30df80 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1127,7 +1127,8 @@
         "secondsFilter": "Функция, позволяющая скрыть определенные секунды",
         "view": "Отображение только выбранных колонок",
         "periodUpdatesModelValue": "Изменение периода времен автоматически обновит model value при переключении AM/PM",
-        "framed": "Добавляет рамки по центру компонента для выделения выбранных значений"
+        "framed": "Добавляет рамки по центру компонента для выделения выбранных значений",
+        "cellHeight": "Высота ячейки времени"
       },
       "events": {},
       "methods": {},
diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 7437a84e72..75f403782c 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -5,6 +5,7 @@
       :ref="setItemRef"
       :items="column.items"
       :tabindex="disabled ? -1 : 0"
+      :cell-height="$props.cellHeight"
       v-model:activeItemIndex="column.activeItem.value"
       @keydown.right.stop.prevent="focusNext()"
       @keydown.tab.exact.stop.prevent="focusNext()"
@@ -40,6 +41,7 @@ export default defineComponent({
     minutesFilter: { type: Function as PropType<(h: number) => boolean> },
     secondsFilter: { type: Function as PropType<(h: number) => boolean> },
     framed: { type: Boolean, default: false },
+    cellHeight: { type: Number, default: 30 },
   },
 
   emits: useStatefulEmits,
@@ -72,6 +74,7 @@ export default defineComponent({
       focus(activeColumnIndex.value)
     }
 
+    const computedCellHeight = computed(() => `${props.cellHeight}px`)
     const computedClass = computed(() => ({
       'va-time-picker--disabled': props.disabled,
       'va-time-picker--readonly': props.readonly,
@@ -81,6 +84,7 @@ export default defineComponent({
     return {
       columns,
       computedClass,
+      computedCellHeight,
       isPM,
       pickers,
       setItemRef,
@@ -133,7 +137,7 @@ export default defineComponent({
 
       &::before {
         content: "";
-        height: var(--va-time-picker-cell-height);
+        height: v-bind(computedcellheight);
         width: 100%;
         position: absolute;
         top: 50%;
diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
index a4c9fd469e..dac2a2045c 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import debounce from 'lodash/debounce.js'
-import { defineComponent, nextTick, onMounted, PropType, ref, watch } from 'vue'
+import { defineComponent, nextTick, ref, watch, computed, onMounted, PropType } from 'vue'
 import { useSyncProp } from '../../../composables/useSyncProp'
 import { useFocus, useFocusEmits } from '../../../composables/useFocus'
 
@@ -33,29 +33,21 @@ export default defineComponent({
   props: {
     items: { type: Array as PropType<string[] | number[]>, default: () => [] },
     activeItemIndex: { type: Number, default: 0 },
+    cellHeight: { type: Number, default: 30 },
   },
 
   emits: ['item-selected', 'update:activeItemIndex', ...useFocusEmits],
 
   setup (props, { emit }) {
     const rootElement = ref<HTMLElement>()
-    const cellElementHeight = ref(30)
-
+    const cellElementHeight = ref(props.cellHeight)
     // Will be used later, after fix 'withConfigTransport'
     const { focus, blur } = useFocus(rootElement, emit)
-
     const [syncActiveItemIndex] = useSyncProp('activeItemIndex', props, emit)
 
     watch(syncActiveItemIndex, (newVal) => { scrollTo(newVal) })
 
-    onMounted(() => {
-      if (rootElement.value) {
-        // 170 here it's a sum of gaps from "before" and "after" pseudo elements
-        cellElementHeight.value = (rootElement.value!.scrollHeight - 170) / props.items.length
-      }
-
-      scrollTo(syncActiveItemIndex.value)
-    })
+    onMounted(() => scrollTo(syncActiveItemIndex.value))
 
     const scrollTo = (index: number) => {
       nextTick(() => {
@@ -92,7 +84,7 @@ export default defineComponent({
       const scrollTop = rootElement.value!.scrollTop
       const scrollBarHeight = rootElement.value!.offsetHeight
 
-      return Math.round((scrollTop - (scrollBarHeight * 0.5 - 10) / cellElementHeight.value + 3) / cellElementHeight.value)
+      return Math.round((scrollTop - (scrollBarHeight * 0.5) / cellElementHeight.value) / cellElementHeight.value)
     }
 
     const debouncedScroll = debounce(() => {
@@ -105,9 +97,11 @@ export default defineComponent({
     }, 200)
 
     const onScroll = () => debouncedScroll()
+    const computedCellHeight = computed(() => `${props.cellHeight}px`)
 
     return {
       rootElement,
+      computedCellHeight,
 
       makeActiveNext,
       makeActivePrev,
@@ -162,7 +156,7 @@ export default defineComponent({
     }
 
     .va-time-picker-cell {
-      height: var(--va-time-picker-cell-height);
+      height: v-bind(computedcellheight);
       line-height: var(--va-time-picker-cell-height);
       width: var(--va-time-picker-cell-width);
       text-align: center;
diff --git a/packages/ui/src/components/va-time-picker/_variables.scss b/packages/ui/src/components/va-time-picker/_variables.scss
index cafe8cbd87..e06e85efdb 100644
--- a/packages/ui/src/components/va-time-picker/_variables.scss
+++ b/packages/ui/src/components/va-time-picker/_variables.scss
@@ -1,6 +1,5 @@
 .va-time-picker {
   --va-time-picker-display: inline-flex;
   --va-time-picker-height: 200px;
-  --va-time-picker-cell-height: 30px;
   --va-time-picker-disabled-opacity: 0.4;
 }

From 236e685ade2a30095ca82f6e3d393d64553443db Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 18:53:37 +0500
Subject: [PATCH 19/38] fix: remove v-bind, set variable cell height through
 css variable in the root tag

---
 .../ui/src/components/va-time-picker/VaTimePicker.vue  | 10 ++++++----
 .../VaTimePickerColumn/VaTimePickerColumn.vue          |  4 +---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 75f403782c..77c5113b57 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="va-time-picker" :class="computedClass">
+  <div
+    class="va-time-picker"
+    :class="computedClass"
+    :style="{ '--va-time-picker-cell-height': `${$props.cellHeight}px` }"
+  >
     <VaTimePickerColumn
       v-for="(column, idx) in columns" :key="idx"
       :ref="setItemRef"
@@ -74,7 +78,6 @@ export default defineComponent({
       focus(activeColumnIndex.value)
     }
 
-    const computedCellHeight = computed(() => `${props.cellHeight}px`)
     const computedClass = computed(() => ({
       'va-time-picker--disabled': props.disabled,
       'va-time-picker--readonly': props.readonly,
@@ -84,7 +87,6 @@ export default defineComponent({
     return {
       columns,
       computedClass,
-      computedCellHeight,
       isPM,
       pickers,
       setItemRef,
@@ -137,7 +139,7 @@ export default defineComponent({
 
       &::before {
         content: "";
-        height: v-bind(computedcellheight);
+        height: var(--va-time-picker-cell-height);
         width: 100%;
         position: absolute;
         top: 50%;
diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
index dac2a2045c..124bf1d9d3 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -97,11 +97,9 @@ export default defineComponent({
     }, 200)
 
     const onScroll = () => debouncedScroll()
-    const computedCellHeight = computed(() => `${props.cellHeight}px`)
 
     return {
       rootElement,
-      computedCellHeight,
 
       makeActiveNext,
       makeActivePrev,
@@ -156,7 +154,7 @@ export default defineComponent({
     }
 
     .va-time-picker-cell {
-      height: v-bind(computedcellheight);
+      height: var(--va-time-picker-cell-height);
       line-height: var(--va-time-picker-cell-height);
       width: var(--va-time-picker-cell-width);
       text-align: center;

From 6a3f6893c8e693d9cc782679ca2e4a81fbea691b Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 23 May 2022 19:12:48 +0500
Subject: [PATCH 20/38] feat: restore animation

---
 .../VaTimePickerColumn/VaTimePickerColumn.vue | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
index 124bf1d9d3..fd7dddf159 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -23,10 +23,15 @@
 
 <script lang="ts">
 import debounce from 'lodash/debounce.js'
-import { defineComponent, nextTick, ref, watch, computed, onMounted, PropType } from 'vue'
+import { defineComponent, nextTick, ref, watch, onMounted, PropType } from 'vue'
 import { useSyncProp } from '../../../composables/useSyncProp'
 import { useFocus, useFocusEmits } from '../../../composables/useFocus'
 
+type ScrollToProps = {
+  index: number,
+  animated?: boolean,
+}
+
 export default defineComponent({
   name: 'VaTimePickerColumn',
 
@@ -45,33 +50,43 @@ export default defineComponent({
     const { focus, blur } = useFocus(rootElement, emit)
     const [syncActiveItemIndex] = useSyncProp('activeItemIndex', props, emit)
 
-    watch(syncActiveItemIndex, (newVal) => { scrollTo(newVal) })
+    watch(syncActiveItemIndex, (newVal) => { scrollTo({ index: newVal }) })
+
+    onMounted(() => scrollTo({ animated: false, index: syncActiveItemIndex.value }))
+
+    const scrollTo = ({ index, animated = true }: ScrollToProps) => {
+      const scrollTopValue = index * cellElementHeight.value
+
+      const defaultScroll = () => {
+        rootElement.value!.scrollTop = scrollTopValue
+      }
 
-    onMounted(() => scrollTo(syncActiveItemIndex.value))
+      const animatedScroll = () => {
+        rootElement.value!.scrollTo({ behavior: animated ? 'smooth' : 'auto', top: scrollTopValue })
+      }
 
-    const scrollTo = (index: number) => {
-      nextTick(() => {
-        rootElement.value!.scrollTop = index * cellElementHeight.value
-      })
+      nextTick(animated ? animatedScroll : defaultScroll)
     }
 
     const makeActiveByIndex = (index: number) => {
       syncActiveItemIndex.value = index
-      nextTick(() => scrollTo(syncActiveItemIndex.value))
+      nextTick(() => scrollTo({ index: syncActiveItemIndex.value }))
     }
 
     const makeActiveNext = (times?: number) => {
       syncActiveItemIndex.value = (syncActiveItemIndex.value + (times || 1)) % props.items.length
-      nextTick(() => scrollTo(syncActiveItemIndex.value))
+      nextTick(() => scrollTo({ index: syncActiveItemIndex.value }))
     }
 
     const makeActivePrev = (times?: number) => {
       syncActiveItemIndex.value = (syncActiveItemIndex.value - (times || 1) + props.items.length) % props.items.length
-      nextTick(() => scrollTo(syncActiveItemIndex.value))
+      nextTick(() => scrollTo({ index: syncActiveItemIndex.value }))
     }
 
     const onCellClick = (index: number) => {
       syncActiveItemIndex.value = index
+
+      scrollTo({ index: syncActiveItemIndex.value })
     }
 
     const formatCell = (n: number | string): string => {
@@ -92,7 +107,8 @@ export default defineComponent({
 
       if (idx !== syncActiveItemIndex.value) {
         syncActiveItemIndex.value = idx
-        scrollTo(syncActiveItemIndex.value)
+
+        nextTick(() => scrollTo({ animated: false, index: syncActiveItemIndex.value }))
       }
     }, 200)
 

From a3ee168d541463b1b89d71fa7f8621f3d6232595 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Tue, 24 May 2022 16:46:11 +0500
Subject: [PATCH 21/38] feat: refactor styles

---
 packages/ui/src/components/va-time-picker/VaTimePicker.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 77c5113b57..2af9490da5 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -2,7 +2,7 @@
   <div
     class="va-time-picker"
     :class="computedClass"
-    :style="{ '--va-time-picker-cell-height': `${$props.cellHeight}px` }"
+    :style="computedStyles"
   >
     <VaTimePickerColumn
       v-for="(column, idx) in columns" :key="idx"
@@ -84,9 +84,14 @@ export default defineComponent({
       'va-time-picker--framed': props.framed,
     }))
 
+    const computedStyles = computed(() => ({
+      '--va-time-picker-cell-height': `${props.cellHeight}px`,
+    }))
+
     return {
       columns,
       computedClass,
+      computedStyles,
       isPM,
       pickers,
       setItemRef,

From 81eb2f1fdb4b6c1253b7dec5b9d8d973b2d1dc96 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Tue, 24 May 2022 17:37:19 +0500
Subject: [PATCH 22/38] feat: move child component to the components folder

---
 packages/ui/src/components/va-time-picker/VaTimePicker.vue  | 2 +-
 .../VaTimePickerColumn/VaTimePickerColumn.vue               | 6 +++---
 .../{ => components}/VaTimePickerColumn/_variables.scss     | 0
 .../{ => components}/VaTimePickerColumn/index.ts            | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/ui/src/components/va-time-picker/{ => components}/VaTimePickerColumn/VaTimePickerColumn.vue (97%)
 rename packages/ui/src/components/va-time-picker/{ => components}/VaTimePickerColumn/_variables.scss (100%)
 rename packages/ui/src/components/va-time-picker/{ => components}/VaTimePickerColumn/index.ts (55%)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 2af9490da5..a6ec4c0ff8 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, PropType } from 'vue'
 import { useTimePicker } from './hooks/useTimePicker'
-import VaTimePickerColumn from './VaTimePickerColumn'
+import VaTimePickerColumn from './components/VaTimePickerColumn'
 import { useStateful, useStatefulEmits, useStatefulProps } from '../../composables/useStateful'
 import { useFormProps } from '../../composables/useForm'
 import { useArrayRefs } from '../../composables/useArrayRefs'
diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
similarity index 97%
rename from packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
rename to packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index fd7dddf159..be43167169 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -24,8 +24,8 @@
 <script lang="ts">
 import debounce from 'lodash/debounce.js'
 import { defineComponent, nextTick, ref, watch, onMounted, PropType } from 'vue'
-import { useSyncProp } from '../../../composables/useSyncProp'
-import { useFocus, useFocusEmits } from '../../../composables/useFocus'
+import { useSyncProp } from '../../../../composables/useSyncProp'
+import { useFocus, useFocusEmits } from '../../../../composables/useFocus'
 
 type ScrollToProps = {
   index: number,
@@ -140,7 +140,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-  @import './_variables.scss';
+  @import 'variables';
 
   @mixin hiddenYScroll {
     overflow-y: scroll;
diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/_variables.scss b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
similarity index 100%
rename from packages/ui/src/components/va-time-picker/VaTimePickerColumn/_variables.scss
rename to packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
diff --git a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/index.ts b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts
similarity index 55%
rename from packages/ui/src/components/va-time-picker/VaTimePickerColumn/index.ts
rename to packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts
index 5d923f18c1..f54ddfc7ee 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePickerColumn/index.ts
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts
@@ -1,4 +1,4 @@
-import withConfigTransport from '../../../services/config-transport/withConfigTransport'
+import withConfigTransport from '../../../../services/config-transport/withConfigTransport'
 import VaTimePickerColumn from './VaTimePickerColumn.vue'
 
 export default withConfigTransport(VaTimePickerColumn)

From 9e5b9af6afbb7421b0cecea204d479f5232c4d9d Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Tue, 24 May 2022 21:07:03 +0500
Subject: [PATCH 23/38] feat: refactoring

---
 .../va-time-picker/VaTimePicker.vue           | 11 +++-
 .../VaTimePickerColumn/VaTimePickerColumn.vue | 59 +++++--------------
 .../VaTimePickerColumn/_variables.scss        |  1 -
 .../components/va-time-picker/types/index.ts  |  1 -
 4 files changed, 22 insertions(+), 50 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index a6ec4c0ff8..82d438c5b6 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -25,7 +25,7 @@ import { defineComponent, ref, computed, PropType } from 'vue'
 import { useTimePicker } from './hooks/useTimePicker'
 import VaTimePickerColumn from './components/VaTimePickerColumn'
 import { useStateful, useStatefulEmits, useStatefulProps } from '../../composables/useStateful'
-import { useFormProps } from '../../composables/useForm'
+import { useForm, useFormProps } from '../../composables/useForm'
 import { useArrayRefs } from '../../composables/useArrayRefs'
 
 export default defineComponent({
@@ -68,24 +68,29 @@ export default defineComponent({
 
     const focusNext = () => {
       const nextIndex = (activeColumnIndex?.value || 0) + 1
+
       activeColumnIndex.value = nextIndex % columns.value.length
       focus(activeColumnIndex.value)
     }
 
     const focusPrev = () => {
       const nextIndex = (activeColumnIndex?.value || 0) - 1 + columns.value.length
+
       activeColumnIndex.value = nextIndex % columns.value.length
       focus(activeColumnIndex.value)
     }
 
+    const { createComputedClass } = useForm(props)
+    const formClasses = createComputedClass('va-time-picker')
+
     const computedClass = computed(() => ({
-      'va-time-picker--disabled': props.disabled,
-      'va-time-picker--readonly': props.readonly,
+      ...formClasses.value,
       'va-time-picker--framed': props.framed,
     }))
 
     const computedStyles = computed(() => ({
       '--va-time-picker-cell-height': `${props.cellHeight}px`,
+      '--va-time-picker-column-gap-height': `calc(${props.cellHeight * 3}px - 5px)`,
     }))
 
     return {
diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index be43167169..09195774f1 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -27,11 +27,6 @@ import { defineComponent, nextTick, ref, watch, onMounted, PropType } from 'vue'
 import { useSyncProp } from '../../../../composables/useSyncProp'
 import { useFocus, useFocusEmits } from '../../../../composables/useFocus'
 
-type ScrollToProps = {
-  index: number,
-  animated?: boolean,
-}
-
 export default defineComponent({
   name: 'VaTimePickerColumn',
 
@@ -45,48 +40,36 @@ export default defineComponent({
 
   setup (props, { emit }) {
     const rootElement = ref<HTMLElement>()
-    const cellElementHeight = ref(props.cellHeight)
-    // Will be used later, after fix 'withConfigTransport'
     const { focus, blur } = useFocus(rootElement, emit)
     const [syncActiveItemIndex] = useSyncProp('activeItemIndex', props, emit)
 
-    watch(syncActiveItemIndex, (newVal) => { scrollTo({ index: newVal }) })
-
-    onMounted(() => scrollTo({ animated: false, index: syncActiveItemIndex.value }))
-
-    const scrollTo = ({ index, animated = true }: ScrollToProps) => {
-      const scrollTopValue = index * cellElementHeight.value
+    watch(syncActiveItemIndex, (newVal) => { scrollTo(newVal) })
 
-      const defaultScroll = () => {
-        rootElement.value!.scrollTop = scrollTopValue
-      }
-
-      const animatedScroll = () => {
-        rootElement.value!.scrollTo({ behavior: animated ? 'smooth' : 'auto', top: scrollTopValue })
-      }
+    onMounted(() => scrollTo(syncActiveItemIndex.value, false))
 
-      nextTick(animated ? animatedScroll : defaultScroll)
+    const scrollTo = (index: number, animated = true) => {
+      nextTick(() => {
+        rootElement.value!.scrollTo({
+          behavior: animated ? 'smooth' : 'auto',
+          top: index * props.cellHeight,
+        })
+      })
     }
 
     const makeActiveByIndex = (index: number) => {
       syncActiveItemIndex.value = index
-      nextTick(() => scrollTo({ index: syncActiveItemIndex.value }))
     }
 
     const makeActiveNext = (times?: number) => {
       syncActiveItemIndex.value = (syncActiveItemIndex.value + (times || 1)) % props.items.length
-      nextTick(() => scrollTo({ index: syncActiveItemIndex.value }))
     }
 
     const makeActivePrev = (times?: number) => {
       syncActiveItemIndex.value = (syncActiveItemIndex.value - (times || 1) + props.items.length) % props.items.length
-      nextTick(() => scrollTo({ index: syncActiveItemIndex.value }))
     }
 
     const onCellClick = (index: number) => {
       syncActiveItemIndex.value = index
-
-      scrollTo({ index: syncActiveItemIndex.value })
     }
 
     const formatCell = (n: number | string): string => {
@@ -95,25 +78,18 @@ export default defineComponent({
       return n < 10 ? `0${n}` : `${n}`
     }
 
-    const getIndex = () => {
-      const scrollTop = rootElement.value!.scrollTop
-      const scrollBarHeight = rootElement.value!.offsetHeight
+    const getIndex = () => Math.round(rootElement.value!.scrollTop / props.cellHeight)
 
-      return Math.round((scrollTop - (scrollBarHeight * 0.5) / cellElementHeight.value) / cellElementHeight.value)
-    }
+    const onScroll = debounce(() => {
+      if (!rootElement.value) { return }
 
-    const debouncedScroll = debounce(() => {
       const idx = getIndex()
 
       if (idx !== syncActiveItemIndex.value) {
         syncActiveItemIndex.value = idx
-
-        nextTick(() => scrollTo({ animated: false, index: syncActiveItemIndex.value }))
       }
     }, 200)
 
-    const onScroll = () => debouncedScroll()
-
     return {
       rootElement,
 
@@ -125,17 +101,10 @@ export default defineComponent({
       onCellClick,
       formatCell,
 
-      // Will be used later, after fix 'withConfigTransport'
-      // focus,
-      // blur,
+      focus,
+      blur,
     }
   },
-
-  // we will use this while we have problem with 'withConfigTransport'
-  methods: {
-    focus () { (this as any).rootElement?.focus() },
-    blur () { (this as any).rootElement?.blur() },
-  },
 })
 </script>
 
diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
index cb87d59bba..65a2ed01ca 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
@@ -1,6 +1,5 @@
 .va-time-picker-column {
   --va-time-picker-column-border-right: 1px solid var(--va-divider);
-  --va-time-picker-column-gap-height: 85px;
   --va-time-picker-cell-width: 40px;
   --va-time-picker-cell-cursor: pointer;
   --va-time-picker-cell-active-background: var(--va-primary);
diff --git a/packages/ui/src/components/va-time-picker/types/index.ts b/packages/ui/src/components/va-time-picker/types/index.ts
index 1d3e42024c..f0f759a689 100644
--- a/packages/ui/src/components/va-time-picker/types/index.ts
+++ b/packages/ui/src/components/va-time-picker/types/index.ts
@@ -9,7 +9,6 @@ export interface TimePickerProps {
   hoursFilter?: (h: number) => boolean,
   minutesFilter?: (h: number) => boolean
   secondsFilter?: (h: number) => boolean
-
   readonly?: boolean;
 }
 export type ModelValueRef = Ref<Date | null | undefined>

From a1b546c75d7c3f2decb4f42dbfd67135e888c4c0 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 25 May 2022 12:14:25 +0500
Subject: [PATCH 24/38] feat: refactor semicolons

---
 .../src/components/va-time-picker/types/index.ts   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/types/index.ts b/packages/ui/src/components/va-time-picker/types/index.ts
index f0f759a689..c2bc86cccc 100644
--- a/packages/ui/src/components/va-time-picker/types/index.ts
+++ b/packages/ui/src/components/va-time-picker/types/index.ts
@@ -1,14 +1,14 @@
 import { Ref } from 'vue'
 
 export interface TimePickerProps {
-  ampm: boolean;
-  hidePeriodSwitch: boolean;
-  periodUpdatesModelValue: boolean;
-  view: 'hours' | 'minutes' | 'seconds';
-  modelValue?: Date;
-  hoursFilter?: (h: number) => boolean,
+  ampm: boolean
+  hidePeriodSwitch: boolean
+  periodUpdatesModelValue: boolean
+  view: 'hours' | 'minutes' | 'seconds'
+  modelValue?: Date
+  hoursFilter?: (h: number) => boolean
   minutesFilter?: (h: number) => boolean
   secondsFilter?: (h: number) => boolean
-  readonly?: boolean;
+  readonly?: boolean
 }
 export type ModelValueRef = Ref<Date | null | undefined>

From d02fea0a796534583524a48c0135ac38eb9e96a1 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 25 May 2022 13:33:54 +0500
Subject: [PATCH 25/38] feat: automatically calculate height of the component

---
 .../src/components/va-time-picker/VaTimePicker.vue | 14 ++++++++++----
 .../src/components/va-time-picker/_variables.scss  |  1 -
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index 82d438c5b6..c36a395ee1 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -46,6 +46,7 @@ export default defineComponent({
     secondsFilter: { type: Function as PropType<(h: number) => boolean> },
     framed: { type: Boolean, default: false },
     cellHeight: { type: Number, default: 30 },
+    visibleCellsCount: { type: Number, default: 7 },
   },
 
   emits: useStatefulEmits,
@@ -88,10 +89,15 @@ export default defineComponent({
       'va-time-picker--framed': props.framed,
     }))
 
-    const computedStyles = computed(() => ({
-      '--va-time-picker-cell-height': `${props.cellHeight}px`,
-      '--va-time-picker-column-gap-height': `calc(${props.cellHeight * 3}px - 5px)`,
-    }))
+    const computedStyles = computed(() => {
+      const gapHeight = (props.visibleCellsCount - 1) / 2 * props.cellHeight
+
+      return {
+        '--va-time-picker-height': `${props.cellHeight * props.visibleCellsCount}px`,
+        '--va-time-picker-cell-height': `${props.cellHeight}px`,
+        '--va-time-picker-column-gap-height': `${gapHeight}px`,
+      }
+    })
 
     return {
       columns,
diff --git a/packages/ui/src/components/va-time-picker/_variables.scss b/packages/ui/src/components/va-time-picker/_variables.scss
index e06e85efdb..511d6c5710 100644
--- a/packages/ui/src/components/va-time-picker/_variables.scss
+++ b/packages/ui/src/components/va-time-picker/_variables.scss
@@ -1,5 +1,4 @@
 .va-time-picker {
   --va-time-picker-display: inline-flex;
-  --va-time-picker-height: 200px;
   --va-time-picker-disabled-opacity: 0.4;
 }

From 549fdbc75030de7ba2c7019e1ee2a624f5dbbdc8 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 25 May 2022 13:35:44 +0500
Subject: [PATCH 26/38] feat: add new prop description

feat: fix typo
---
 packages/docs/src/locales/en/en.json | 5 +++--
 packages/docs/src/locales/ru/ru.json | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index ee0dc8a521..e428dda2ca 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1134,14 +1134,15 @@
     },
     "VaTimePicker": {
       "props": {
-        "ampm": "Use 12-hours time format.",
+        "ampm": "Use 12-hours time format",
         "hoursFilter": "Function that allows you to hide some specific hours",
         "minutesFilter": "Function that allows you to hide some specific minutes",
         "secondsFilter": "Function that allows you to hide some specific seconds",
         "view": "View specifying which columns will be shown",
         "periodUpdatesModelValue": "If user will change period it will automatically update model value. You can turn off it and am/pm switch will only change view.",
         "framed": "Adds borders to center of the picker",
-        "cellHeight": "Height of the time cell"
+        "cellHeight": "Height of the time cell",
+        "visibleCellsCount": "Count of time cells to display"
       },
       "events": {},
       "methods": {},
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 746d30df80..598812af8b 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1121,14 +1121,15 @@
     },
     "VaTimePicker": {
       "props": {
-        "ampm": "12 часовой формат.",
+        "ampm": "12 часовой формат",
         "hoursFilter": "Функция, позволяющая скрыть определенные часы",
         "minutesFilter": "Функция, позволяющая скрыть определенные минуты",
         "secondsFilter": "Функция, позволяющая скрыть определенные секунды",
         "view": "Отображение только выбранных колонок",
         "periodUpdatesModelValue": "Изменение периода времен автоматически обновит model value при переключении AM/PM",
         "framed": "Добавляет рамки по центру компонента для выделения выбранных значений",
-        "cellHeight": "Высота ячейки времени"
+        "cellHeight": "Высота ячейки времени",
+        "visibleCellsCount": "Количество ячеек времени для отображения"
       },
       "events": {},
       "methods": {},

From 48b748ef4e6be7aa46705d46ac616ea0b57e5055 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 25 May 2022 14:02:25 +0500
Subject: [PATCH 27/38] feat: add prop usage example

---
 .../examples/visibleCellsCount.vue            | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 packages/docs/src/page-configs/ui-elements/time-picker/examples/visibleCellsCount.vue

diff --git a/packages/docs/src/page-configs/ui-elements/time-picker/examples/visibleCellsCount.vue b/packages/docs/src/page-configs/ui-elements/time-picker/examples/visibleCellsCount.vue
new file mode 100644
index 0000000000..1284fc257f
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/time-picker/examples/visibleCellsCount.vue
@@ -0,0 +1,21 @@
+<template>
+  <h6>{{ value.getHours() }}:{{ value.getMinutes() }}:{{ value.getSeconds() }}</h6>
+
+  <div class="d-flex">
+    <va-time-picker v-model="value" visible-cells-count="3" />
+    <va-divider vertical />
+    <va-time-picker v-model="value" visible-cells-count="8" />
+    <va-divider vertical />
+    <va-time-picker v-model="value" visible-cells-count="5" />
+    <va-divider vertical />
+    <va-time-picker v-model="value" visible-cells-count="9" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return { value: new Date() }
+  },
+}
+</script>

From af8770f105e6e7db913ef03f8f1d1b6c4dc8706c Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 25 May 2022 14:03:25 +0500
Subject: [PATCH 28/38] feat: add new property usage example to the docs

---
 packages/docs/src/locales/en/en.json                        | 4 ++++
 packages/docs/src/locales/ru/ru.json                        | 4 ++++
 .../src/page-configs/ui-elements/time-picker/page-config.ts | 6 ++++++
 3 files changed, 14 insertions(+)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index e428dda2ca..242529ac62 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -3862,6 +3862,10 @@
         "title": "Framed",
         "text": ""
       },
+      "visibleCellsCount": {
+        "title": "Controlling the count of displayed cells",
+        "text": "For the better view need to set odd numbers"
+      },
       "readonlyAndDisabled": {
         "title": "Readonly and disabled",
         "text": ""
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 598812af8b..7a57334582 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -3746,6 +3746,10 @@
         "title": "Рамки",
         "text": ""
       },
+      "visibleCellsCount": {
+        "title": "Контроль количества отображаемых ячеек",
+        "text": "Для лучшего вида, нужно задавать нечетные числа"
+      },
       "readonlyAndDisabled": {
         "title": "Только для чтения и отключение",
         "text": ""
diff --git a/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts b/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
index 6e4f2aac14..026b4d5b6b 100644
--- a/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts
@@ -22,6 +22,12 @@ const config: ApiDocsBlock[] = [
     'framed',
   ),
 
+  ...block.exampleBlock(
+    'timePicker.examples.visibleCellsCount.title',
+    'timePicker.examples.visibleCellsCount.text',
+    'visibleCellsCount',
+  ),
+
   ...block.exampleBlock(
     'timePicker.examples.readonlyAndDisabled.title',
     'timePicker.examples.readonlyAndDisabled.text',

From e1b9c31fd169a393673d4d9d4c07942fecf51e2e Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 25 May 2022 14:04:23 +0500
Subject: [PATCH 29/38] feat: refactor demo examples

feat: add framed prop usage example

feat: add visible cells count prop usage example
---
 .../va-time-picker/VaTimePicker.demo.vue      | 71 +++++++++++++++----
 1 file changed, 58 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
index f303bca989..41a4c43f0f 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
@@ -13,29 +13,43 @@
     </VbCard>
 
     <VbCard title="view">
-      <VaTimePicker v-model="value" :view="'seconds'" />
-      <br />
-      <VaTimePicker v-model="value" :view="'hours'" />
+      <div class="d-flex">
+        <VaTimePicker v-model="value" :view="'seconds'" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" :view="'hours'" />
+      </div>
     </VbCard>
 
     <VbCard title="ampm">
-      <VaTimePicker v-model="value" :ampm="ampm" />
-      <br />
-      <VaTimePicker v-model="value" :ampm="ampm" />
+      <div class="d-flex">
+        <VaTimePicker v-model="value" :ampm="ampm" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" :ampm="ampm" />
+      </div>
     </VbCard>
 
     <VbCard title="value">
-      23:05:53
-      <br />
-      {{ value.getHours() }}:{{ value.getMinutes() }}:{{ value.getSeconds() }}
+      <div class="d-flex justify--space-around">
+        <span>23:05:53</span>
+        <span>{{ selectedTime }}</span>
+      </div>
       <br />
-      <VaTimePicker v-model="value" :ampm="true" />
-      <br />
-      <VaTimePicker v-model="value" :ampm="false" :view="'seconds'" />
+      <div class="d-flex">
+        <VaTimePicker v-model="value" :ampm="true" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" :ampm="false" :view="'seconds'" />
+      </div>
     </VbCard>
 
     <VbCard title="filter">
-      <VaTimePicker v-model="value" :view="'seconds'" :ampm="false" :hoursFilter="(h) => h >= 9 && h <= 19" :minutesFilter="(m) => m % 10 === 0" :secondsFilter="(s) => s % 20 === 0" />
+      <VaTimePicker
+        v-model="value"
+        view="seconds"
+        :ampm="false"
+        :hoursFilter="(h) => h >= 9 && h <= 19"
+        :minutesFilter="(m) => m % 10 === 0"
+        :secondsFilter="(s) => s % 20 === 0"
+      />
     </VbCard>
 
     <VbCard title="readonly">
@@ -45,6 +59,26 @@
     <VbCard title="disabled">
       <VaTimePicker v-model="value" disabled />
     </VbCard>
+
+    <VbCard title="Framed">
+      <VaTimePicker v-model="value" framed />
+    </VbCard>
+
+    <VbCard title="Visible cells count">
+      <div class="d-flex justify--space-around">
+        <span>Show 2</span>
+        <span>Show 5</span>
+        <span>Show 12</span>
+      </div>
+      <br />
+      <div class="d-flex">
+        <VaTimePicker v-model="value" visible-cells-count="2" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" visible-cells-count="5" />
+        <va-divider vertical />
+        <VaTimePicker v-model="value" visible-cells-count="9" />
+      </div>
+    </VbCard>
   </VbDemo>
 </template>
 
@@ -63,5 +97,16 @@ export default {
       ampm: false,
     }
   },
+
+  computed: {
+    selectedTime () {
+      const formatTime = (time) => time < 10 ? `0${time}` : time
+      const hours = formatTime(this.value.getHours())
+      const minutes = formatTime(this.value.getMinutes())
+      const seconds = formatTime(this.value.getSeconds())
+
+      return `${hours}:${minutes}:${seconds}`
+    },
+  },
 }
 </script>

From fffc8b9085b3118949128ba294118fed65ba1ba8 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 25 May 2022 14:05:52 +0500
Subject: [PATCH 30/38] feat: add spacing between exports declarations

---
 packages/ui/src/components/va-time-picker/types/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/va-time-picker/types/index.ts b/packages/ui/src/components/va-time-picker/types/index.ts
index c2bc86cccc..4dda33bebf 100644
--- a/packages/ui/src/components/va-time-picker/types/index.ts
+++ b/packages/ui/src/components/va-time-picker/types/index.ts
@@ -11,4 +11,5 @@ export interface TimePickerProps {
   secondsFilter?: (h: number) => boolean
   readonly?: boolean
 }
+
 export type ModelValueRef = Ref<Date | null | undefined>

From 2e5a8b9a68b176e9a41669a3503e4cf2c3a87a4d Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 25 May 2022 16:07:54 +0500
Subject: [PATCH 31/38] feat: refactoring

---
 .../va-time-picker/VaTimePicker.demo.vue      | 20 +++++++++++++++----
 .../VaTimePickerColumn/VaTimePickerColumn.vue |  4 ++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
index 41a4c43f0f..3e6e126a7b 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
@@ -14,13 +14,21 @@
 
     <VbCard title="view">
       <div class="d-flex">
-        <VaTimePicker v-model="value" :view="'seconds'" />
+        <VaTimePicker v-model="value" view="seconds" />
         <va-divider vertical />
-        <VaTimePicker v-model="value" :view="'hours'" />
+        <VaTimePicker v-model="value" view="hours" />
       </div>
     </VbCard>
 
     <VbCard title="ampm">
+      <div class="d-flex justify--center">
+        <va-switch
+          v-model="ampm"
+          label="ampm"
+          size="small"
+        />
+      </div>
+      <br />
       <div class="d-flex">
         <VaTimePicker v-model="value" :ampm="ampm" />
         <va-divider vertical />
@@ -35,9 +43,9 @@
       </div>
       <br />
       <div class="d-flex">
-        <VaTimePicker v-model="value" :ampm="true" />
+        <VaTimePicker v-model="value" ampm />
         <va-divider vertical />
-        <VaTimePicker v-model="value" :ampm="false" :view="'seconds'" />
+        <VaTimePicker v-model="value" :ampm="false" view="seconds" />
       </div>
     </VbCard>
 
@@ -84,10 +92,14 @@
 
 <script>
 import VaTimePicker from './VaTimePicker.vue'
+import VaDivider from '../va-divider'
+import VaSwitch from '../va-switch'
 
 export default {
   components: {
     VaTimePicker,
+    VaDivider,
+    VaSwitch,
   },
 
   data () {
diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index 09195774f1..588050e672 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import debounce from 'lodash/debounce.js'
-import { defineComponent, nextTick, ref, watch, onMounted, PropType } from 'vue'
+import { defineComponent, nextTick, shallowRef, watch, onMounted, PropType } from 'vue'
 import { useSyncProp } from '../../../../composables/useSyncProp'
 import { useFocus, useFocusEmits } from '../../../../composables/useFocus'
 
@@ -39,7 +39,7 @@ export default defineComponent({
   emits: ['item-selected', 'update:activeItemIndex', ...useFocusEmits],
 
   setup (props, { emit }) {
-    const rootElement = ref<HTMLElement>()
+    const rootElement = shallowRef<HTMLElement>()
     const { focus, blur } = useFocus(rootElement, emit)
     const [syncActiveItemIndex] = useSyncProp('activeItemIndex', props, emit)
 

From 32c842c7259a4fd7c357cd391891dfe90659aab7 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 27 May 2022 17:49:27 +0500
Subject: [PATCH 32/38] feat: add selected values background

---
 .../components/VaTimePickerColumn/_variables.scss               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
index 65a2ed01ca..fe91769d06 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/_variables.scss
@@ -5,6 +5,6 @@
   --va-time-picker-cell-active-background: var(--va-primary);
   --va-time-picker-cell-active-color: var(--va-primary);
   --va-time-picker-cell-background-color-hover: var(--va-background-color-hover);
-  --va-time-picker-cell-active-background-opacity: 0;
+  --va-time-picker-cell-active-background-opacity: 0.05;
   --va-time-picker-cell-active-background-opacity-hover: 0.1;
 }

From 0651b79ea363059239dfa59d577b6a006f6b7c96 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Fri, 27 May 2022 17:49:46 +0500
Subject: [PATCH 33/38] feat: fix scroll behavior

---
 .../VaTimePickerColumn/VaTimePickerColumn.vue | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index 588050e672..0680660a7e 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -6,6 +6,7 @@
     @keydown.space.stop.prevent="makeActiveNext(5)"
     @keydown.up.stop.prevent="makeActivePrev()"
     @scroll="onScroll"
+    @touchmove="onScroll"
     ref="rootElement"
   >
     <div
@@ -78,7 +79,19 @@ export default defineComponent({
       return n < 10 ? `0${n}` : `${n}`
     }
 
-    const getIndex = () => Math.round(rootElement.value!.scrollTop / props.cellHeight)
+    const getIndex = () => {
+      const scrollTop = rootElement.value!.scrollTop
+      const calculatedIndex = Math.max(
+        (scrollTop - scrollTop % props.cellHeight) / props.cellHeight,
+        scrollTop / props.cellHeight,
+      )
+
+      if (syncActiveItemIndex.value * props.cellHeight < scrollTop) {
+        return Math.ceil(calculatedIndex)
+      } else {
+        return Math.floor(calculatedIndex)
+      }
+    }
 
     const onScroll = debounce(() => {
       if (!rootElement.value) { return }
@@ -168,15 +181,5 @@ export default defineComponent({
         background: var(--va-time-picker-cell-background-color-hover);
       }
     }
-
-    &:focus {
-      .va-time-picker-cell {
-        &--active {
-          &::before {
-            opacity: var(--va-time-picker-cell-active-background-opacity-hover);
-          }
-        }
-      }
-    }
   }
 </style>

From 27d22513b92cf04f792bfe8a9f45c86aa436e834 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 1 Jun 2022 20:45:04 +0500
Subject: [PATCH 34/38] feat: fix scroll

---
 .../components/VaTimePickerColumn/VaTimePickerColumn.vue      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index 0680660a7e..6abfc9d225 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -88,8 +88,10 @@ export default defineComponent({
 
       if (syncActiveItemIndex.value * props.cellHeight < scrollTop) {
         return Math.ceil(calculatedIndex)
-      } else {
+      } else if (syncActiveItemIndex.value * props.cellHeight > scrollTop) {
         return Math.floor(calculatedIndex)
+      } else {
+        return Math.round(calculatedIndex)
       }
     }
 

From 671ae70edd5a30f1649c89fdf6272779fb89f10d Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 15 Jun 2022 20:26:15 +0500
Subject: [PATCH 35/38] feat: refactor demo

---
 .../components/va-time-picker/VaTimePicker.demo.vue    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
index 3e6e126a7b..c103b5b6ac 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.demo.vue
@@ -80,11 +80,11 @@
       </div>
       <br />
       <div class="d-flex">
-        <VaTimePicker v-model="value" visible-cells-count="2" />
+        <VaTimePicker v-model="value" :visible-cells-count="2" />
         <va-divider vertical />
-        <VaTimePicker v-model="value" visible-cells-count="5" />
+        <VaTimePicker v-model="value" :visible-cells-count="5" />
         <va-divider vertical />
-        <VaTimePicker v-model="value" visible-cells-count="9" />
+        <VaTimePicker v-model="value" :visible-cells-count="9" />
       </div>
     </VbCard>
   </VbDemo>
@@ -92,8 +92,8 @@
 
 <script>
 import VaTimePicker from './VaTimePicker.vue'
-import VaDivider from '../va-divider'
-import VaSwitch from '../va-switch'
+import { VaDivider } from '../va-divider'
+import { VaSwitch } from '../va-switch'
 
 export default {
   components: {

From d012544689b25ed08b43fc8fa269bee34842d1a4 Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Wed, 15 Jun 2022 20:26:46 +0500
Subject: [PATCH 36/38] feat: handle filtered values

---
 .../components/VaTimePickerColumn/VaTimePickerColumn.vue  | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index 6abfc9d225..2fa0bd8e7b 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -96,12 +96,8 @@ export default defineComponent({
     }
 
     const onScroll = debounce(() => {
-      if (!rootElement.value) { return }
-
-      const idx = getIndex()
-
-      if (idx !== syncActiveItemIndex.value) {
-        syncActiveItemIndex.value = idx
+      if (rootElement.value && syncActiveItemIndex.value !== -1) {
+        syncActiveItemIndex.value = getIndex()
       }
     }, 200)
 

From abd02376f945d93ee49f636f6fc0d94affe5475a Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Mon, 20 Jun 2022 14:16:43 +0500
Subject: [PATCH 37/38] feat: add passive flag to the listeners

---
 .../components/VaTimePickerColumn/VaTimePickerColumn.vue      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index 2fa0bd8e7b..892d30951a 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -5,8 +5,8 @@
     @keydown.down.stop.prevent="makeActiveNext()"
     @keydown.space.stop.prevent="makeActiveNext(5)"
     @keydown.up.stop.prevent="makeActivePrev()"
-    @scroll="onScroll"
-    @touchmove="onScroll"
+    @scroll.passive="onScroll"
+    @touchmove.passive="onScroll"
     ref="rootElement"
   >
     <div

From 71809fc746ec867ff84ae0ac7e10112fbac34e4b Mon Sep 17 00:00:00 2001
From: rustem-nasyrov <nasyroff.rus@gmail.com>
Date: Tue, 28 Jun 2022 16:54:45 +0500
Subject: [PATCH 38/38] feat: refactor

---
 packages/ui/src/components/va-time-picker/VaTimePicker.vue  | 4 ++--
 .../components/VaTimePickerColumn/VaTimePickerColumn.vue    | 6 +++---
 .../va-time-picker/components/VaTimePickerColumn/index.ts   | 4 ++--
 .../components/va-time-picker/{types/index.ts => types.ts}  | 0
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename packages/ui/src/components/va-time-picker/{types/index.ts => types.ts} (100%)

diff --git a/packages/ui/src/components/va-time-picker/VaTimePicker.vue b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
index a3fd6d2208..ffb70032cc 100644
--- a/packages/ui/src/components/va-time-picker/VaTimePicker.vue
+++ b/packages/ui/src/components/va-time-picker/VaTimePicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="va-time-picker"
-    :class="computedClass"
+    :class="computedClasses"
     :style="computedStyles"
   >
     <VaTimePickerColumn
@@ -24,7 +24,7 @@
 import { defineComponent, ref, computed, PropType } from 'vue'
 import { useTimePicker } from './hooks/useTimePicker'
 
-import VaTimePickerColumn from './components/VaTimePickerColumn'
+import { VaTimePickerColumn } from './components/VaTimePickerColumn'
 
 import {
   useStatefulProps,
diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
index 976e02c0a2..9b13573025 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/VaTimePickerColumn.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script lang="ts">
-import debounce from 'lodash/debounce.js'
 import { defineComponent, nextTick, shallowRef, watch, onMounted, PropType } from 'vue'
-import { useSyncProp } from '../../../../composables/useSyncProp'
-import { useFocus, useFocusEmits } from '../../../../composables/useFocus'
+
+import debounce from 'lodash/debounce.js'
+import { useSyncProp, useFocus, useFocusEmits } from '../../../../composables'
 
 export default defineComponent({
   name: 'VaTimePickerColumn',
diff --git a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts
index f54ddfc7ee..e2bfe192e0 100644
--- a/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts
+++ b/packages/ui/src/components/va-time-picker/components/VaTimePickerColumn/index.ts
@@ -1,4 +1,4 @@
 import withConfigTransport from '../../../../services/config-transport/withConfigTransport'
-import VaTimePickerColumn from './VaTimePickerColumn.vue'
+import _VaTimePickerColumn from './VaTimePickerColumn.vue'
 
-export default withConfigTransport(VaTimePickerColumn)
+export const VaTimePickerColumn = withConfigTransport(_VaTimePickerColumn)
diff --git a/packages/ui/src/components/va-time-picker/types/index.ts b/packages/ui/src/components/va-time-picker/types.ts
similarity index 100%
rename from packages/ui/src/components/va-time-picker/types/index.ts
rename to packages/ui/src/components/va-time-picker/types.ts