Feat/improve time picker behavior

packages/docs/src/locales/en/en.json

@@ -1134,12 +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."
+        "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",
+        "visibleCellsCount": "Count of time cells to display"
       },
       "events": {},
       "methods": {},
@@ -3855,6 +3858,14 @@
         "title": "Default",
         "text": ""
       },
+      "framed": {
+        "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": ""

packages/docs/src/locales/ru/ru.json

@@ -1120,7 +1120,17 @@
       "slots": {}
     },
     "VaTimePicker": {
-      "props": {},
+      "props": {
+        "ampm": "12 часовой формат",
+        "hoursFilter": "Функция, позволяющая скрыть определенные часы",
+        "minutesFilter": "Функция, позволяющая скрыть определенные минуты",
+        "secondsFilter": "Функция, позволяющая скрыть определенные секунды",
+        "view": "Отображение только выбранных колонок",
+        "periodUpdatesModelValue": "Изменение периода времен автоматически обновит model value при переключении AM/PM",
+        "framed": "Добавляет рамки по центру компонента для выделения выбранных значений",
+        "cellHeight": "Высота ячейки времени",
+        "visibleCellsCount": "Количество ячеек времени для отображения"
+      },
       "events": {},
       "methods": {},
       "slots": {}
@@ -3732,6 +3742,14 @@
         "title": "Базовое использование",
         "text": ""
       },
+      "framed": {
+        "title": "Рамки",
+        "text": ""
+      },
+      "visibleCellsCount": {
+        "title": "Контроль количества отображаемых ячеек",
+        "text": "Для лучшего вида, нужно задавать нечетные числа"
+      },
       "readonlyAndDisabled": {
         "title": "Только для чтения и отключение",
         "text": ""

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>

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>

packages/docs/src/page-configs/ui-elements/time-picker/page-config.ts

@@ -16,6 +16,18 @@ const config: ApiDocsBlock[] = [
     'default',
   ),
 
+  ...block.exampleBlock(
+    'timePicker.examples.framed.title',
+    'timePicker.examples.framed.text',
+    'framed',
+  ),
+
+  ...block.exampleBlock(
+    'timePicker.examples.visibleCellsCount.title',
+    'timePicker.examples.visibleCellsCount.text',
+    'visibleCellsCount',
+  ),
+
   ...block.exampleBlock(
     'timePicker.examples.readonlyAndDisabled.title',
     'timePicker.examples.readonlyAndDisabled.text',

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>

packages/ui/src/components/va-time-picker/VaTimePicker.vue

@@ -1,10 +1,15 @@
 <template>
-  <div class="va-time-picker" :class="computedClass">
+  <div
+    class="va-time-picker"
+    :class="computedClass"
+    :style="computedStyles"
+  >
     <VaTimePickerColumn
       v-for="(column, idx) in columns" :key="idx"
       :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()"
@@ -16,11 +21,11 @@
 </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 VaTimePickerColumn from './components/VaTimePickerColumn'
 import { useStateful, useStatefulEmits, useStatefulProps } from '../../composables/useStateful'
-import { useFormProps, useForm } from '../../composables/useForm'
+import { useForm, useFormProps } from '../../composables/useForm'
 import { useArrayRefs } from '../../composables/useArrayRefs'
 
 export default defineComponent({
@@ -39,6 +44,9 @@ 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 },
+    cellHeight: { type: Number, default: 30 },
+    visibleCellsCount: { type: Number, default: 7 },
   },
 
   emits: useStatefulEmits,
@@ -59,23 +67,42 @@ 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
       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(() => ({
+      ...formClasses.value,
+      'va-time-picker--framed': props.framed,
+    }))
+
+    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,
-      computedClass: createComputedClass('va-time-picker'),
+      computedClass,
+      computedStyles,
       isPM,
       pickers,
       setItemRef,
@@ -122,5 +149,22 @@ export default defineComponent({
 
       opacity: var(--va-time-picker-disabled-opacity);
     }
+
+    &--framed {
+      position: relative;
+
+      &::before {
+        content: "";
+        height: var(--va-time-picker-cell-height);
+        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>

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;
 }