From ca371f7846de0886da07d4f843b1e396577863d9 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Wed, 6 Jul 2022 15:49:04 +0600
Subject: [PATCH 01/21] initial

---
 .../ui/src/components/va-split/VaSplit.vue    | 54 +++++++++++++++++++
 packages/ui/src/components/va-split/index.ts  |  4 ++
 2 files changed, 58 insertions(+)
 create mode 100644 packages/ui/src/components/va-split/VaSplit.vue
 create mode 100644 packages/ui/src/components/va-split/index.ts

diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
new file mode 100644
index 0000000000..e72a41016f
--- /dev/null
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -0,0 +1,54 @@
+<template>
+<section ref="splitContainer" aria-label="split panels">
+  <slot name="start" />
+  <div>|</div>
+  <slot name="end" />
+</section>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, shallowRef } from 'vue'
+
+export default defineComponent({
+  name: 'VaSplit',
+
+  props: {
+    direction: {
+      type: String as PropType<'horizontal' | 'vertical'>,
+      default: 'horizontal',
+      validator: (v: string) => ['horizontal', 'vertical'].includes(v),
+    },
+    paneSize: {
+      type: Number,
+      default: 50,
+      validator: (v: number) => v <= 100,
+    },
+    gutterSize: { type: Number, default: 15 },
+    resizable: { type: Boolean, default: false },
+    maximizeWithDblClick: { type: Boolean, default: false },
+    leftPaneMaximization: { type: Boolean, default: false },
+    limits: { type: Array as any as PropType<[number, number]>, default: undefined },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup: () => {
+    const splitContainer = shallowRef<HTMLElement>()
+    const isDrugging = ref(false)
+
+    const startDrugging = (e: MouseEvent | TouchEvent) => {
+      isDrugging.value = true
+    }
+
+    const stopDrugging = (e: MouseEvent | TouchEvent) => {
+      isDrugging.value = false
+    }
+
+    return { splitContainer }
+  },
+})
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/packages/ui/src/components/va-split/index.ts b/packages/ui/src/components/va-split/index.ts
new file mode 100644
index 0000000000..7a30c6c992
--- /dev/null
+++ b/packages/ui/src/components/va-split/index.ts
@@ -0,0 +1,4 @@
+import withConfigTransport from '../../services/config-transport/withConfigTransport'
+import _VaSplit from './VaSplit.vue'
+
+export const VaSplit = withConfigTransport(_VaSplit)

From cf7769afa9bcc996aa62207ee2f5373b07a6979a Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Thu, 7 Jul 2022 13:36:22 +0600
Subject: [PATCH 02/21] wip

---
 .../src/components/va-split/VaSplit.demo.vue  | 26 +++++++
 .../ui/src/components/va-split/VaSplit.vue    | 76 ++++++++++++++-----
 2 files changed, 83 insertions(+), 19 deletions(-)
 create mode 100644 packages/ui/src/components/va-split/VaSplit.demo.vue

diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
new file mode 100644
index 0000000000..f60b538fff
--- /dev/null
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -0,0 +1,26 @@
+<template>
+  <VbDemo>
+    <VbCard>
+      <va-split>
+        <template #start>
+          <div style="border: 1px solid red;">{{$vb.lorem(100)}}</div>
+        </template>
+        <template #end>
+          <div style="border: 1px solid red;">{{$vb.lorem(100)}}</div>
+        </template>
+      </va-split>
+    </VbCard>
+  </VbDemo>
+</template>
+
+<script>
+import { VaSplit } from './'
+
+export default {
+  components: {
+    VaSplit,
+  },
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index e72a41016f..308e9d746a 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -1,50 +1,88 @@
 <template>
-<section ref="splitContainer" aria-label="split panels">
-  <slot name="start" />
-  <div>|</div>
-  <slot name="end" />
-</section>
+  <section
+    ref="splitContainer"
+    aria-label="split panels"
+    @mousemove="processDragging"
+    @mouseup="stopDragging"
+    @mouseleave="stopDragging"
+    :style="`display: flex`">
+    <div :style="`width: ${splitterPositionComputed}%`">
+      <slot name="start" />
+    </div>
+    <div
+      style="min-width: 10px;"
+      @mousedown="startDragging">+++</div>
+    <div :style="`width: ${100 - splitterPositionComputed}%`">
+      <slot name="end" />
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, shallowRef } from 'vue'
+import { defineComponent, PropType, ref, shallowRef, computed } from 'vue'
 
 export default defineComponent({
   name: 'VaSplit',
 
   props: {
-    direction: {
-      type: String as PropType<'horizontal' | 'vertical'>,
-      default: 'horizontal',
-      validator: (v: string) => ['horizontal', 'vertical'].includes(v),
-    },
     paneSize: {
       type: Number,
       default: 50,
       validator: (v: number) => v <= 100,
     },
     gutterSize: { type: Number, default: 15 },
+    vertical: { type: Boolean, default: false },
     resizable: { type: Boolean, default: false },
     maximizeWithDblClick: { type: Boolean, default: false },
     leftPaneMaximization: { type: Boolean, default: false },
-    limits: { type: Array as any as PropType<[number, number]>, default: undefined },
+    limits: { type: Array as any as PropType<[number, number]>, default: () => [30, 70] },
   },
 
   emits: ['update:modelValue'],
 
-  setup: () => {
+  setup: (props) => {
     const splitContainer = shallowRef<HTMLElement>()
-    const isDrugging = ref(false)
+    const containerSizeComputed = computed(() => {
+      if (!splitContainer.value) { return undefined }
+
+      return props.vertical ? splitContainer.value.offsetHeight : splitContainer.value.offsetWidth
+    })
+
+    const isDragging = ref(false)
+    const dragStartPosition = ref(0)
+
+    const splitterPosition = ref(50)
+    const splitterPositionComputed = computed({
+      get: () => splitterPosition.value,
+      set: (v) => {
+        if (v < props.limits[0]) {
+          splitterPosition.value = props.limits[0]
+        } else if (v > props.limits[1]) {
+          splitterPosition.value = props.limits[1]
+        } else {
+          splitterPosition.value = v
+        }
+      },
+    })
 
-    const startDrugging = (e: MouseEvent | TouchEvent) => {
-      isDrugging.value = true
+    const startDragging = (e: MouseEvent) => {
+      isDragging.value = true
+      dragStartPosition.value = props.vertical ? e.pageY : e.pageX
     }
 
-    const stopDrugging = (e: MouseEvent | TouchEvent) => {
-      isDrugging.value = false
+    const processDragging = (e: MouseEvent) => {
+      if (!isDragging.value || !containerSizeComputed.value) { return }
+
+      const dragEndPosition = props.vertical ? e.pageY : e.pageX
+      const distance = dragEndPosition - dragStartPosition.value
+      console.log(distance, dragEndPosition, dragStartPosition.value)
+
+      splitterPositionComputed.value = splitterPositionComputed.value + Math.floor((distance / containerSizeComputed.value) * 100)
     }
 
-    return { splitContainer }
+    const stopDragging = () => (isDragging.value = false)
+
+    return { splitContainer, startDragging, processDragging, stopDragging, splitterPositionComputed }
   },
 })
 </script>

From 6f75ef3e58295fde205dda6bdce903b10cb2aad0 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Sun, 10 Jul 2022 14:52:49 +0600
Subject: [PATCH 03/21] [#1725] split component implementation

---
 .../components/sidebar/navigationRoutes.ts    |   7 +
 packages/docs/src/locales/en/en.json          |  48 ++++-
 packages/docs/src/locales/ru/ru.json          |  48 ++++-
 .../select/examples/Decorators.vue            |   2 +-
 .../ui-elements/split/api-options.ts          |   9 +
 .../split/examples/CustomGrabber.vue          |  27 +++
 .../ui-elements/split/examples/Default.vue    |  35 ++++
 .../ui-elements/split/examples/Disabled.vue   |  22 +++
 .../split/examples/Maximization.vue           |  22 +++
 .../ui-elements/split/examples/Nested.vue     |  36 ++++
 .../ui-elements/split/examples/Vertical.vue   |  22 +++
 .../ui-elements/split/page-config.ts          |  61 ++++++
 packages/docs/src/pages/ui-elements/split.vue |  20 ++
 .../src/components/va-backtop/VaBacktop.vue   |   2 +-
 .../src/components/va-split/VaSplit.demo.vue  | 129 ++++++++++++-
 .../ui/src/components/va-split/VaSplit.vue    | 175 ++++++++++++++----
 .../src/components/va-split/_variables.scss   |  12 ++
 .../src/styles/grid/_grid-global-styles.scss  |   4 +
 18 files changed, 633 insertions(+), 48 deletions(-)
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/api-options.ts
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/page-config.ts
 create mode 100644 packages/docs/src/pages/ui-elements/split.vue
 create mode 100644 packages/ui/src/components/va-split/_variables.scss

diff --git a/packages/docs/src/components/sidebar/navigationRoutes.ts b/packages/docs/src/components/sidebar/navigationRoutes.ts
index dfb8b1e284..5a8b17b7dd 100644
--- a/packages/docs/src/components/sidebar/navigationRoutes.ts
+++ b/packages/docs/src/components/sidebar/navigationRoutes.ts
@@ -242,6 +242,13 @@ export const navigationRoutes: NavigationRoute[] = [
         name: 'list',
         displayName: 'menu.list',
       },
+      {
+        name: 'split',
+        displayName: 'menu.split',
+        meta: {
+          badge: 'new',
+        },
+      },
       {
         name: 'collapse',
         displayName: 'menu.collapse',
diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 288fe24a51..8451742796 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1272,6 +1272,21 @@
       "events": {},
       "methods": {},
       "slots": {}
+    },
+    "VaSplit": {
+      "props": {
+        "vertical": "Changes `va-split` orientation to vertical.",
+        "limits": "Array of maximal sizes (%) for start/end panels.",
+        "maximization": "End panel size maximization via separator double click.",
+        "maximizeStart": "Maximize size of the start panel instead of end one."
+      },
+      "events": {},
+      "methods": {},
+      "slots": {
+        "dragger": "Changes default separator-dragger (`va-divider` component) to custom.",
+        "start": "Start panel content.",
+        "end": "End panel content."
+      }
     }
   },
   "menu": {
@@ -1381,7 +1396,8 @@
     "counter": "Counter",
     "nuxt": "Nuxt",
     "ssrGuide": "SSR",
-    "spacer": "Spacer"
+    "spacer": "Spacer",
+    "split": "Split"
   },
   "all": {
     "examples": "Examples",
@@ -4125,5 +4141,35 @@
         "text": "`va-spacer` adding a div with the `.va-spacer` class."
       }
     }
+  },
+  "split": {
+    "title": "Split",
+    "summaryText": "`va-split` component splits container into 2 horizontal/vertical panels. You can change panels sizes via grabbing the separator-grabber between them.",
+    "examples": {
+      "default": {
+        "title": "Basic usage",
+        "text": ""
+      },
+      "vertical": {
+        "title": "Vertical",
+        "text": "Prop `vertical` changes components orientation to vertical."
+      },
+      "customGrabber": {
+        "title": "Custom grabber",
+        "text": "You can pass via `grabber` slot any content which will overwrite default grabber (`va-divider`)."
+      },
+      "nested": {
+        "title": "Nested",
+        "text": "Passing another `va-split` component via `start`/`end` slot you can gain different panels combinations."
+      },
+      "maximization": {
+        "title": "Maximization",
+        "text": "Prop `maximization` allows to maximize end panel size via double click on dragger (additional prop `maximizeStart` changes this logic - start panel maximizing instead)."
+      },
+      "disabled": {
+        "title": "Disabled",
+        "text": "`disabled` prop restricts to change panels size (including option via `maximization` prop)."
+      }
+    }
   }
 }
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index e1862ff9c2..2dd53ac12f 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1202,6 +1202,21 @@
       "events": {},
       "methods": {},
       "slots": {}
+    },
+    "VaSplit": {
+      "props": {
+        "vertical": "Меняет ориентацию сплиттера на вертикальную.",
+        "limits": "Массив максимальных размеров (в %) начальной и конечной панели.",
+        "maximization": "Активирует возможность максимизации размера конечной панели при двойном клике по разделителю.",
+        "maximizeStart": "Меняет логику максимизации с конечной на начальную панель."
+      },
+      "events": {},
+      "methods": {},
+      "slots": {
+        "dragger": "Заменяет стандартный перетаскиваемый разделитель, использующий компонент `va-divider`, на пользовательский.",
+        "start": "Содержимое первой панели.",
+        "end": "Содержимое второй панели."
+      }
     }
   },
   "menu": {
@@ -1311,7 +1326,8 @@
     "counter": "Counter",
     "nuxt": "Nuxt",
     "ssrGuide": "Ssr Guide",
-    "spacer": "Spacer"
+    "spacer": "Spacer",
+    "split": "Split"
   },
   "all": {
     "examples": "Примеры",
@@ -3966,5 +3982,35 @@
         "text": "`va-spacer` добавляет div с классом `.va-spacer`."
       }
     }
+  },
+  "split": {
+    "title": "Split",
+    "summaryText": "Компонент `va-split` разделяет контейнер на 2 горизонтальные или вертикальные панели с возможностью изменения их размеров путем перетаскивания разделителя между ними.",
+    "examples": {
+      "default": {
+        "title": "Базовое использование",
+        "text": ""
+      },
+      "vertical": {
+        "title": "Vertical",
+        "text": "Свойство `vertical` позволяет изменить ориентацию компонента на вертикальную."
+      },
+      "customGrabber": {
+        "title": "Кастомный разделитель",
+        "text": "Передав содержимое в слот `grabber`, оно заменит стандартный разделитель-граббер."
+      },
+      "nested": {
+        "title": "Вложенность",
+        "text": "Передавая в слоты `start`/`end` еще один `va-split`, можно создавать любые комбинации панелей."
+      },
+      "maximization": {
+        "title": "Максимизация по двойному клику",
+        "text": "Свойство `maximization` позволяет максимизировать размер конечной панели через двойной клик по разделителю (дополнительной свойство `maximizeStart` меняет логику - максимизируется начальная панель)."
+      },
+      "disabled": {
+        "title": "Disabled",
+        "text": "Свойство `disabled` отключает возможность изменения размеров панелей (в т.ч. через свойство `maximization`)."
+      }
+    }
   }
 }
diff --git a/packages/docs/src/page-configs/ui-elements/select/examples/Decorators.vue b/packages/docs/src/page-configs/ui-elements/select/examples/Decorators.vue
index 1c48dc9f68..67355f1eb3 100644
--- a/packages/docs/src/page-configs/ui-elements/select/examples/Decorators.vue
+++ b/packages/docs/src/page-configs/ui-elements/select/examples/Decorators.vue
@@ -8,7 +8,7 @@
     />
     <va-select
       class="mb-4"
-      label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"
+      label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
       placeholder="Long label"
       v-model="value"
       :options="options"
diff --git a/packages/docs/src/page-configs/ui-elements/split/api-options.ts b/packages/docs/src/page-configs/ui-elements/split/api-options.ts
new file mode 100644
index 0000000000..21ca56c68a
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/api-options.ts
@@ -0,0 +1,9 @@
+import { defineManualApi } from '../../../components/DocsApi/ManualApiOptions'
+
+export default defineManualApi({
+  slots: {
+    start: { },
+    end: { },
+    dragger: { },
+  },
+})
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue b/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
new file mode 100644
index 0000000000..0951fbaaa7
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
@@ -0,0 +1,27 @@
+<template>
+  <va-split class="split-demo">
+    <template #start>
+      <div>{{ lorem }}</div>
+    </template>
+    <template #grabber>
+      <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: greenyellow;">
+        <va-icon name="face" />
+      </div>
+    </template>
+    <template #end>
+      <div>{{ lorem }}</div>
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { VaSplit } from 'vuestic-ui/src/components/va-split'
+import { lorem } from './Default'
+
+export default {
+  components: { VaSplit },
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
new file mode 100644
index 0000000000..6c1bf8ac46
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
@@ -0,0 +1,35 @@
+<template>
+  <va-split class="split-demo">
+    <template #start>
+      <div>{{ lorem }}</div>
+    </template>
+    <template #end>
+      <div>{{ lorem }}</div>
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { VaSplit } from 'vuestic-ui/src/components/va-split'
+
+export const lorem = 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.'
+
+export default {
+  components: { VaSplit },
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
+
+<style lang="scss">
+.split-demo {
+  height: 11rem;
+  padding: 1rem;
+  border: 1px solid gainsboro;
+
+  & .va-split__panel {
+    padding: 0.5rem;
+  }
+}
+</style>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
new file mode 100644
index 0000000000..ca7618eec8
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
@@ -0,0 +1,22 @@
+<template>
+  <va-split class="split-demo" disabled>
+    <template #start>
+      <div>{{ lorem }}</div>
+    </template>
+    <template #end>
+      <div>{{ lorem }}</div>
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { VaSplit } from 'vuestic-ui/src/components/va-split'
+import { lorem } from './Default'
+
+export default {
+  components: { VaSplit },
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
new file mode 100644
index 0000000000..e81d571087
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
@@ -0,0 +1,22 @@
+<template>
+  <va-split class="split-demo" maximization>
+    <template #start>
+      <div>{{ lorem }}</div>
+    </template>
+    <template #end>
+      <div>{{ lorem }}</div>
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { VaSplit } from 'vuestic-ui/src/components/va-split'
+import { lorem } from './Default'
+
+export default {
+  components: { VaSplit },
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
new file mode 100644
index 0000000000..67b40dd3d6
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
@@ -0,0 +1,36 @@
+<template>
+  <va-split :limits="[10, 90]" class="split-demo">
+    <template #start>
+      <va-split :limits="[10, 90]">
+        <template #start>
+          <div>{{lorem}}</div>
+        </template>
+        <template #end>
+          <div>{{lorem}}</div>
+        </template>
+      </va-split>
+    </template>
+    <template #end>
+      <va-split :limits="[10, 90]" vertical style="height: 11rem;">
+        <template #start>
+          <div>{{lorem}}</div>
+        </template>
+        <template #end>
+          <div>{{lorem}}</div>
+        </template>
+      </va-split>
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { VaSplit } from 'vuestic-ui/src/components/va-split'
+import { lorem } from './Default'
+
+export default {
+  components: { VaSplit },
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
new file mode 100644
index 0000000000..3398168d2d
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
@@ -0,0 +1,22 @@
+<template>
+  <va-split class="split-demo" vertical>
+    <template #start>
+      <div>{{ lorem }}</div>
+    </template>
+    <template #end>
+      <div>{{ lorem }}</div>
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { VaSplit } from 'vuestic-ui/src/components/va-split'
+import { lorem } from './Default'
+
+export default {
+  components: { VaSplit },
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/split/page-config.ts b/packages/docs/src/page-configs/ui-elements/split/page-config.ts
new file mode 100644
index 0000000000..65ea5ed10d
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/page-config.ts
@@ -0,0 +1,61 @@
+import { ApiDocsBlock } from '@/types/configTypes'
+import { PageGenerationHelper } from '@/helpers/DocsHelper'
+import VaSplit from 'vuestic-ui/src/components/va-split/VaSplit.vue'
+import apiOptions from './api-options'
+
+// @ts-ignore
+// eslint-disable-next-line import/no-webpack-loader-syntax
+const cssVariables = import('!raw-loader!vuestic-ui/src/components/va-split/_variables.scss')
+
+const block = new PageGenerationHelper(__dirname)
+
+const config: ApiDocsBlock[] = [
+  block.title('split.title'),
+  block.paragraph('split.summaryText'),
+
+  block.subtitle('all.examples'),
+
+  ...block.exampleBlock(
+    'split.examples.default.title',
+    '',
+    'Default',
+  ),
+
+  ...block.exampleBlock(
+    'split.examples.vertical.title',
+    'split.examples.vertical.text',
+    'Vertical',
+  ),
+
+  ...block.exampleBlock(
+    'split.examples.customGrabber.title',
+    'split.examples.customGrabber.text',
+    'CustomGrabber',
+  ),
+
+  ...block.exampleBlock(
+    'split.examples.nested.title',
+    'split.examples.nested.text',
+    'Nested',
+  ),
+
+  ...block.exampleBlock(
+    'split.examples.maximization.title',
+    'split.examples.maximization.text',
+    'Maximization',
+  ),
+
+  ...block.exampleBlock(
+    'split.examples.disabled.title',
+    'split.examples.disabled.text',
+    'Disabled',
+  ),
+
+  block.subtitle('all.api'),
+  block.api(VaSplit, apiOptions),
+
+  block.subtitle('all.cssVariables'),
+  block.file(cssVariables),
+]
+
+export default config
diff --git a/packages/docs/src/pages/ui-elements/split.vue b/packages/docs/src/pages/ui-elements/split.vue
new file mode 100644
index 0000000000..c64392732b
--- /dev/null
+++ b/packages/docs/src/pages/ui-elements/split.vue
@@ -0,0 +1,20 @@
+<template>
+  <docs-content :config="configComputed" />
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import DocsContent from '../../components/DocsContent.vue'
+import splitConfig from '../../page-configs/ui-elements/split/page-config'
+
+@Options({
+  components: {
+    DocsContent,
+  },
+})
+export default class Split extends Vue {
+  get configComputed () {
+    return splitConfig
+  }
+}
+</script>
diff --git a/packages/ui/src/components/va-backtop/VaBacktop.vue b/packages/ui/src/components/va-backtop/VaBacktop.vue
index b997edd104..57326efb90 100644
--- a/packages/ui/src/components/va-backtop/VaBacktop.vue
+++ b/packages/ui/src/components/va-backtop/VaBacktop.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import { useComponentPresetProp } from '../../composables/useComponentPreset'
+import { useComponentPresetProp } from '../../composables'
 import { VaButton } from '../va-button'
 
 export default defineComponent({
diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
index f60b538fff..ffa64fd8f8 100644
--- a/packages/ui/src/components/va-split/VaSplit.demo.vue
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -1,12 +1,119 @@
 <template>
-  <VbDemo>
-    <VbCard>
+  <VbDemo class="va-split-demo">
+    <VbCard title="default">
       <va-split>
         <template #start>
-          <div style="border: 1px solid red;">{{$vb.lorem(100)}}</div>
+          <div>{{$vb.lorem(1000)}}</div>
         </template>
         <template #end>
-          <div style="border: 1px solid red;">{{$vb.lorem(100)}}</div>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+      </va-split>
+    </VbCard>
+
+    <VbCard title="vertical">
+      <va-split vertical>
+        <template #start>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+        <template #end>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+      </va-split>
+    </VbCard>
+
+    <VbCard title="custom grabber">
+      <va-split>
+        <template #start>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+        <template #grabber>
+          <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: greenyellow;">
+            <va-icon name="face" />
+          </div>
+        </template>
+        <template #end>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+      </va-split>
+    </VbCard>
+
+    <VbCard title="disabled">
+      <va-split disabled>
+        <template #start>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+        <template #end>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+      </va-split>
+    </VbCard>
+
+    <VbCard title="double click on separator to maximize right panel">
+      <va-split maximization>
+        <template #start>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+        <template #end>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+      </va-split>
+    </VbCard>
+
+    <VbCard title="double click on separator to maximize left panel">
+      <va-split maximization maximize-start>
+        <template #start>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+        <template #end>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+      </va-split>
+    </VbCard>
+
+    <VbCard title="custom limits">
+      <va-split :limits="[10, 90]">
+        <template #start>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+        <template #end>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+      </va-split>
+    </VbCard>
+
+    <VbCard title="nested">
+      <va-split :limits="[10, 90]">
+        <template #start>
+          <va-split :limits="[10, 90]">
+            <template #start>
+              <div>{{$vb.lorem(1000)}}</div>
+            </template>
+            <template #end>
+              <div>{{$vb.lorem(1000)}}</div>
+            </template>
+          </va-split>
+        </template>
+        <template #end>
+          <va-split :limits="[10, 90]" vertical>
+            <template #start>
+              <div>{{$vb.lorem(1000)}}</div>
+            </template>
+            <template #end>
+              <div>{{$vb.lorem(1000)}}</div>
+            </template>
+          </va-split>
+        </template>
+      </va-split>
+    </VbCard>
+
+    <VbCard title="stateful">
+      <va-split stateful>
+        <template #start>
+          <div>{{$vb.lorem(1000)}}</div>
+        </template>
+        <template #end>
+          <div>{{$vb.lorem(1000)}}</div>
         </template>
       </va-split>
     </VbCard>
@@ -15,12 +122,24 @@
 
 <script>
 import { VaSplit } from './'
+import { VaIcon } from '../va-icon'
 
 export default {
   components: {
     VaSplit,
+    VaIcon,
   },
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.va-split-demo {
+  & .va-split {
+    height: 10rem;
+
+    &__panel {
+      padding: 0.5rem;
+    }
+  }
+}
+</style>
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 308e9d746a..4073023d11 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -1,92 +1,189 @@
 <template>
   <section
-    ref="splitContainer"
+    ref="splitPanelsContainer"
     aria-label="split panels"
+    class="va-split"
+    :class="classComputed"
     @mousemove="processDragging"
     @mouseup="stopDragging"
-    @mouseleave="stopDragging"
-    :style="`display: flex`">
-    <div :style="`width: ${splitterPositionComputed}%`">
+    @mouseleave="stopDragging">
+    <div
+      class="va-split__panel"
+      :style="getPanelStyle('start')">
       <slot name="start" />
     </div>
     <div
-      style="min-width: 10px;"
-      @mousedown="startDragging">+++</div>
-    <div :style="`width: ${100 - splitterPositionComputed}%`">
+      class="va-split__dragger"
+      :style="draggerStyleComputed"
+      @mousedown="startDragging"
+      @dblclick="maximizePanel">
+      <slot name="grabber">
+        <va-divider
+          class="fill-width"
+          :vertical="!$props.vertical" />
+      </slot>
+    </div>
+    <div
+      class="va-split__panel"
+      :style="getPanelStyle('end')">
       <slot name="end" />
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, shallowRef, computed } from 'vue'
+import { defineComponent, PropType, ref, shallowRef, computed, watch } from 'vue'
+import { useBem, useComponentPresetProp, useStateful, useStatefulEmits, useStatefulProps } from '../../composables'
+import { __DEV__ } from '../../utils/global-utils'
+
+import { VaDivider } from '../va-divider'
 
 export default defineComponent({
   name: 'VaSplit',
 
+  components: { VaDivider },
+
   props: {
-    paneSize: {
+    ...useComponentPresetProp,
+    ...useStatefulProps,
+    modelValue: {
       type: Number,
       default: 50,
       validator: (v: number) => v <= 100,
     },
-    gutterSize: { type: Number, default: 15 },
     vertical: { type: Boolean, default: false },
-    resizable: { type: Boolean, default: false },
-    maximizeWithDblClick: { type: Boolean, default: false },
-    leftPaneMaximization: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    maximization: { type: Boolean, default: false },
+    maximizeStart: { type: Boolean, default: false },
     limits: { type: Array as any as PropType<[number, number]>, default: () => [30, 70] },
   },
 
-  emits: ['update:modelValue'],
+  emits: useStatefulEmits,
+
+  setup: (props, { emit }) => {
+    const { valueComputed } = useStateful(props, emit)
 
-  setup: (props) => {
-    const splitContainer = shallowRef<HTMLElement>()
+    const splitPanelsContainer = shallowRef<HTMLElement>()
     const containerSizeComputed = computed(() => {
-      if (!splitContainer.value) { return undefined }
+      if (!splitPanelsContainer.value) { return undefined }
+      return props.vertical ? splitPanelsContainer.value.offsetHeight : splitPanelsContainer.value.offsetWidth
+    })
 
-      return props.vertical ? splitContainer.value.offsetHeight : splitContainer.value.offsetWidth
+    const splitterPosition = ref(props.modelValue)
+    const splitterPositionComputed = computed(() => {
+      if (splitterPosition.value < props.limits[0]) { return props.limits[0] }
+      if (splitterPosition.value > props.limits[1]) { return props.limits[1] }
+      return splitterPosition.value
     })
 
     const isDragging = ref(false)
     const dragStartPosition = ref(0)
-
-    const splitterPosition = ref(50)
-    const splitterPositionComputed = computed({
-      get: () => splitterPosition.value,
-      set: (v) => {
-        if (v < props.limits[0]) {
-          splitterPosition.value = props.limits[0]
-        } else if (v > props.limits[1]) {
-          splitterPosition.value = props.limits[1]
-        } else {
-          splitterPosition.value = v
-        }
-      },
-    })
+    const dragStartSplitterPosition = ref(0)
 
     const startDragging = (e: MouseEvent) => {
+      if (props.disabled || !containerSizeComputed.value) { return }
+
       isDragging.value = true
       dragStartPosition.value = props.vertical ? e.pageY : e.pageX
+      dragStartSplitterPosition.value = splitterPositionComputed.value
     }
 
     const processDragging = (e: MouseEvent) => {
-      if (!isDragging.value || !containerSizeComputed.value) { return }
+      if (!isDragging.value) { return }
+
+      const currentPosition = props.vertical ? e.pageY : e.pageX
+      const distance = currentPosition - dragStartPosition.value
+      splitterPosition.value = dragStartSplitterPosition.value + Math.floor((distance / containerSizeComputed.value!) * 100)
+    }
 
-      const dragEndPosition = props.vertical ? e.pageY : e.pageX
-      const distance = dragEndPosition - dragStartPosition.value
-      console.log(distance, dragEndPosition, dragStartPosition.value)
+    const maximizePanel = () => {
+      if (!props.maximization || props.disabled) { return }
 
-      splitterPositionComputed.value = splitterPositionComputed.value + Math.floor((distance / containerSizeComputed.value) * 100)
+      splitterPosition.value = props.maximizeStart ? props.limits[1] : props.limits[0]
     }
 
-    const stopDragging = () => (isDragging.value = false)
+    const stopDragging = () => {
+      valueComputed.value = splitterPositionComputed.value
+      isDragging.value = false
+    }
+
+    watch(valueComputed, (v) => {
+      if (__DEV__ && (v < props.limits[0] || v > props.limits[1])) {
+        console.warn('Incorrect `modelValue`. Check current `limits` value.')
+      }
+
+      splitterPosition.value = v
+    })
 
-    return { splitContainer, startDragging, processDragging, stopDragging, splitterPositionComputed }
+    const sizePropertyComputed = computed(() => props.vertical ? 'height' : 'width')
+    const getPanelStyle = (position: 'start' | 'end') => ({
+      [sizePropertyComputed.value]: `${position === 'start' ? splitterPositionComputed.value : 100 - splitterPositionComputed.value}%`,
+    })
+
+    const draggerStyleComputed = computed(() => {
+      if (props.disabled) { return {} }
+      let cursor = props.vertical ? 'var(--va-split-vertical-dragger-cursor)' : 'var(--va-split-horizontal-dragger-cursor)'
+      if (isDragging.value) { cursor = 'var(--va-split-dragging-cursor)' }
+      return { cursor }
+    })
+
+    const classComputed = useBem('va-split', () => ({
+      horizontal: !props.vertical,
+      vertical: props.vertical,
+      dragging: isDragging.value,
+    }))
+
+    return {
+      splitPanelsContainer,
+      startDragging,
+      processDragging,
+      stopDragging,
+      getPanelStyle,
+      maximizePanel,
+      classComputed,
+      draggerStyleComputed,
+    }
   },
 })
 </script>
 
 <style lang="scss">
+@import 'variables';
+
+.va-split {
+  display: flex;
+
+  &__dragger {
+    display: var(--va-split-dragger-display);
+  }
+
+  &__panel {
+    overflow: var(--va-split-panel-overflow);
+  }
 
+  &--dragging {
+    & .va-split__panel {
+      user-select: none;
+      cursor: var(--va-split-dragging-cursor);
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+
+    &.va-split__dragger {
+      height: var(--va-split-dragger-size);
+      align-items: var(--va-split-dragger-align-items);
+    }
+  }
+
+  &--horizontal {
+    flex-direction: row;
+
+    &.va-split__dragger {
+      width: var(--va-split-dragger-size);
+      justify-content: var(--va-split-dragger-justify-content);
+    }
+  }
+}
 </style>
diff --git a/packages/ui/src/components/va-split/_variables.scss b/packages/ui/src/components/va-split/_variables.scss
new file mode 100644
index 0000000000..0e32af6502
--- /dev/null
+++ b/packages/ui/src/components/va-split/_variables.scss
@@ -0,0 +1,12 @@
+:root {
+  --va-split-panel-overflow: scroll;
+
+  --va-split-dragger-display: flex;
+  --va-split-dragger-size: 1rem;
+  --va-split-dragger-justify-content: center;
+  --va-split-dragger-align-items: center;
+
+  --va-split-dragging-cursor: grabbing;
+  --va-split-horizontal-dragger-cursor: col-resize;
+  --va-split-vertical-dragger-cursor: row-resize;
+}
\ No newline at end of file
diff --git a/packages/ui/src/styles/grid/_grid-global-styles.scss b/packages/ui/src/styles/grid/_grid-global-styles.scss
index d2539fdd92..b666138f30 100644
--- a/packages/ui/src/styles/grid/_grid-global-styles.scss
+++ b/packages/ui/src/styles/grid/_grid-global-styles.scss
@@ -260,6 +260,10 @@
   height: 100%;
 }
 
+.fill-width {
+  width: 100%;
+}
+
 .no-wrap {
   @include va-no-wrap();
 }

From 2ca210264e6c45f4dd3743192b87a299e367b9c3 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Sun, 10 Jul 2022 14:53:55 +0600
Subject: [PATCH 04/21] [#1725] split component implementation

---
 packages/ui/src/components/va-split/_variables.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui/src/components/va-split/_variables.scss b/packages/ui/src/components/va-split/_variables.scss
index 0e32af6502..ea8b39eabe 100644
--- a/packages/ui/src/components/va-split/_variables.scss
+++ b/packages/ui/src/components/va-split/_variables.scss
@@ -1,12 +1,10 @@
 :root {
   --va-split-panel-overflow: scroll;
-
   --va-split-dragger-display: flex;
   --va-split-dragger-size: 1rem;
   --va-split-dragger-justify-content: center;
   --va-split-dragger-align-items: center;
-
   --va-split-dragging-cursor: grabbing;
   --va-split-horizontal-dragger-cursor: col-resize;
   --va-split-vertical-dragger-cursor: row-resize;
-}
\ No newline at end of file
+}

From 460023f3691fa70ee3438858cbe1e0482d8f0d09 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Mon, 11 Jul 2022 21:38:26 +0600
Subject: [PATCH 05/21] fix:review suggestions, refactoring

---
 .../split/examples/CustomGrabber.vue          | 19 +++++-
 .../ui-elements/split/examples/Default.vue    | 44 +++++++++++++-
 .../ui-elements/split/examples/Disabled.vue   |  4 +-
 .../split/examples/Maximization.vue           |  4 +-
 .../ui-elements/split/examples/Nested.vue     |  8 +--
 .../ui-elements/split/examples/Vertical.vue   |  4 +-
 .../src/components/va-split/VaSplit.demo.vue  | 51 +++++++++-------
 .../ui/src/components/va-split/VaSplit.vue    | 55 +++++++----------
 .../components/va-split/useSplitDragger.ts    | 60 +++++++++++++++++++
 .../ui/src/styles/global/_utility-global.scss |  4 ++
 .../src/styles/grid/_grid-global-styles.scss  |  4 --
 11 files changed, 184 insertions(+), 73 deletions(-)
 create mode 100644 packages/ui/src/components/va-split/useSplitDragger.ts

diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue b/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
index 0951fbaaa7..61eefc49bb 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
@@ -1,15 +1,15 @@
 <template>
   <va-split class="split-demo">
     <template #start>
-      <div>{{ lorem }}</div>
+      {{ lorem }}
     </template>
     <template #grabber>
-      <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: greenyellow;">
+      <div class="custom-grabber">
         <va-icon name="face" />
       </div>
     </template>
     <template #end>
-      <div>{{ lorem }}</div>
+      {{ lorem }}
     </template>
   </va-split>
 </template>
@@ -25,3 +25,16 @@ export default {
   }),
 }
 </script>
+
+<style lang="scss">
+.split-demo {
+  & .custom-grabber {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: greenyellow;
+  }
+}
+</style>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
index 6c1bf8ac46..a0d00e7017 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
@@ -1,10 +1,14 @@
 <template>
-  <va-split class="split-demo">
+  <va-split class="split-demo split-demo--image">
     <template #start>
-      <div>{{ lorem }}</div>
+      <div class="img-block">
+        <img src="https://picsum.photos/seed/picsum/1536/800" class="img img--start" alt="" />
+      </div>
     </template>
     <template #end>
-      <div>{{ lorem }}</div>
+      <div class="img-block">
+        <img src="https://picsum.photos/seed/picsum/1536/800?grayscale" class="img img--end" alt="" />
+      </div>
     </template>
   </va-split>
 </template>
@@ -24,6 +28,7 @@ export default {
 
 <style lang="scss">
 .split-demo {
+  position: relative;
   height: 11rem;
   padding: 1rem;
   border: 1px solid gainsboro;
@@ -31,5 +36,38 @@ export default {
   & .va-split__panel {
     padding: 0.5rem;
   }
+
+  &--image {
+    height: 22rem;
+    padding: 0;
+
+    & .va-split__panel {
+      padding: 0;
+    }
+
+    & .va-split__dragger {
+      width: 0.5rem;
+    }
+  }
+
+  & .img-block {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .img {
+    position: absolute;
+    top: 0;
+    width: 70vw;
+
+    &--start {
+      left: 0;
+    }
+
+    &--end {
+      right: 0;
+    }
+  }
 }
 </style>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
index ca7618eec8..13832d1560 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
@@ -1,10 +1,10 @@
 <template>
   <va-split class="split-demo" disabled>
     <template #start>
-      <div>{{ lorem }}</div>
+      {{ lorem }}
     </template>
     <template #end>
-      <div>{{ lorem }}</div>
+      {{ lorem }}
     </template>
   </va-split>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
index e81d571087..afaa139c9c 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
@@ -1,10 +1,10 @@
 <template>
   <va-split class="split-demo" maximization>
     <template #start>
-      <div>{{ lorem }}</div>
+      {{ lorem }}
     </template>
     <template #end>
-      <div>{{ lorem }}</div>
+      {{ lorem }}
     </template>
   </va-split>
 </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
index 67b40dd3d6..5a67663e0d 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
@@ -3,20 +3,20 @@
     <template #start>
       <va-split :limits="[10, 90]">
         <template #start>
-          <div>{{lorem}}</div>
+          {{ lorem }}
         </template>
         <template #end>
-          <div>{{lorem}}</div>
+          {{ lorem }}
         </template>
       </va-split>
     </template>
     <template #end>
       <va-split :limits="[10, 90]" vertical style="height: 11rem;">
         <template #start>
-          <div>{{lorem}}</div>
+          {{ lorem }}
         </template>
         <template #end>
-          <div>{{lorem}}</div>
+          {{ lorem }}
         </template>
       </va-split>
     </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
index 3398168d2d..a555ee3776 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
@@ -1,10 +1,10 @@
 <template>
   <va-split class="split-demo" vertical>
     <template #start>
-      <div>{{ lorem }}</div>
+      {{ lorem }}
     </template>
     <template #end>
-      <div>{{ lorem }}</div>
+      {{ lorem }}
     </template>
   </va-split>
 </template>
diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
index ffa64fd8f8..787803c09b 100644
--- a/packages/ui/src/components/va-split/VaSplit.demo.vue
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -3,10 +3,10 @@
     <VbCard title="default">
       <va-split>
         <template #start>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
         <template #end>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
       </va-split>
     </VbCard>
@@ -14,10 +14,10 @@
     <VbCard title="vertical">
       <va-split vertical>
         <template #start>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
         <template #end>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
       </va-split>
     </VbCard>
@@ -25,15 +25,15 @@
     <VbCard title="custom grabber">
       <va-split>
         <template #start>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
         <template #grabber>
-          <div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: greenyellow;">
+          <div class="custom-grabber">
             <va-icon name="face" />
           </div>
         </template>
         <template #end>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
       </va-split>
     </VbCard>
@@ -41,10 +41,10 @@
     <VbCard title="disabled">
       <va-split disabled>
         <template #start>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
         <template #end>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
       </va-split>
     </VbCard>
@@ -52,10 +52,10 @@
     <VbCard title="double click on separator to maximize right panel">
       <va-split maximization>
         <template #start>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
         <template #end>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
       </va-split>
     </VbCard>
@@ -63,10 +63,10 @@
     <VbCard title="double click on separator to maximize left panel">
       <va-split maximization maximize-start>
         <template #start>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
         <template #end>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
       </va-split>
     </VbCard>
@@ -74,10 +74,10 @@
     <VbCard title="custom limits">
       <va-split :limits="[10, 90]">
         <template #start>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
         <template #end>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
       </va-split>
     </VbCard>
@@ -87,20 +87,20 @@
         <template #start>
           <va-split :limits="[10, 90]">
             <template #start>
-              <div>{{$vb.lorem(1000)}}</div>
+              {{$vb.lorem(1000)}}
             </template>
             <template #end>
-              <div>{{$vb.lorem(1000)}}</div>
+              {{$vb.lorem(1000)}}
             </template>
           </va-split>
         </template>
         <template #end>
           <va-split :limits="[10, 90]" vertical>
             <template #start>
-              <div>{{$vb.lorem(1000)}}</div>
+              {{$vb.lorem(1000)}}
             </template>
             <template #end>
-              <div>{{$vb.lorem(1000)}}</div>
+              {{$vb.lorem(1000)}}
             </template>
           </va-split>
         </template>
@@ -110,10 +110,10 @@
     <VbCard title="stateful">
       <va-split stateful>
         <template #start>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
         <template #end>
-          <div>{{$vb.lorem(1000)}}</div>
+          {{$vb.lorem(1000)}}
         </template>
       </va-split>
     </VbCard>
@@ -141,5 +141,14 @@ export default {
       padding: 0.5rem;
     }
   }
+
+  & .custom-grabber {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: greenyellow;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 4073023d11..8011d08635 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -5,8 +5,7 @@
     class="va-split"
     :class="classComputed"
     @mousemove="processDragging"
-    @mouseup="stopDragging"
-    @mouseleave="stopDragging">
+    @mouseup="stopDragging">
     <div
       class="va-split__panel"
       :style="getPanelStyle('start')">
@@ -16,6 +15,7 @@
       class="va-split__dragger"
       :style="draggerStyleComputed"
       @mousedown="startDragging"
+      @touchstart="startDragging"
       @dblclick="maximizePanel">
       <slot name="grabber">
         <va-divider
@@ -34,6 +34,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, shallowRef, computed, watch } from 'vue'
 import { useBem, useComponentPresetProp, useStateful, useStatefulEmits, useStatefulProps } from '../../composables'
+import { useSplitDragger, useSplitDraggerProps } from './useSplitDragger'
 import { __DEV__ } from '../../utils/global-utils'
 
 import { VaDivider } from '../va-divider'
@@ -45,14 +46,13 @@ export default defineComponent({
 
   props: {
     ...useComponentPresetProp,
+    ...useSplitDraggerProps,
     ...useStatefulProps,
     modelValue: {
       type: Number,
       default: 50,
       validator: (v: number) => v <= 100,
     },
-    vertical: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
     maximization: { type: Boolean, default: false },
     maximizeStart: { type: Boolean, default: false },
     limits: { type: Array as any as PropType<[number, number]>, default: () => [30, 70] },
@@ -65,7 +65,7 @@ export default defineComponent({
 
     const splitPanelsContainer = shallowRef<HTMLElement>()
     const containerSizeComputed = computed(() => {
-      if (!splitPanelsContainer.value) { return undefined }
+      if (!splitPanelsContainer.value) { return }
       return props.vertical ? splitPanelsContainer.value.offsetHeight : splitPanelsContainer.value.offsetWidth
     })
 
@@ -76,25 +76,13 @@ export default defineComponent({
       return splitterPosition.value
     })
 
-    const isDragging = ref(false)
-    const dragStartPosition = ref(0)
-    const dragStartSplitterPosition = ref(0)
-
-    const startDragging = (e: MouseEvent) => {
-      if (props.disabled || !containerSizeComputed.value) { return }
-
-      isDragging.value = true
-      dragStartPosition.value = props.vertical ? e.pageY : e.pageX
-      dragStartSplitterPosition.value = splitterPositionComputed.value
-    }
-
-    const processDragging = (e: MouseEvent) => {
-      if (!isDragging.value) { return }
-
-      const currentPosition = props.vertical ? e.pageY : e.pageX
-      const distance = currentPosition - dragStartPosition.value
-      splitterPosition.value = dragStartSplitterPosition.value + Math.floor((distance / containerSizeComputed.value!) * 100)
-    }
+    const {
+      isDragging,
+      startDragging,
+      processDragging,
+      stopDragging,
+      currentSplitterPosition,
+    } = useSplitDragger(containerSizeComputed, splitterPositionComputed, props)
 
     const maximizePanel = () => {
       if (!props.maximization || props.disabled) { return }
@@ -102,11 +90,6 @@ export default defineComponent({
       splitterPosition.value = props.maximizeStart ? props.limits[1] : props.limits[0]
     }
 
-    const stopDragging = () => {
-      valueComputed.value = splitterPositionComputed.value
-      isDragging.value = false
-    }
-
     watch(valueComputed, (v) => {
       if (__DEV__ && (v < props.limits[0] || v > props.limits[1])) {
         console.warn('Incorrect `modelValue`. Check current `limits` value.')
@@ -115,6 +98,15 @@ export default defineComponent({
       splitterPosition.value = v
     })
 
+    watch(currentSplitterPosition, (v) => {
+      splitterPosition.value = v
+    })
+
+    watch(isDragging, (v) => {
+      if (!v) { valueComputed.value = splitterPositionComputed.value }
+      document.documentElement.style.cursor = v ? 'var(--va-split-dragging-cursor)' : ''
+    })
+
     const sizePropertyComputed = computed(() => props.vertical ? 'height' : 'width')
     const getPanelStyle = (position: 'start' | 'end') => ({
       [sizePropertyComputed.value]: `${position === 'start' ? splitterPositionComputed.value : 100 - splitterPositionComputed.value}%`,
@@ -122,9 +114,8 @@ export default defineComponent({
 
     const draggerStyleComputed = computed(() => {
       if (props.disabled) { return {} }
-      let cursor = props.vertical ? 'var(--va-split-vertical-dragger-cursor)' : 'var(--va-split-horizontal-dragger-cursor)'
-      if (isDragging.value) { cursor = 'var(--va-split-dragging-cursor)' }
-      return { cursor }
+      if (isDragging.value) { return { cursor: 'var(--va-split-dragging-cursor)' } }
+      return { cursor: props.vertical ? 'var(--va-split-vertical-dragger-cursor)' : 'var(--va-split-horizontal-dragger-cursor)' }
     })
 
     const classComputed = useBem('va-split', () => ({
diff --git a/packages/ui/src/components/va-split/useSplitDragger.ts b/packages/ui/src/components/va-split/useSplitDragger.ts
new file mode 100644
index 0000000000..c57149747f
--- /dev/null
+++ b/packages/ui/src/components/va-split/useSplitDragger.ts
@@ -0,0 +1,60 @@
+import { ExtractPropTypes, onBeforeUnmount, onMounted, ref, Ref } from 'vue'
+
+export const useSplitDraggerProps = {
+  vertical: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+}
+
+export const useSplitDragger = (
+  containerSizeComputed: Ref<number | undefined>,
+  splitterPositionComputed: Ref<number>,
+  props: ExtractPropTypes<typeof useSplitDraggerProps>,
+) => {
+  const isDragging = ref(false)
+  const dragStartPosition = ref(0)
+  const dragStartSplitterPosition = ref(0)
+  const currentSplitterPosition = ref(0)
+
+  const getEventPosition = (e: MouseEvent | TouchEvent, eventName: 'mousemove' | 'mousedown'): number => {
+    const event = e.type === eventName ? e as MouseEvent : (e as TouchEvent).changedTouches[0]
+    return props.vertical ? event.pageY : event.pageX
+  }
+
+  const startDragging = (e: MouseEvent | TouchEvent) => {
+    if (props.disabled || !containerSizeComputed.value) { return }
+
+    isDragging.value = true
+    dragStartPosition.value = getEventPosition(e, 'mousedown')
+    dragStartSplitterPosition.value = splitterPositionComputed.value
+  }
+
+  const processDragging = (e: MouseEvent | TouchEvent) => {
+    if (!isDragging.value) { return }
+
+    const currentPosition = getEventPosition(e, 'mousemove')
+    const distance = currentPosition - dragStartPosition.value
+    currentSplitterPosition.value = dragStartSplitterPosition.value + Math.floor((distance / containerSizeComputed.value!) * 100)
+  }
+
+  const stopDragging = () => {
+    isDragging.value = false
+  }
+
+  onMounted(() => {
+    document.addEventListener('mousemove', processDragging)
+    document.addEventListener('touchmove', processDragging)
+    document.addEventListener('mouseup', stopDragging)
+    document.addEventListener('mouseleave', stopDragging)
+    document.addEventListener('touchcancel', stopDragging)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('mousemove', processDragging)
+    document.removeEventListener('touchmove', processDragging)
+    document.removeEventListener('mouseup', stopDragging)
+    document.removeEventListener('mouseleave', stopDragging)
+    document.removeEventListener('touchcancel', stopDragging)
+  })
+
+  return { isDragging, startDragging, processDragging, stopDragging, currentSplitterPosition }
+}
diff --git a/packages/ui/src/styles/global/_utility-global.scss b/packages/ui/src/styles/global/_utility-global.scss
index 97aa3f3d24..02d8e1440b 100644
--- a/packages/ui/src/styles/global/_utility-global.scss
+++ b/packages/ui/src/styles/global/_utility-global.scss
@@ -23,3 +23,7 @@
 .visually-hidden {
   @include visually-hidden;
 }
+
+.fill-width {
+  width: 100%;
+}
diff --git a/packages/ui/src/styles/grid/_grid-global-styles.scss b/packages/ui/src/styles/grid/_grid-global-styles.scss
index b666138f30..d2539fdd92 100644
--- a/packages/ui/src/styles/grid/_grid-global-styles.scss
+++ b/packages/ui/src/styles/grid/_grid-global-styles.scss
@@ -260,10 +260,6 @@
   height: 100%;
 }
 
-.fill-width {
-  width: 100%;
-}
-
 .no-wrap {
   @include va-no-wrap();
 }

From ab71406125ab22aba15736981b329f12a8f28581 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 12 Jul 2022 23:20:38 +0600
Subject: [PATCH 06/21] fix:deleted redundant events fix:minor fix
 fix:redundant limits prop changed to number

---
 .../ui/src/components/va-split/VaSplit.vue    | 23 +++++++++++--------
 .../components/va-split/useSplitDragger.ts    |  2 --
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 8011d08635..34cf0f8797 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -3,9 +3,7 @@
     ref="splitPanelsContainer"
     aria-label="split panels"
     class="va-split"
-    :class="classComputed"
-    @mousemove="processDragging"
-    @mouseup="stopDragging">
+    :class="classComputed">
     <div
       class="va-split__panel"
       :style="getPanelStyle('start')">
@@ -32,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, shallowRef, computed, watch } from 'vue'
+import { defineComponent, ref, shallowRef, computed, watch } from 'vue'
 import { useBem, useComponentPresetProp, useStateful, useStatefulEmits, useStatefulProps } from '../../composables'
 import { useSplitDragger, useSplitDraggerProps } from './useSplitDragger'
 import { __DEV__ } from '../../utils/global-utils'
@@ -55,7 +53,11 @@ export default defineComponent({
     },
     maximization: { type: Boolean, default: false },
     maximizeStart: { type: Boolean, default: false },
-    limits: { type: Array as any as PropType<[number, number]>, default: () => [30, 70] },
+    minSize: {
+      type: Number,
+      default: 30,
+      validator: (v: number) => v <= 100 && v >= 0,
+    },
   },
 
   emits: useStatefulEmits,
@@ -71,8 +73,8 @@ export default defineComponent({
 
     const splitterPosition = ref(props.modelValue)
     const splitterPositionComputed = computed(() => {
-      if (splitterPosition.value < props.limits[0]) { return props.limits[0] }
-      if (splitterPosition.value > props.limits[1]) { return props.limits[1] }
+      if (splitterPosition.value < props.minSize) { return props.minSize }
+      if (splitterPosition.value > 100 - props.minSize) { return 100 - props.minSize }
       return splitterPosition.value
     })
 
@@ -87,12 +89,12 @@ export default defineComponent({
     const maximizePanel = () => {
       if (!props.maximization || props.disabled) { return }
 
-      splitterPosition.value = props.maximizeStart ? props.limits[1] : props.limits[0]
+      splitterPosition.value = props.maximizeStart ? 100 - props.minSize : props.minSize
     }
 
     watch(valueComputed, (v) => {
-      if (__DEV__ && (v < props.limits[0] || v > props.limits[1])) {
-        console.warn('Incorrect `modelValue`. Check current `limits` value.')
+      if (__DEV__ && (v < props.minSize || v > 100 - props.minSize)) {
+        console.warn('Incorrect `modelValue`. Check current `minSize` prop value.')
       }
 
       splitterPosition.value = v
@@ -146,6 +148,7 @@ export default defineComponent({
 
   &__dragger {
     display: var(--va-split-dragger-display);
+    user-select: none;
   }
 
   &__panel {
diff --git a/packages/ui/src/components/va-split/useSplitDragger.ts b/packages/ui/src/components/va-split/useSplitDragger.ts
index c57149747f..86123c1a70 100644
--- a/packages/ui/src/components/va-split/useSplitDragger.ts
+++ b/packages/ui/src/components/va-split/useSplitDragger.ts
@@ -44,7 +44,6 @@ export const useSplitDragger = (
     document.addEventListener('mousemove', processDragging)
     document.addEventListener('touchmove', processDragging)
     document.addEventListener('mouseup', stopDragging)
-    document.addEventListener('mouseleave', stopDragging)
     document.addEventListener('touchcancel', stopDragging)
   })
 
@@ -52,7 +51,6 @@ export const useSplitDragger = (
     document.removeEventListener('mousemove', processDragging)
     document.removeEventListener('touchmove', processDragging)
     document.removeEventListener('mouseup', stopDragging)
-    document.removeEventListener('mouseleave', stopDragging)
     document.removeEventListener('touchcancel', stopDragging)
   })
 

From 5f2b1bcaf188ba19bd73057195f311cebac9537d Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 12 Jul 2022 23:21:17 +0600
Subject: [PATCH 07/21] fix:deleted redundant events fix:minor fix
 fix:redundant limits prop changed to number

---
 packages/docs/src/locales/en/en.json                 |  2 +-
 packages/docs/src/locales/ru/ru.json                 |  2 +-
 packages/ui/src/components/va-split/VaSplit.demo.vue | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 8451742796..97eb4d6f0b 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1276,7 +1276,7 @@
     "VaSplit": {
       "props": {
         "vertical": "Changes `va-split` orientation to vertical.",
-        "limits": "Array of maximal sizes (%) for start/end panels.",
+        "minSize": "Minimal size of the each panel (%).",
         "maximization": "End panel size maximization via separator double click.",
         "maximizeStart": "Maximize size of the start panel instead of end one."
       },
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 2dd53ac12f..3e3dab0055 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1206,7 +1206,7 @@
     "VaSplit": {
       "props": {
         "vertical": "Меняет ориентацию сплиттера на вертикальную.",
-        "limits": "Массив максимальных размеров (в %) начальной и конечной панели.",
+        "minSize": "Минимальный размер (в %) панелей.",
         "maximization": "Активирует возможность максимизации размера конечной панели при двойном клике по разделителю.",
         "maximizeStart": "Меняет логику максимизации с конечной на начальную панель."
       },
diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
index 787803c09b..268cbd5c87 100644
--- a/packages/ui/src/components/va-split/VaSplit.demo.vue
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -71,8 +71,8 @@
       </va-split>
     </VbCard>
 
-    <VbCard title="custom limits">
-      <va-split :limits="[10, 90]">
+    <VbCard title="custom min size">
+      <va-split :min-size="20">
         <template #start>
           {{$vb.lorem(1000)}}
         </template>
@@ -83,9 +83,9 @@
     </VbCard>
 
     <VbCard title="nested">
-      <va-split :limits="[10, 90]">
+      <va-split :min-size="10">
         <template #start>
-          <va-split :limits="[10, 90]">
+          <va-split :min-size="10">
             <template #start>
               {{$vb.lorem(1000)}}
             </template>
@@ -95,7 +95,7 @@
           </va-split>
         </template>
         <template #end>
-          <va-split :limits="[10, 90]" vertical>
+          <va-split :min-size="10" vertical>
             <template #start>
               {{$vb.lorem(1000)}}
             </template>

From baa01ab4a34c93d933637cb1a0970198291839cc Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Fri, 15 Jul 2022 15:39:45 +0600
Subject: [PATCH 08/21] fix:changed wrong `modelValue` value warning to
 existing function

---
 packages/ui/src/components/va-split/VaSplit.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 34cf0f8797..487899dde7 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -31,9 +31,11 @@
 
 <script lang="ts">
 import { defineComponent, ref, shallowRef, computed, watch } from 'vue'
+
 import { useBem, useComponentPresetProp, useStateful, useStatefulEmits, useStatefulProps } from '../../composables'
 import { useSplitDragger, useSplitDraggerProps } from './useSplitDragger'
-import { __DEV__ } from '../../utils/global-utils'
+
+import { warn } from '../../services/utils'
 
 import { VaDivider } from '../va-divider'
 
@@ -93,9 +95,7 @@ export default defineComponent({
     }
 
     watch(valueComputed, (v) => {
-      if (__DEV__ && (v < props.minSize || v > 100 - props.minSize)) {
-        console.warn('Incorrect `modelValue`. Check current `minSize` prop value.')
-      }
+      if (v < props.minSize || v > 100 - props.minSize) { warn('Incorrect `modelValue`. Check current `minSize` prop value.') }
 
       splitterPosition.value = v
     })

From d150d69e503f7c57b7f8f56e02bf0018a5a55d32 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Mon, 18 Jul 2022 19:36:46 +0600
Subject: [PATCH 09/21] feat:limits prop logic rework feat:added resize
 observer to the container (to recalc limits) feat:docs updates

---
 packages/docs/src/locales/en/en.json          |   6 +-
 packages/docs/src/locales/ru/ru.json          |   6 +-
 .../split/examples/CustomLimits.vue           |  22 ++++
 .../ui-elements/split/examples/Default.vue    |   3 +-
 .../ui-elements/split/examples/Nested.vue     |   6 +-
 .../ui-elements/split/page-config.ts          |   6 +
 .../src/components/va-split/VaSplit.demo.vue  |  28 ++---
 .../ui/src/components/va-split/VaSplit.vue    | 110 +++++++++++++++---
 8 files changed, 151 insertions(+), 36 deletions(-)
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 97eb4d6f0b..bf76845a36 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1276,7 +1276,7 @@
     "VaSplit": {
       "props": {
         "vertical": "Changes `va-split` orientation to vertical.",
-        "minSize": "Minimal size of the each panel (%).",
+        "limits": "Min-max size limits of the each panel.",
         "maximization": "End panel size maximization via separator double click.",
         "maximizeStart": "Maximize size of the start panel instead of end one."
       },
@@ -4158,6 +4158,10 @@
         "title": "Custom grabber",
         "text": "You can pass via `grabber` slot any content which will overwrite default grabber (`va-divider`)."
       },
+      "customLimits": {
+        "title": "Limits",
+        "text": "`limits` prop allows you to set up panels min-max sizes. For example, `[[10, 'any'], ['50px', '30rem']]` (one of the panels max size should be equal to 100%) will set up min size of the start panel to 10%, max - 100%. For the end panel - 50px and 30rem accordingly. If you don't need max sizes limits but only min ones, you can use this record form: `[10px, 50%]`."
+      },
       "nested": {
         "title": "Nested",
         "text": "Passing another `va-split` component via `start`/`end` slot you can gain different panels combinations."
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 3e3dab0055..0426a3d94d 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1206,7 +1206,7 @@
     "VaSplit": {
       "props": {
         "vertical": "Меняет ориентацию сплиттера на вертикальную.",
-        "minSize": "Минимальный размер (в %) панелей.",
+        "limits": "Максимальный-минимальный размер панелей.",
         "maximization": "Активирует возможность максимизации размера конечной панели при двойном клике по разделителю.",
         "maximizeStart": "Меняет логику максимизации с конечной на начальную панель."
       },
@@ -3999,6 +3999,10 @@
         "title": "Кастомный разделитель",
         "text": "Передав содержимое в слот `grabber`, оно заменит стандартный разделитель-граббер."
       },
+      "customLimits": {
+        "title": "Лимиты",
+        "text": "С помощью свойства `limits` вы можете детально настроить минимальные-максимальные размеры панелей, используя любые величины. Например, `[[10, 'any'], ['50px', '30rem']]` установит минимальный размер начальной панели на 10%, а максимальный - на 100%, для конечной панели - 50px и 30rem соответственно. Если максимальные размеры вам устанавливать не требуется, а только минимальные, то используйте запись вида `[10px, 50%]`."
+      },
       "nested": {
         "title": "Вложенность",
         "text": "Передавая в слоты `start`/`end` еще один `va-split`, можно создавать любые комбинации панелей."
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue b/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue
new file mode 100644
index 0000000000..89b936f3bb
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue
@@ -0,0 +1,22 @@
+<template>
+  <va-split class="split-demo" :limits="[[10, 'any'], ['50px', '30rem']]">
+    <template #start>
+      {{ lorem }}
+    </template>
+    <template #end>
+      {{ lorem }}
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { VaSplit } from 'vuestic-ui/src/components/va-split'
+import { lorem } from './Default'
+
+export default {
+  components: { VaSplit },
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
index a0d00e7017..3871f89a0e 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-split class="split-demo split-demo--image">
+  <va-split class="split-demo split-demo--image" :limits="[10, 10]">
     <template #start>
       <div class="img-block">
         <img src="https://picsum.photos/seed/picsum/1536/800" class="img img--start" alt="" />
@@ -54,6 +54,7 @@ export default {
     position: relative;
     height: 100%;
     overflow: hidden;
+    user-select: none;
   }
 
   .img {
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
index 5a67663e0d..be837f331e 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
@@ -1,7 +1,7 @@
 <template>
-  <va-split :limits="[10, 90]" class="split-demo">
+  <va-split class="split-demo">
     <template #start>
-      <va-split :limits="[10, 90]">
+      <va-split>
         <template #start>
           {{ lorem }}
         </template>
@@ -11,7 +11,7 @@
       </va-split>
     </template>
     <template #end>
-      <va-split :limits="[10, 90]" vertical style="height: 11rem;">
+      <va-split vertical style="height: 8rem;">
         <template #start>
           {{ lorem }}
         </template>
diff --git a/packages/docs/src/page-configs/ui-elements/split/page-config.ts b/packages/docs/src/page-configs/ui-elements/split/page-config.ts
index 65ea5ed10d..f4ef4cb75a 100644
--- a/packages/docs/src/page-configs/ui-elements/split/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/split/page-config.ts
@@ -33,6 +33,12 @@ const config: ApiDocsBlock[] = [
     'CustomGrabber',
   ),
 
+  ...block.exampleBlock(
+    'split.examples.customLimits.title',
+    'split.examples.customLimits.text',
+    'CustomLimits',
+  ),
+
   ...block.exampleBlock(
     'split.examples.nested.title',
     'split.examples.nested.text',
diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
index 268cbd5c87..63858f59c9 100644
--- a/packages/ui/src/components/va-split/VaSplit.demo.vue
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -22,6 +22,17 @@
       </va-split>
     </VbCard>
 
+    <VbCard title="custom limits">
+      <va-split :limits="[[10, 'any'], ['50px', '30rem']]">
+        <template #start>
+          {{$vb.lorem(1000)}}
+        </template>
+        <template #end>
+          {{$vb.lorem(1000)}}
+        </template>
+      </va-split>
+    </VbCard>
+
     <VbCard title="custom grabber">
       <va-split>
         <template #start>
@@ -71,21 +82,10 @@
       </va-split>
     </VbCard>
 
-    <VbCard title="custom min size">
-      <va-split :min-size="20">
-        <template #start>
-          {{$vb.lorem(1000)}}
-        </template>
-        <template #end>
-          {{$vb.lorem(1000)}}
-        </template>
-      </va-split>
-    </VbCard>
-
     <VbCard title="nested">
-      <va-split :min-size="10">
+      <va-split>
         <template #start>
-          <va-split :min-size="10">
+          <va-split>
             <template #start>
               {{$vb.lorem(1000)}}
             </template>
@@ -95,7 +95,7 @@
           </va-split>
         </template>
         <template #end>
-          <va-split :min-size="10" vertical>
+          <va-split vertical>
             <template #start>
               {{$vb.lorem(1000)}}
             </template>
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 487899dde7..d084ec2bdc 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -30,15 +30,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, shallowRef, computed, watch } from 'vue'
+import { defineComponent, PropType, ref, shallowRef, computed, watch, onMounted } from 'vue'
+import isString from 'lodash/isString.js'
+import isNumber from 'lodash/isNumber.js'
 
-import { useBem, useComponentPresetProp, useStateful, useStatefulEmits, useStatefulProps } from '../../composables'
+import { useBem, useComponentPresetProp, useStateful, useStatefulEmits, useStatefulProps, useResizeObserver } from '../../composables'
 import { useSplitDragger, useSplitDraggerProps } from './useSplitDragger'
 
 import { warn } from '../../services/utils'
 
 import { VaDivider } from '../va-divider'
 
+type SplitLimit = number | string | string[]
+
 export default defineComponent({
   name: 'VaSplit',
 
@@ -55,28 +59,98 @@ export default defineComponent({
     },
     maximization: { type: Boolean, default: false },
     maximizeStart: { type: Boolean, default: false },
-    minSize: {
-      type: Number,
-      default: 30,
-      validator: (v: number) => v <= 100 && v >= 0,
+    limits: {
+      type: Array as any as PropType<[SplitLimit, SplitLimit]>,
+      default: () => ['30%', '30%'],
     },
   },
 
   emits: useStatefulEmits,
 
   setup: (props, { emit }) => {
+    const splitPanelsContainer = shallowRef<HTMLElement>()
+
     const { valueComputed } = useStateful(props, emit)
 
-    const splitPanelsContainer = shallowRef<HTMLElement>()
-    const containerSizeComputed = computed(() => {
-      if (!splitPanelsContainer.value) { return }
-      return props.vertical ? splitPanelsContainer.value.offsetHeight : splitPanelsContainer.value.offsetWidth
+    const containerSize = ref()
+    const getContainerSize = () => {
+      containerSize.value = props.vertical ? splitPanelsContainer.value?.offsetHeight : splitPanelsContainer.value?.offsetWidth
+    }
+    onMounted(getContainerSize)
+    useResizeObserver([splitPanelsContainer], getContainerSize)
+
+    const convertToPercents = (v: string | number) => {
+      let numberValue = ''
+      let measureValue = ''
+
+      if (isNumber(v)) { return v }
+
+      v.split('')
+        .filter((char) => char)
+        .forEach((char) => {
+          !isNaN(+char) ? numberValue += char : measureValue += char
+        })
+
+      switch (measureValue) {
+        case '%':
+          return +numberValue
+        case 'px':
+          return (+numberValue / containerSize.value!) * 100
+        case 'rem':
+          return ((+numberValue * 16) / containerSize.value!) * 100
+        case 'any':
+        case '':
+          return 100
+        default:
+          warn('Invalid limits measure!')
+          return 0
+      }
+    }
+    const getPanelMinMax = (v: SplitLimit) => {
+      if (!v || !containerSize.value) { return }
+
+      let minPercents = 0
+      let maxPercents = 100
+
+      if (isString(v) || isNumber(v)) { minPercents = convertToPercents(v) }
+
+      if (Array.isArray(v)) {
+        minPercents = convertToPercents(v[0])
+        maxPercents = convertToPercents(v[1])
+      }
+
+      if (minPercents > maxPercents) {
+        warn(`Min panels size can not be larger than max one! Passed limit: ${v}.`)
+        maxPercents = minPercents
+      }
+
+      return { min: minPercents, max: maxPercents }
+    }
+
+    const startPanelMinMax = computed(() => getPanelMinMax(props.limits[0]))
+    const endPanelMinMax = computed(() => {
+      const result = getPanelMinMax(props.limits[1])
+
+      if (result?.max && startPanelMinMax.value?.max && result.max !== 100 && startPanelMinMax.value.max !== 100) {
+        result.max = 100
+        warn('One of the panels max size should be equal to 100%!')
+      }
+
+      return result
     })
 
     const splitterPosition = ref(props.modelValue)
     const splitterPositionComputed = computed(() => {
-      if (splitterPosition.value < props.minSize) { return props.minSize }
-      if (splitterPosition.value > 100 - props.minSize) { return 100 - props.minSize }
+      if (!startPanelMinMax.value || !endPanelMinMax.value) { return splitterPosition.value }
+
+      // checking min panels size
+      if (splitterPosition.value < startPanelMinMax.value.min) { return startPanelMinMax.value.min }
+      if (splitterPosition.value > 100 - endPanelMinMax.value.min) { return 100 - endPanelMinMax.value.min }
+
+      // checking max panels size
+      if (splitterPosition.value > startPanelMinMax.value.max) { return startPanelMinMax.value.max }
+      if (splitterPosition.value < 100 - endPanelMinMax.value.max) { return 100 - endPanelMinMax.value.max }
+
       return splitterPosition.value
     })
 
@@ -86,16 +160,18 @@ export default defineComponent({
       processDragging,
       stopDragging,
       currentSplitterPosition,
-    } = useSplitDragger(containerSizeComputed, splitterPositionComputed, props)
+    } = useSplitDragger(containerSize, splitterPositionComputed, props)
 
     const maximizePanel = () => {
-      if (!props.maximization || props.disabled) { return }
+      if (!props.maximization || props.disabled || !startPanelMinMax.value || !endPanelMinMax.value) { return }
 
-      splitterPosition.value = props.maximizeStart ? 100 - props.minSize : props.minSize
+      splitterPosition.value = props.maximizeStart ? 100 - endPanelMinMax.value.min : startPanelMinMax.value.min
     }
 
     watch(valueComputed, (v) => {
-      if (v < props.minSize || v > 100 - props.minSize) { warn('Incorrect `modelValue`. Check current `minSize` prop value.') }
+      if ((startPanelMinMax.value && endPanelMinMax.value) && (v < startPanelMinMax.value.min || v > 100 - endPanelMinMax.value.min)) {
+        warn('Incorrect `modelValue`. Check current `limits` prop value.')
+      }
 
       splitterPosition.value = v
     })
@@ -128,11 +204,13 @@ export default defineComponent({
 
     return {
       splitPanelsContainer,
+
       startDragging,
       processDragging,
       stopDragging,
       getPanelStyle,
       maximizePanel,
+
       classComputed,
       draggerStyleComputed,
     }

From 6628009d0b298490f20fe2a59722f454a98d10ca Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 19 Jul 2022 17:24:58 +0600
Subject: [PATCH 10/21] feat:additional checks & limits logic update fix:
 review fixes

---
 packages/docs/src/locales/en/en.json          |  2 +-
 .../ui/src/components/va-split/VaSplit.vue    | 48 +++++++++++++------
 packages/ui/src/components/va-split/types.ts  |  1 +
 3 files changed, 36 insertions(+), 15 deletions(-)
 create mode 100644 packages/ui/src/components/va-split/types.ts

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index bf76845a36..1d26ff011b 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -4160,7 +4160,7 @@
       },
       "customLimits": {
         "title": "Limits",
-        "text": "`limits` prop allows you to set up panels min-max sizes. For example, `[[10, 'any'], ['50px', '30rem']]` (one of the panels max size should be equal to 100%) will set up min size of the start panel to 10%, max - 100%. For the end panel - 50px and 30rem accordingly. If you don't need max sizes limits but only min ones, you can use this record form: `[10px, 50%]`."
+        "text": "`limits` prop allows you to set up panels min-max sizes. For example, `[[10, 'any'], ['50px', '30rem']]` (sum of different panels min and max size should be equal to 100%) will set up min size of the start panel to 10%, max - 100%. For the end panel - 50px and 30rem accordingly. If you don't need max sizes limits but only min ones, you can use this record form: `[10px, 50%]`."
       },
       "nested": {
         "title": "Nested",
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index d084ec2bdc..da35e8ccbe 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -6,7 +6,8 @@
     :class="classComputed">
     <div
       class="va-split__panel"
-      :style="getPanelStyle('start')">
+      :style="getPanelStyle('start')"
+    >
       <slot name="start" />
     </div>
     <div
@@ -23,7 +24,8 @@
     </div>
     <div
       class="va-split__panel"
-      :style="getPanelStyle('end')">
+      :style="getPanelStyle('end')"
+    >
       <slot name="end" />
     </div>
   </section>
@@ -34,14 +36,19 @@ import { defineComponent, PropType, ref, shallowRef, computed, watch, onMounted
 import isString from 'lodash/isString.js'
 import isNumber from 'lodash/isNumber.js'
 
-import { useBem, useComponentPresetProp, useStateful, useStatefulEmits, useStatefulProps, useResizeObserver } from '../../composables'
+import {
+  useBem,
+  useComponentPresetProp,
+  useStateful, useStatefulEmits, useStatefulProps,
+  useResizeObserver,
+} from '../../composables'
 import { useSplitDragger, useSplitDraggerProps } from './useSplitDragger'
 
 import { warn } from '../../services/utils'
 
-import { VaDivider } from '../va-divider'
+import { SplitLimit } from './types'
 
-type SplitLimit = number | string | string[]
+import { VaDivider } from '../va-divider'
 
 export default defineComponent({
   name: 'VaSplit',
@@ -61,7 +68,7 @@ export default defineComponent({
     maximizeStart: { type: Boolean, default: false },
     limits: {
       type: Array as any as PropType<[SplitLimit, SplitLimit]>,
-      default: () => ['30%', '30%'],
+      default: () => [0, 0],
     },
   },
 
@@ -86,7 +93,7 @@ export default defineComponent({
       if (isNumber(v)) { return v }
 
       v.split('')
-        .filter((char) => char)
+        .filter((char) => char && char !== ' ')
         .forEach((char) => {
           !isNaN(+char) ? numberValue += char : measureValue += char
         })
@@ -131,9 +138,18 @@ export default defineComponent({
     const endPanelMinMax = computed(() => {
       const result = getPanelMinMax(props.limits[1])
 
-      if (result?.max && startPanelMinMax.value?.max && result.max !== 100 && startPanelMinMax.value.max !== 100) {
-        result.max = 100
-        warn('One of the panels max size should be equal to 100%!')
+      // here potentially can be a conflict between two checks below but the first one won't break component
+      if (result?.min && startPanelMinMax.value?.min && Math.floor(result.min + startPanelMinMax.value.min) > 100) {
+        warn('The sum of different panels min sizes should be lesser than 100% of the container size!')
+        result.min = 100 - startPanelMinMax.value.min
+      }
+
+      if (result?.min && result?.max &&
+        startPanelMinMax.value?.min && startPanelMinMax.value?.max &&
+        (Math.ceil(result.min + startPanelMinMax.value.max) < 100 ||
+          Math.ceil(result.max + startPanelMinMax.value.min) < 100)) {
+        warn('The sum of different panels min and max sizes should be equal to 100% of the container size!')
+        result.min = 100 - startPanelMinMax.value.max
       }
 
       return result
@@ -174,7 +190,7 @@ export default defineComponent({
       }
 
       splitterPosition.value = v
-    })
+    }, { immediate: true })
 
     watch(currentSplitterPosition, (v) => {
       splitterPosition.value = v
@@ -186,9 +202,13 @@ export default defineComponent({
     })
 
     const sizePropertyComputed = computed(() => props.vertical ? 'height' : 'width')
-    const getPanelStyle = (position: 'start' | 'end') => ({
-      [sizePropertyComputed.value]: `${position === 'start' ? splitterPositionComputed.value : 100 - splitterPositionComputed.value}%`,
-    })
+    const getPanelStyle = (position: 'start' | 'end') => {
+      let sizeValue = position === 'start' ? splitterPositionComputed.value : 100 - splitterPositionComputed.value
+      if (sizeValue < 0) { sizeValue = 0 }
+      if (sizeValue > 100) { sizeValue = 100 }
+
+      return { [sizePropertyComputed.value]: `${sizeValue}%` }
+    }
 
     const draggerStyleComputed = computed(() => {
       if (props.disabled) { return {} }
diff --git a/packages/ui/src/components/va-split/types.ts b/packages/ui/src/components/va-split/types.ts
new file mode 100644
index 0000000000..61e397b529
--- /dev/null
+++ b/packages/ui/src/components/va-split/types.ts
@@ -0,0 +1 @@
+export type SplitLimit = number | string | string[]

From 6101d768c3f77f37f6b967e1848e2d22cd31c701 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 19 Jul 2022 23:01:24 +0600
Subject: [PATCH 11/21] fix:review fixes & updates

---
 .../ui/src/components/va-split/VaSplit.vue    | 36 ++++++++-----------
 .../components/va-split/useSplitDragger.ts    |  2 +-
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index da35e8ccbe..c68c8a4490 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -35,6 +35,8 @@
 import { defineComponent, PropType, ref, shallowRef, computed, watch, onMounted } from 'vue'
 import isString from 'lodash/isString.js'
 import isNumber from 'lodash/isNumber.js'
+import isUndefined from 'lodash/isUndefined.js'
+import clamp from 'lodash/clamp.js'
 
 import {
   useBem,
@@ -114,7 +116,7 @@ export default defineComponent({
       }
     }
     const getPanelMinMax = (v: SplitLimit) => {
-      if (!v || !containerSize.value) { return }
+      if (isUndefined(v) || !containerSize.value) { return }
 
       let minPercents = 0
       let maxPercents = 100
@@ -139,42 +141,36 @@ export default defineComponent({
       const result = getPanelMinMax(props.limits[1])
 
       // here potentially can be a conflict between two checks below but the first one won't break component
-      if (result?.min && startPanelMinMax.value?.min && Math.floor(result.min + startPanelMinMax.value.min) > 100) {
+      if (result?.min && isUndefined(startPanelMinMax.value?.min) && Math.floor(result.min + startPanelMinMax.value!.min) > 100) {
         warn('The sum of different panels min sizes should be lesser than 100% of the container size!')
-        result.min = 100 - startPanelMinMax.value.min
+        result.min = 100 - startPanelMinMax.value!.min
       }
 
       if (result?.min && result?.max &&
-        startPanelMinMax.value?.min && startPanelMinMax.value?.max &&
-        (Math.ceil(result.min + startPanelMinMax.value.max) < 100 ||
-          Math.ceil(result.max + startPanelMinMax.value.min) < 100)) {
+        !isUndefined(startPanelMinMax.value?.min) && isUndefined(startPanelMinMax.value?.max) &&
+        (Math.ceil(result.min + startPanelMinMax.value!.max) < 100 ||
+          Math.ceil(result.max + startPanelMinMax.value!.min) < 100)) {
         warn('The sum of different panels min and max sizes should be equal to 100% of the container size!')
-        result.min = 100 - startPanelMinMax.value.max
+        result.min = 100 - startPanelMinMax.value!.max
       }
 
       return result
     })
 
-    const splitterPosition = ref(props.modelValue)
+    const splitterPosition = ref(valueComputed.value)
     const splitterPositionComputed = computed(() => {
       if (!startPanelMinMax.value || !endPanelMinMax.value) { return splitterPosition.value }
 
-      // checking min panels size
-      if (splitterPosition.value < startPanelMinMax.value.min) { return startPanelMinMax.value.min }
-      if (splitterPosition.value > 100 - endPanelMinMax.value.min) { return 100 - endPanelMinMax.value.min }
-
-      // checking max panels size
-      if (splitterPosition.value > startPanelMinMax.value.max) { return startPanelMinMax.value.max }
-      if (splitterPosition.value < 100 - endPanelMinMax.value.max) { return 100 - endPanelMinMax.value.max }
-
-      return splitterPosition.value
+      return clamp(
+        splitterPosition.value,
+        Math.max(startPanelMinMax.value.min, 100 - endPanelMinMax.value.max),
+        Math.min(startPanelMinMax.value.max, 100 - endPanelMinMax.value.min),
+      )
     })
 
     const {
       isDragging,
       startDragging,
-      processDragging,
-      stopDragging,
       currentSplitterPosition,
     } = useSplitDragger(containerSize, splitterPositionComputed, props)
 
@@ -226,8 +222,6 @@ export default defineComponent({
       splitPanelsContainer,
 
       startDragging,
-      processDragging,
-      stopDragging,
       getPanelStyle,
       maximizePanel,
 
diff --git a/packages/ui/src/components/va-split/useSplitDragger.ts b/packages/ui/src/components/va-split/useSplitDragger.ts
index 86123c1a70..95d4770e0d 100644
--- a/packages/ui/src/components/va-split/useSplitDragger.ts
+++ b/packages/ui/src/components/va-split/useSplitDragger.ts
@@ -54,5 +54,5 @@ export const useSplitDragger = (
     document.removeEventListener('touchcancel', stopDragging)
   })
 
-  return { isDragging, startDragging, processDragging, stopDragging, currentSplitterPosition }
+  return { isDragging, startDragging, currentSplitterPosition }
 }

From cf0d94c36a939dc75e69b67f5e534a8dc2b870f3 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Wed, 20 Jul 2022 13:49:41 +0600
Subject: [PATCH 12/21] feat:maximization logic code style fix

---
 packages/ui/src/components/va-split/VaSplit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index c68c8a4490..1ef1966f99 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -177,7 +177,7 @@ export default defineComponent({
     const maximizePanel = () => {
       if (!props.maximization || props.disabled || !startPanelMinMax.value || !endPanelMinMax.value) { return }
 
-      splitterPosition.value = props.maximizeStart ? 100 - endPanelMinMax.value.min : startPanelMinMax.value.min
+      splitterPosition.value = props.maximizeStart ? startPanelMinMax.value.max : 100 - endPanelMinMax.value.max
     }
 
     watch(valueComputed, (v) => {

From 8ede89b10e0715e2d161e2a14afa9caa15a6d599 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Wed, 20 Jul 2022 13:51:16 +0600
Subject: [PATCH 13/21] fix:added export of the component

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

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 0ff8eb1641..e56f71a2e6 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -61,6 +61,7 @@ export * from './va-separator'
 export * from './va-sidebar'
 export * from './va-slider'
 export * from './va-spacer'
+export * from './va-split'
 export * from './va-switch'
 export * from './va-toast'
 export * from './va-tabs'

From 69676b98f855fbf856b6d8d44ce80703d5280986 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Wed, 20 Jul 2022 15:03:48 +0600
Subject: [PATCH 14/21] fix:split component added to the vuestic plugin

---
 packages/ui/src/vuestic-plugin/vuestic-components.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/vuestic-plugin/vuestic-components.ts b/packages/ui/src/vuestic-plugin/vuestic-components.ts
index f3eae40167..553993d2f4 100644
--- a/packages/ui/src/vuestic-plugin/vuestic-components.ts
+++ b/packages/ui/src/vuestic-plugin/vuestic-components.ts
@@ -65,6 +65,7 @@ export {
   VaSidebarItemTitle,
   VaSlider,
   VaSpacer,
+  VaSplit,
   VaSwitch,
   VaTabs, VaTab,
   VaTimeInput,

From 714bfe195bc5d556e662297d955b5049d94831ef Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Wed, 20 Jul 2022 15:04:32 +0600
Subject: [PATCH 15/21] fix:removed redundant imports in docs examples

---
 .../page-configs/ui-elements/split/examples/CustomGrabber.vue  | 2 --
 .../page-configs/ui-elements/split/examples/CustomLimits.vue   | 2 --
 .../src/page-configs/ui-elements/split/examples/Default.vue    | 3 ---
 .../src/page-configs/ui-elements/split/examples/Disabled.vue   | 2 --
 .../page-configs/ui-elements/split/examples/Maximization.vue   | 2 --
 .../src/page-configs/ui-elements/split/examples/Nested.vue     | 2 --
 .../src/page-configs/ui-elements/split/examples/Vertical.vue   | 2 --
 7 files changed, 15 deletions(-)

diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue b/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
index 61eefc49bb..5ab8f56f64 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue
@@ -15,11 +15,9 @@
 </template>
 
 <script>
-import { VaSplit } from 'vuestic-ui/src/components/va-split'
 import { lorem } from './Default'
 
 export default {
-  components: { VaSplit },
   data: () => ({
     lorem,
   }),
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue b/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue
index 89b936f3bb..e115d98c3c 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue
@@ -10,11 +10,9 @@
 </template>
 
 <script>
-import { VaSplit } from 'vuestic-ui/src/components/va-split'
 import { lorem } from './Default'
 
 export default {
-  components: { VaSplit },
   data: () => ({
     lorem,
   }),
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
index 3871f89a0e..0e6502081c 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
@@ -14,12 +14,9 @@
 </template>
 
 <script>
-import { VaSplit } from 'vuestic-ui/src/components/va-split'
-
 export const lorem = 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.'
 
 export default {
-  components: { VaSplit },
   data: () => ({
     lorem,
   }),
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
index 13832d1560..1f00a83413 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue
@@ -10,11 +10,9 @@
 </template>
 
 <script>
-import { VaSplit } from 'vuestic-ui/src/components/va-split'
 import { lorem } from './Default'
 
 export default {
-  components: { VaSplit },
   data: () => ({
     lorem,
   }),
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
index afaa139c9c..53b59be086 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue
@@ -10,11 +10,9 @@
 </template>
 
 <script>
-import { VaSplit } from 'vuestic-ui/src/components/va-split'
 import { lorem } from './Default'
 
 export default {
-  components: { VaSplit },
   data: () => ({
     lorem,
   }),
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
index be837f331e..8f398809b4 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue
@@ -24,11 +24,9 @@
 </template>
 
 <script>
-import { VaSplit } from 'vuestic-ui/src/components/va-split'
 import { lorem } from './Default'
 
 export default {
-  components: { VaSplit },
   data: () => ({
     lorem,
   }),
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
index a555ee3776..c65016ec2c 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Vertical.vue
@@ -10,11 +10,9 @@
 </template>
 
 <script>
-import { VaSplit } from 'vuestic-ui/src/components/va-split'
 import { lorem } from './Default'
 
 export default {
-  components: { VaSplit },
   data: () => ({
     lorem,
   }),

From bf794243558e7790453673b9081e391caa7844f9 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Wed, 20 Jul 2022 16:17:23 +0600
Subject: [PATCH 16/21] fix:limit logic refactoring

---
 .../src/components/va-split/VaSplit.demo.vue  |  2 +-
 .../ui/src/components/va-split/VaSplit.vue    | 59 ++++++++++---------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
index 63858f59c9..93d398b1fc 100644
--- a/packages/ui/src/components/va-split/VaSplit.demo.vue
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -23,7 +23,7 @@
     </VbCard>
 
     <VbCard title="custom limits">
-      <va-split :limits="[[10, 'any'], ['50px', '30rem']]">
+      <va-split :limits="[[5, 'any'], ['0%', '800px']]">
         <template #start>
           {{$vb.lorem(1000)}}
         </template>
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 1ef1966f99..b8efa0499e 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -88,7 +88,7 @@ export default defineComponent({
     onMounted(getContainerSize)
     useResizeObserver([splitPanelsContainer], getContainerSize)
 
-    const convertToPercents = (v: string | number) => {
+    const convertToPercents = (v: string | number, type: 'min' | 'max') => {
       let numberValue = ''
       let measureValue = ''
 
@@ -108,6 +108,7 @@ export default defineComponent({
         case 'rem':
           return ((+numberValue * 16) / containerSize.value!) * 100
         case 'any':
+          return type === 'min' ? 0 : 100
         case '':
           return 100
         default:
@@ -121,11 +122,11 @@ export default defineComponent({
       let minPercents = 0
       let maxPercents = 100
 
-      if (isString(v) || isNumber(v)) { minPercents = convertToPercents(v) }
+      if (isString(v) || isNumber(v)) { minPercents = convertToPercents(v, 'min') }
 
       if (Array.isArray(v)) {
-        minPercents = convertToPercents(v[0])
-        maxPercents = convertToPercents(v[1])
+        minPercents = convertToPercents(v[0], 'min')
+        maxPercents = convertToPercents(v[1], 'max')
       }
 
       if (minPercents > maxPercents) {
@@ -133,38 +134,42 @@ export default defineComponent({
         maxPercents = minPercents
       }
 
-      return { min: minPercents, max: maxPercents }
+      return { min: minPercents ?? 0, max: maxPercents ?? 100 }
     }
 
-    const startPanelMinMax = computed(() => getPanelMinMax(props.limits[0]))
-    const endPanelMinMax = computed(() => {
-      const result = getPanelMinMax(props.limits[1])
+    const startPanelMinMax = computed(() => getPanelMinMax(props.limits[0]) ?? { min: 0, max: 100 })
+    const endPanelMinMax = computed(() => getPanelMinMax(props.limits[1]) ?? { min: 0, max: 100 })
 
-      // here potentially can be a conflict between two checks below but the first one won't break component
-      if (result?.min && isUndefined(startPanelMinMax.value?.min) && Math.floor(result.min + startPanelMinMax.value!.min) > 100) {
-        warn('The sum of different panels min sizes should be lesser than 100% of the container size!')
-        result.min = 100 - startPanelMinMax.value!.min
+    const endPanelMinChecked = computed(() => {
+      const passedCheck = !(startPanelMinMax.value.min + endPanelMinMax.value.min > 100)
+      if (!passedCheck) {
+        warn('The sum of different panels min sizes should be lesser or equal to 100% of the container size!')
       }
-
-      if (result?.min && result?.max &&
-        !isUndefined(startPanelMinMax.value?.min) && isUndefined(startPanelMinMax.value?.max) &&
-        (Math.ceil(result.min + startPanelMinMax.value!.max) < 100 ||
-          Math.ceil(result.max + startPanelMinMax.value!.min) < 100)) {
-        warn('The sum of different panels min and max sizes should be equal to 100% of the container size!')
-        result.min = 100 - startPanelMinMax.value!.max
+      return !passedCheck ? 100 - startPanelMinMax.value.min : endPanelMinMax.value.min
+    })
+    const panelsMinMax = computed(() => {
+      if (Math.ceil(endPanelMinMax.value.max + startPanelMinMax.value.max) < 100) {
+        warn('The sum of different panels max sizes should be equal to 100% of the container size!')
       }
 
-      return result
+      return {
+        start: {
+          min: startPanelMinMax.value.min,
+          max: Math.min(startPanelMinMax.value.max, 100 - endPanelMinChecked.value),
+        },
+        end: {
+          min: endPanelMinChecked.value,
+          max: Math.min(endPanelMinMax.value.max, 100 - startPanelMinMax.value.min),
+        },
+      }
     })
 
     const splitterPosition = ref(valueComputed.value)
     const splitterPositionComputed = computed(() => {
-      if (!startPanelMinMax.value || !endPanelMinMax.value) { return splitterPosition.value }
-
       return clamp(
         splitterPosition.value,
-        Math.max(startPanelMinMax.value.min, 100 - endPanelMinMax.value.max),
-        Math.min(startPanelMinMax.value.max, 100 - endPanelMinMax.value.min),
+        Math.max(panelsMinMax.value.start.min, 100 - panelsMinMax.value.end.max),
+        Math.min(panelsMinMax.value.start.max, 100 - panelsMinMax.value.end.min),
       )
     })
 
@@ -175,13 +180,13 @@ export default defineComponent({
     } = useSplitDragger(containerSize, splitterPositionComputed, props)
 
     const maximizePanel = () => {
-      if (!props.maximization || props.disabled || !startPanelMinMax.value || !endPanelMinMax.value) { return }
+      if (!props.maximization || props.disabled) { return }
 
-      splitterPosition.value = props.maximizeStart ? startPanelMinMax.value.max : 100 - endPanelMinMax.value.max
+      splitterPosition.value = props.maximizeStart ? panelsMinMax.value.start.max : 100 - panelsMinMax.value.end.max
     }
 
     watch(valueComputed, (v) => {
-      if ((startPanelMinMax.value && endPanelMinMax.value) && (v < startPanelMinMax.value.min || v > 100 - endPanelMinMax.value.min)) {
+      if (v < panelsMinMax.value.start.min || v > 100 - panelsMinMax.value.end.min) {
         warn('Incorrect `modelValue`. Check current `limits` prop value.')
       }
 

From 2467bc90e7724600072220338c3754cfd70158e8 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Fri, 22 Jul 2022 20:20:10 +0600
Subject: [PATCH 17/21] feat:dynamic rem value

---
 packages/ui/src/components/va-split/VaSplit.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index b8efa0499e..2fbe9b1c11 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -82,11 +82,14 @@ export default defineComponent({
     const { valueComputed } = useStateful(props, emit)
 
     const containerSize = ref()
-    const getContainerSize = () => {
+    const bodyFontSize = ref(16)
+
+    const handleContainerResize = () => {
       containerSize.value = props.vertical ? splitPanelsContainer.value?.offsetHeight : splitPanelsContainer.value?.offsetWidth
+      bodyFontSize.value = parseFloat(getComputedStyle(document.documentElement).fontSize)
     }
-    onMounted(getContainerSize)
-    useResizeObserver([splitPanelsContainer], getContainerSize)
+    onMounted(handleContainerResize)
+    useResizeObserver([splitPanelsContainer], handleContainerResize)
 
     const convertToPercents = (v: string | number, type: 'min' | 'max') => {
       let numberValue = ''
@@ -106,7 +109,7 @@ export default defineComponent({
         case 'px':
           return (+numberValue / containerSize.value!) * 100
         case 'rem':
-          return ((+numberValue * 16) / containerSize.value!) * 100
+          return ((+numberValue * bodyFontSize.value) / containerSize.value!) * 100
         case 'any':
           return type === 'min' ? 0 : 100
         case '':

From bd198f8675edaade6358c32c8b266cdf769f6927 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 2 Aug 2022 16:48:47 +0600
Subject: [PATCH 18/21] fix:dragger rework

---
 .../ui-elements/split/examples/Default.vue    | 10 +--
 .../ui/src/components/va-split/VaSplit.vue    | 72 ++++++++++++++-----
 .../src/components/va-split/_variables.scss   |  2 +-
 3 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
index 0e6502081c..9d22946295 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
@@ -2,12 +2,12 @@
   <va-split class="split-demo split-demo--image" :limits="[10, 10]">
     <template #start>
       <div class="img-block">
-        <img src="https://picsum.photos/seed/picsum/1536/800" class="img img--start" alt="" />
+        <img src="https://picsum.photos/seed/picsum/1536/800" draggable="false" class="img img--start" alt="" />
       </div>
     </template>
     <template #end>
       <div class="img-block">
-        <img src="https://picsum.photos/seed/picsum/1536/800?grayscale" class="img img--end" alt="" />
+        <img src="https://picsum.photos/seed/picsum/1536/800?grayscale" draggable="false" class="img img--end" alt="" />
       </div>
     </template>
   </va-split>
@@ -31,7 +31,7 @@ export default {
   border: 1px solid gainsboro;
 
   & .va-split__panel {
-    padding: 0.5rem;
+    padding: 0.75rem;
   }
 
   &--image {
@@ -41,10 +41,6 @@ export default {
     & .va-split__panel {
       padding: 0;
     }
-
-    & .va-split__dragger {
-      width: 0.5rem;
-    }
   }
 
   & .img-block {
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 2fbe9b1c11..aef0c4ad3f 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -10,17 +10,23 @@
     >
       <slot name="start" />
     </div>
-    <div
-      class="va-split__dragger"
-      :style="draggerStyleComputed"
-      @mousedown="startDragging"
-      @touchstart="startDragging"
-      @dblclick="maximizePanel">
-      <slot name="grabber">
-        <va-divider
-          class="fill-width"
-          :vertical="!$props.vertical" />
-      </slot>
+    <div class="va-split__dragger">
+      <div
+        class="va-split__dragger__overlay"
+        :style="draggerStyleComputed"
+        @mousedown.prevent="startDragging"
+        @touchstart.prevent="startDragging"
+        @dblclick.prevent="maximizePanel"
+        @contextmenu.prevent
+        @dragstart.prevent
+      >
+        <slot name="grabber">
+          <va-divider
+            class="va-split__dragger__default"
+            :vertical="!$props.vertical"
+          />
+        </slot>
+      </div>
     </div>
     <div
       class="va-split__panel"
@@ -244,11 +250,21 @@ export default defineComponent({
 @import 'variables';
 
 .va-split {
+  position: relative;
   display: flex;
 
   &__dragger {
-    display: var(--va-split-dragger-display);
-    user-select: none;
+    position: relative;
+
+    &__overlay {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      display: var(--va-split-dragger-display);
+      z-index: 1;
+    }
   }
 
   &__panel {
@@ -265,18 +281,36 @@ export default defineComponent({
   &--vertical {
     flex-direction: column;
 
-    &.va-split__dragger {
-      height: var(--va-split-dragger-size);
-      align-items: var(--va-split-dragger-align-items);
+    & > .va-split__dragger {
+      height: 1px;
+
+      .va-split__dragger__overlay {
+        top: calc((var(--va-split-dragger-overlay-size) / -2));
+        height: var(--va-split-dragger-overlay-size);
+        align-items: var(--va-split-dragger-align-items);
+      }
+
+      .va-split__dragger__default {
+        width: 100%;
+      }
     }
   }
 
   &--horizontal {
     flex-direction: row;
 
-    &.va-split__dragger {
-      width: var(--va-split-dragger-size);
-      justify-content: var(--va-split-dragger-justify-content);
+    & > .va-split__dragger {
+      width: 1px;
+
+      .va-split__dragger__overlay {
+        left: calc((var(--va-split-dragger-overlay-size) / -2));
+        width: var(--va-split-dragger-overlay-size);
+        justify-content: var(--va-split-dragger-justify-content);
+      }
+
+      .va-split__dragger__default {
+        height: 100%;
+      }
     }
   }
 }
diff --git a/packages/ui/src/components/va-split/_variables.scss b/packages/ui/src/components/va-split/_variables.scss
index ea8b39eabe..cf23b469ec 100644
--- a/packages/ui/src/components/va-split/_variables.scss
+++ b/packages/ui/src/components/va-split/_variables.scss
@@ -1,9 +1,9 @@
 :root {
   --va-split-panel-overflow: scroll;
   --va-split-dragger-display: flex;
-  --va-split-dragger-size: 1rem;
   --va-split-dragger-justify-content: center;
   --va-split-dragger-align-items: center;
+  --va-split-dragger-overlay-size: 1rem;
   --va-split-dragging-cursor: grabbing;
   --va-split-horizontal-dragger-cursor: col-resize;
   --va-split-vertical-dragger-cursor: row-resize;

From 71a86e62707a6b6a5b650b7dc1f2a9eaf097c49f Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Tue, 2 Aug 2022 20:51:40 +0600
Subject: [PATCH 19/21] feat: snapping feature

---
 packages/docs/src/locales/en/en.json          |  8 +++-
 packages/docs/src/locales/ru/ru.json          |  8 +++-
 .../ui-elements/split/examples/Default.vue    |  2 +-
 .../ui-elements/split/examples/Snapping.vue   | 20 ++++++++++
 .../ui-elements/split/page-config.ts          |  6 +++
 .../src/components/va-split/VaSplit.demo.vue  | 13 ++++++-
 .../ui/src/components/va-split/VaSplit.vue    | 38 +++++++++++++++++--
 packages/ui/src/components/va-split/types.ts  |  1 +
 8 files changed, 89 insertions(+), 7 deletions(-)
 create mode 100644 packages/docs/src/page-configs/ui-elements/split/examples/Snapping.vue

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index df988c9adb..57eb65e6b8 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1309,7 +1309,9 @@
         "vertical": "Changes `va-split` orientation to vertical.",
         "limits": "Min-max size limits of the each panel.",
         "maximization": "End panel size maximization via separator double click.",
-        "maximizeStart": "Maximize size of the start panel instead of end one."
+        "maximizeStart": "Maximize size of the start panel instead of end one.",
+        "snapping": "Marks array the splitter will be 'jumping' to.",
+        "snapping-range": "Distance (% of components container size) between splitter and snapping mark, which will call 'jumping' to it."
       },
       "events": {},
       "methods": {},
@@ -4230,6 +4232,10 @@
         "title": "Limits",
         "text": "`limits` prop allows you to set up panels min-max sizes. For example, `[[10, 'any'], ['50px', '30rem']]` (sum of different panels min and max size should be equal to 100%) will set up min size of the start panel to 10%, max - 100%. For the end panel - 50px and 30rem accordingly. If you don't need max sizes limits but only min ones, you can use this record form: `[10px, 50%]`."
       },
+      "snapping": {
+        "title": "Snapping",
+        "text": "`snapping` and `snapping-range` props allow you to set up a virtual marks, splitter will be 'jumping' to when it will be near of them. For example, `snapping` with value `['20rem', 80]` and `snapping-range` with value `5` will set up 2 marks - 20 rem and 80 percents of the splitter container size. Meanwhile, splitter will 'jump' to it when there is at least 5 percents of the container size between them."
+      },
       "nested": {
         "title": "Nested",
         "text": "Passing another `va-split` component via `start`/`end` slot you can gain different panels combinations."
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 2b8dd72b56..22fc7a145e 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1223,7 +1223,9 @@
         "vertical": "Меняет ориентацию сплиттера на вертикальную.",
         "limits": "Максимальный-минимальный размер панелей.",
         "maximization": "Активирует возможность максимизации размера конечной панели при двойном клике по разделителю.",
-        "maximizeStart": "Меняет логику максимизации с конечной на начальную панель."
+        "maximizeStart": "Меняет логику максимизации с конечной на начальную панель.",
+        "snapping": "Массив виртуальных отметок, к которым будет притягиваться разделитель.",
+        "snapping-range": "Расстояние (в % от ширины контейнера компонента) между разделителем и snapping-меткой, при котором будет происходить перескакивание."
       },
       "events": {},
       "methods": {},
@@ -4024,6 +4026,10 @@
         "title": "Лимиты",
         "text": "С помощью свойства `limits` вы можете детально настроить минимальные-максимальные размеры панелей, используя любые величины. Например, `[[10, 'any'], ['50px', '30rem']]` установит минимальный размер начальной панели на 10%, а максимальный - на 100%, для конечной панели - 50px и 30rem соответственно. Если максимальные размеры вам устанавливать не требуется, а только минимальные, то используйте запись вида `[10px, 50%]`."
       },
+      "customLimits": {
+        "title": "Отметки",
+        "text": "С помощью свойств `snapping` и `snapping-range` вы можете задать отметки, при приближении к которым сплиттер перескочит на них. Например, `snapping` со значением `['20rem', 80]` и `snapping-range` со значением `5` установит 2 отметки на 20 rem'ах и 80 процентах от размера контейнера сплиттера. При этом перескакивание будет происходить, когда до отметок будет оставаться 5% размера контейнера."
+      },
       "nested": {
         "title": "Вложенность",
         "text": "Передавая в слоты `start`/`end` еще один `va-split`, можно создавать любые комбинации панелей."
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
index 9d22946295..ecde6894dc 100644
--- a/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Default.vue
@@ -53,7 +53,7 @@ export default {
   .img {
     position: absolute;
     top: 0;
-    width: 70vw;
+    width: 67vw;
 
     &--start {
       left: 0;
diff --git a/packages/docs/src/page-configs/ui-elements/split/examples/Snapping.vue b/packages/docs/src/page-configs/ui-elements/split/examples/Snapping.vue
new file mode 100644
index 0000000000..fdc2675b60
--- /dev/null
+++ b/packages/docs/src/page-configs/ui-elements/split/examples/Snapping.vue
@@ -0,0 +1,20 @@
+<template>
+  <va-split class="split-demo" :snapping="[20, 80]" :snapping-range="5">
+    <template #start>
+      {{ lorem }}
+    </template>
+    <template #end>
+      {{ lorem }}
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { lorem } from './Default'
+
+export default {
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
diff --git a/packages/docs/src/page-configs/ui-elements/split/page-config.ts b/packages/docs/src/page-configs/ui-elements/split/page-config.ts
index f4ef4cb75a..9b55e37fed 100644
--- a/packages/docs/src/page-configs/ui-elements/split/page-config.ts
+++ b/packages/docs/src/page-configs/ui-elements/split/page-config.ts
@@ -39,6 +39,12 @@ const config: ApiDocsBlock[] = [
     'CustomLimits',
   ),
 
+  ...block.exampleBlock(
+    'split.examples.snapping.title',
+    'split.examples.snapping.text',
+    'Snapping',
+  ),
+
   ...block.exampleBlock(
     'split.examples.nested.title',
     'split.examples.nested.text',
diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
index 93d398b1fc..509e6dbd8e 100644
--- a/packages/ui/src/components/va-split/VaSplit.demo.vue
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -33,6 +33,17 @@
       </va-split>
     </VbCard>
 
+    <VbCard title="snapping">
+      <va-split :snapping="[20, 80]">
+        <template #start>
+          {{$vb.lorem(1000)}}
+        </template>
+        <template #end>
+          {{$vb.lorem(1000)}}
+        </template>
+      </va-split>
+    </VbCard>
+
     <VbCard title="custom grabber">
       <va-split>
         <template #start>
@@ -138,7 +149,7 @@ export default {
     height: 10rem;
 
     &__panel {
-      padding: 0.5rem;
+      padding: 0.75rem;
     }
   }
 
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index aef0c4ad3f..7c31c44617 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -54,7 +54,7 @@ import { useSplitDragger, useSplitDraggerProps } from './useSplitDragger'
 
 import { warn } from '../../services/utils'
 
-import { SplitLimit } from './types'
+import { SplitLimit, SnappingMark } from './types'
 
 import { VaDivider } from '../va-divider'
 
@@ -78,6 +78,11 @@ export default defineComponent({
       type: Array as any as PropType<[SplitLimit, SplitLimit]>,
       default: () => [0, 0],
     },
+    snapping: {
+      type: Array as any as PropType<SnappingMark[]>,
+      default: undefined,
+    },
+    snappingRange: { type: Number, default: 4 },
   },
 
   emits: useStatefulEmits,
@@ -97,7 +102,7 @@ export default defineComponent({
     onMounted(handleContainerResize)
     useResizeObserver([splitPanelsContainer], handleContainerResize)
 
-    const convertToPercents = (v: string | number, type: 'min' | 'max') => {
+    const convertToPercents = (v: string | number, type: 'min' | 'max' | 'snapping') => {
       let numberValue = ''
       let measureValue = ''
 
@@ -117,7 +122,7 @@ export default defineComponent({
         case 'rem':
           return ((+numberValue * bodyFontSize.value) / containerSize.value!) * 100
         case 'any':
-          return type === 'min' ? 0 : 100
+          return ['min', 'snapping'].includes(type) ? 0 : 100
         case '':
           return 100
         default:
@@ -173,8 +178,35 @@ export default defineComponent({
       }
     })
 
+    const checkSnappingLimitsCondition = (el: number) =>
+      el >= panelsMinMax.value.start.min &&
+      el >= panelsMinMax.value.end.min &&
+      el <= panelsMinMax.value.start.max &&
+      el <= panelsMinMax.value.end.max
+
+    const snappingMarksPosition = computed(() => {
+      if (!Array.isArray(props.snapping)) { return }
+
+      const result = props.snapping.map((el) => convertToPercents(el, 'snapping'))
+
+      if (!result.every(checkSnappingLimitsCondition)) {
+        const filteredMarks = result.filter(checkSnappingLimitsCondition)
+        warn(`Some of the snapping marks (${result}) are not in allowed range (${Object.values(panelsMinMax.value.start).join('-')} / ${Object.values(panelsMinMax.value.end).join('-')}) and will be removed (${filteredMarks})!`)
+        return filteredMarks
+      }
+
+      return result
+    })
+
     const splitterPosition = ref(valueComputed.value)
     const splitterPositionComputed = computed(() => {
+      if (snappingMarksPosition.value) {
+        const nearestSnappingMark = snappingMarksPosition.value.find((el) => {
+          return splitterPosition.value + props.snappingRange > el && splitterPosition.value - props.snappingRange < el
+        })
+        if (nearestSnappingMark) { return nearestSnappingMark }
+      }
+
       return clamp(
         splitterPosition.value,
         Math.max(panelsMinMax.value.start.min, 100 - panelsMinMax.value.end.max),
diff --git a/packages/ui/src/components/va-split/types.ts b/packages/ui/src/components/va-split/types.ts
index 61e397b529..854637af05 100644
--- a/packages/ui/src/components/va-split/types.ts
+++ b/packages/ui/src/components/va-split/types.ts
@@ -1 +1,2 @@
 export type SplitLimit = number | string | string[]
+export type SnappingMark = number | string

From b091d8824fcc5176f1b3489467ea04befa0977da Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Mon, 8 Aug 2022 20:17:18 +0600
Subject: [PATCH 20/21] feat: snapping range is allowed to set in any measures

fix: review suggestions

refactor: minor docs refactor
---
 packages/docs/src/locales/en/en.json          |  4 +--
 packages/docs/src/locales/ru/ru.json          |  4 +--
 .../src/components/va-split/VaSplit.demo.vue  |  2 +-
 .../ui/src/components/va-split/VaSplit.vue    | 30 +++++++++++++------
 .../components/va-split/useSplitDragger.ts    | 19 ++++--------
 5 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 4e69847522..a957c07ebf 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -1313,7 +1313,7 @@
         "maximization": "End panel size maximization via separator double click.",
         "maximizeStart": "Maximize size of the start panel instead of end one.",
         "snapping": "Marks array the splitter will be 'jumping' to.",
-        "snapping-range": "Distance (% of components container size) between splitter and snapping mark, which will call 'jumping' to it."
+        "snapping-range": "Distance (% of components container size, px or rem) between splitter and snapping mark, which will call 'jumping' to it."
       },
       "events": {},
       "methods": {},
@@ -4249,7 +4249,7 @@
       },
       "snapping": {
         "title": "Snapping",
-        "text": "`snapping` and `snapping-range` props allow you to set up a virtual marks, splitter will be 'jumping' to when it will be near of them. For example, `snapping` with value `['20rem', 80]` and `snapping-range` with value `5` will set up 2 marks - 20 rem and 80 percents of the splitter container size. Meanwhile, splitter will 'jump' to it when there is at least 5 percents of the container size between them."
+        "text": "`snapping` and `snapping-range` props allow you to set up a virtual marks, splitter will be 'jumping' to when it will be near of them. For example, `snapping` with value `['20', 80]` and `snapping-range` with value `5` will set up 2 marks - 20 and 80 percents of the splitter container size. Meanwhile, splitter will 'jump' to it when there is at least 5 percents of the container size between them."
       },
       "nested": {
         "title": "Nested",
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 129edb8b0c..bc09a4c76e 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -1226,7 +1226,7 @@
         "maximization": "Активирует возможность максимизации размера конечной панели при двойном клике по разделителю.",
         "maximizeStart": "Меняет логику максимизации с конечной на начальную панель.",
         "snapping": "Массив виртуальных отметок, к которым будет притягиваться разделитель.",
-        "snapping-range": "Расстояние (в % от ширины контейнера компонента) между разделителем и snapping-меткой, при котором будет происходить перескакивание."
+        "snapping-range": "Расстояние (в % от ширины контейнера компонента, px или rem'ах) между разделителем и snapping-меткой, при котором будет происходить перескакивание."
       },
       "events": {},
       "methods": {},
@@ -4038,7 +4038,7 @@
       },
       "customLimits": {
         "title": "Отметки",
-        "text": "С помощью свойств `snapping` и `snapping-range` вы можете задать отметки, при приближении к которым сплиттер перескочит на них. Например, `snapping` со значением `['20rem', 80]` и `snapping-range` со значением `5` установит 2 отметки на 20 rem'ах и 80 процентах от размера контейнера сплиттера. При этом перескакивание будет происходить, когда до отметок будет оставаться 5% размера контейнера."
+        "text": "С помощью свойств `snapping` и `snapping-range` вы можете задать отметки, при приближении к которым сплиттер перескочит на них. Например, `snapping` со значением `['20', 80]` и `snapping-range` со значением `5` установит 2 отметки на 20 и 80 процентах от размера контейнера сплиттера. При этом перескакивание будет происходить, когда до отметок будет оставаться 5% размера контейнера."
       },
       "nested": {
         "title": "Вложенность",
diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
index 509e6dbd8e..a70ce39eea 100644
--- a/packages/ui/src/components/va-split/VaSplit.demo.vue
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -34,7 +34,7 @@
     </VbCard>
 
     <VbCard title="snapping">
-      <va-split :snapping="[20, 80]">
+      <va-split :snapping="[20, 21, 80]">
         <template #start>
           {{$vb.lorem(1000)}}
         </template>
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 7c31c44617..549bbf88ad 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -41,7 +41,6 @@
 import { defineComponent, PropType, ref, shallowRef, computed, watch, onMounted } from 'vue'
 import isString from 'lodash/isString.js'
 import isNumber from 'lodash/isNumber.js'
-import isUndefined from 'lodash/isUndefined.js'
 import clamp from 'lodash/clamp.js'
 
 import {
@@ -82,7 +81,7 @@ export default defineComponent({
       type: Array as any as PropType<SnappingMark[]>,
       default: undefined,
     },
-    snappingRange: { type: Number, default: 4 },
+    snappingRange: { type: [Number, String] as PropType<number | string>, default: 4 },
   },
 
   emits: useStatefulEmits,
@@ -118,9 +117,9 @@ export default defineComponent({
         case '%':
           return +numberValue
         case 'px':
-          return (+numberValue / containerSize.value!) * 100
+          return (+numberValue / containerSize.value) * 100
         case 'rem':
-          return ((+numberValue * bodyFontSize.value) / containerSize.value!) * 100
+          return ((+numberValue * bodyFontSize.value) / containerSize.value) * 100
         case 'any':
           return ['min', 'snapping'].includes(type) ? 0 : 100
         case '':
@@ -131,7 +130,7 @@ export default defineComponent({
       }
     }
     const getPanelMinMax = (v: SplitLimit) => {
-      if (isUndefined(v) || !containerSize.value) { return }
+      if (v === 'undefined' || !containerSize.value) { return }
 
       let minPercents = 0
       let maxPercents = 100
@@ -185,24 +184,37 @@ export default defineComponent({
       el <= panelsMinMax.value.end.max
 
     const snappingMarksPosition = computed(() => {
-      if (!Array.isArray(props.snapping)) { return }
+      if (!Array.isArray(props.snapping) || !containerSize.value) { return }
 
-      const result = props.snapping.map((el) => convertToPercents(el, 'snapping'))
+      let result = props.snapping.map((el) => convertToPercents(el, 'snapping'))
 
       if (!result.every(checkSnappingLimitsCondition)) {
         const filteredMarks = result.filter(checkSnappingLimitsCondition)
         warn(`Some of the snapping marks (${result}) are not in allowed range (${Object.values(panelsMinMax.value.start).join('-')} / ${Object.values(panelsMinMax.value.end).join('-')}) and will be removed (${filteredMarks})!`)
-        return filteredMarks
+        result = filteredMarks
+      }
+
+      const checkSnappingRange = () => {
+        return result.every((el, index, array) => {
+          if (!array[index + 1]) { return true }
+          return Math.abs(el - array[index]) > props.snappingRange
+        })
+      }
+
+      if (!checkSnappingRange()) {
+        warn('Distance between some snapping marks is lesser than snapping range!')
       }
 
       return result
     })
 
+    const snappingRangeParsed = computed(() => convertToPercents(props.snappingRange, 'snapping'))
+
     const splitterPosition = ref(valueComputed.value)
     const splitterPositionComputed = computed(() => {
       if (snappingMarksPosition.value) {
         const nearestSnappingMark = snappingMarksPosition.value.find((el) => {
-          return splitterPosition.value + props.snappingRange > el && splitterPosition.value - props.snappingRange < el
+          return splitterPosition.value + snappingRangeParsed.value > el && splitterPosition.value - snappingRangeParsed.value < el
         })
         if (nearestSnappingMark) { return nearestSnappingMark }
       }
diff --git a/packages/ui/src/components/va-split/useSplitDragger.ts b/packages/ui/src/components/va-split/useSplitDragger.ts
index 95d4770e0d..bacb8bc9f2 100644
--- a/packages/ui/src/components/va-split/useSplitDragger.ts
+++ b/packages/ui/src/components/va-split/useSplitDragger.ts
@@ -1,4 +1,6 @@
-import { ExtractPropTypes, onBeforeUnmount, onMounted, ref, Ref } from 'vue'
+import { ExtractPropTypes, ref, Ref } from 'vue'
+
+import { useEvent } from '../../composables'
 
 export const useSplitDraggerProps = {
   vertical: { type: Boolean, default: false },
@@ -40,19 +42,8 @@ export const useSplitDragger = (
     isDragging.value = false
   }
 
-  onMounted(() => {
-    document.addEventListener('mousemove', processDragging)
-    document.addEventListener('touchmove', processDragging)
-    document.addEventListener('mouseup', stopDragging)
-    document.addEventListener('touchcancel', stopDragging)
-  })
-
-  onBeforeUnmount(() => {
-    document.removeEventListener('mousemove', processDragging)
-    document.removeEventListener('touchmove', processDragging)
-    document.removeEventListener('mouseup', stopDragging)
-    document.removeEventListener('touchcancel', stopDragging)
-  })
+  useEvent(['mousemove', 'touchmove'], processDragging)
+  useEvent(['mouseup', 'touchcancel'], stopDragging)
 
   return { isDragging, startDragging, currentSplitterPosition }
 }

From e54cc0ba8e5b28b0452c630babb9bbbf2bacea26 Mon Sep 17 00:00:00 2001
From: aluarius <ruseomaster@gmail.com>
Date: Mon, 8 Aug 2022 20:22:57 +0600
Subject: [PATCH 21/21] fix: snapping rage check fix

fix: minor demo fix
---
 packages/ui/src/components/va-split/VaSplit.demo.vue | 2 +-
 packages/ui/src/components/va-split/VaSplit.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-split/VaSplit.demo.vue b/packages/ui/src/components/va-split/VaSplit.demo.vue
index a70ce39eea..509e6dbd8e 100644
--- a/packages/ui/src/components/va-split/VaSplit.demo.vue
+++ b/packages/ui/src/components/va-split/VaSplit.demo.vue
@@ -34,7 +34,7 @@
     </VbCard>
 
     <VbCard title="snapping">
-      <va-split :snapping="[20, 21, 80]">
+      <va-split :snapping="[20, 80]">
         <template #start>
           {{$vb.lorem(1000)}}
         </template>
diff --git a/packages/ui/src/components/va-split/VaSplit.vue b/packages/ui/src/components/va-split/VaSplit.vue
index 549bbf88ad..a9ddedfaec 100644
--- a/packages/ui/src/components/va-split/VaSplit.vue
+++ b/packages/ui/src/components/va-split/VaSplit.vue
@@ -197,7 +197,7 @@ export default defineComponent({
       const checkSnappingRange = () => {
         return result.every((el, index, array) => {
           if (!array[index + 1]) { return true }
-          return Math.abs(el - array[index]) > props.snappingRange
+          return Math.abs(el - array[index + 1]) > props.snappingRange
         })
       }