[#1725] VaSplit component implementation

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',

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

@@ -1305,6 +1305,23 @@
       },
       "methods": {},
       "slots": {}
+    },
+    "VaSplit": {
+      "props": {
+        "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.",
+        "snapping": "Marks array the splitter will be 'jumping' to.",
+        "snapping-range": "Distance (% of components container size, px or rem) between splitter and snapping mark, which will call 'jumping' to it."
+      },
+      "events": {},
+      "methods": {},
+      "slots": {
+        "dragger": "Changes default separator-dragger (`va-divider` component) to custom.",
+        "start": "Start panel content.",
+        "end": "End panel content."
+      }
     }
   },
   "menu": {
@@ -1415,7 +1432,8 @@
     "nuxt": "Nuxt",
     "ssrGuide": "SSR",
     "spacer": "Spacer",
-    "dropdown": "Dropdown"
+    "dropdown": "Dropdown",
+    "split": "Split"
   },
   "all": {
     "examples": "Examples",
@@ -4208,5 +4226,43 @@
         "text": "By default dropdown content is rendered as body child. This way we prevent any overflow. In example below `overflow: hidden` of green box is ignored. But we still able to respec overflow by changing `target` prop. In example below `overflow: hidden` of red box is hidding dropdown content."
       }
     }
+  },
+  "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`)."
+      },
+      "customLimits": {
+        "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 `['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",
+        "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)."
+      }
+    }
   }
 }

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

@@ -1218,6 +1218,23 @@
       "events": {},
       "methods": {},
       "slots": {}
+    },
+    "VaSplit": {
+      "props": {
+        "vertical": "Меняет ориентацию сплиттера на вертикальную.",
+        "limits": "Максимальный-минимальный размер панелей.",
+        "maximization": "Активирует возможность максимизации размера конечной панели при двойном клике по разделителю.",
+        "maximizeStart": "Меняет логику максимизации с конечной на начальную панель.",
+        "snapping": "Массив виртуальных отметок, к которым будет притягиваться разделитель.",
+        "snapping-range": "Расстояние (в % от ширины контейнера компонента, px или rem'ах) между разделителем и snapping-меткой, при котором будет происходить перескакивание."
+      },
+      "events": {},
+      "methods": {},
+      "slots": {
+        "dragger": "Заменяет стандартный перетаскиваемый разделитель, использующий компонент `va-divider`, на пользовательский.",
+        "start": "Содержимое первой панели.",
+        "end": "Содержимое второй панели."
+      }
     }
   },
   "menu": {
@@ -1328,7 +1345,8 @@
     "nuxt": "Nuxt",
     "ssrGuide": "Ssr Guide",
     "spacer": "Spacer",
-    "dropdown": "Dropdown"
+    "dropdown": "Dropdown",
+    "split": "Split"
   },
   "all": {
     "examples": "Примеры",
@@ -3997,5 +4015,43 @@
   },
   "dropdown": {
     "title": "-- Here is the title --"
+  },
+  "split": {
+    "title": "Split",
+    "summaryText": "Компонент `va-split` разделяет контейнер на 2 горизонтальные или вертикальные панели с возможностью изменения их размеров путем перетаскивания разделителя между ними.",
+    "examples": {
+      "default": {
+        "title": "Базовое использование",
+        "text": ""
+      },
+      "vertical": {
+        "title": "Vertical",
+        "text": "Свойство `vertical` позволяет изменить ориентацию компонента на вертикальную."
+      },
+      "customGrabber": {
+        "title": "Кастомный разделитель",
+        "text": "Передав содержимое в слот `grabber`, оно заменит стандартный разделитель-граббер."
+      },
+      "customLimits": {
+        "title": "Лимиты",
+        "text": "С помощью свойства `limits` вы можете детально настроить минимальные-максимальные размеры панелей, используя любые величины. Например, `[[10, 'any'], ['50px', '30rem']]` установит минимальный размер начальной панели на 10%, а максимальный - на 100%, для конечной панели - 50px и 30rem соответственно. Если максимальные размеры вам устанавливать не требуется, а только минимальные, то используйте запись вида `[10px, 50%]`."
+      },
+      "customLimits": {
+        "title": "Отметки",
+        "text": "С помощью свойств `snapping` и `snapping-range` вы можете задать отметки, при приближении к которым сплиттер перескочит на них. Например, `snapping` со значением `['20', 80]` и `snapping-range` со значением `5` установит 2 отметки на 20 и 80 процентах от размера контейнера сплиттера. При этом перескакивание будет происходить, когда до отметок будет оставаться 5% размера контейнера."
+      },
+      "nested": {
+        "title": "Вложенность",
+        "text": "Передавая в слоты `start`/`end` еще один `va-split`, можно создавать любые комбинации панелей."
+      },
+      "maximization": {
+        "title": "Максимизация по двойному клику",
+        "text": "Свойство `maximization` позволяет максимизировать размер конечной панели через двойной клик по разделителю (дополнительной свойство `maximizeStart` меняет логику - максимизируется начальная панель)."
+      },
+      "disabled": {
+        "title": "Disabled",
+        "text": "Свойство `disabled` отключает возможность изменения размеров панелей (в т.ч. через свойство `maximization`)."
+      }
+    }
   }
 }

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"

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: { },
+  },
+})

packages/docs/src/page-configs/ui-elements/split/examples/CustomGrabber.vue

@@ -0,0 +1,38 @@
+<template>
+  <va-split class="split-demo">
+    <template #start>
+      {{ lorem }}
+    </template>
+    <template #grabber>
+      <div class="custom-grabber">
+        <va-icon name="face" />
+      </div>
+    </template>
+    <template #end>
+      {{ lorem }}
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { lorem } from './Default'
+
+export default {
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
+
+<style lang="scss">
+.split-demo {
+  & .custom-grabber {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: greenyellow;
+  }
+}
+</style>

packages/docs/src/page-configs/ui-elements/split/examples/CustomLimits.vue

@@ -0,0 +1,20 @@
+<template>
+  <va-split class="split-demo" :limits="[[10, 'any'], ['50px', '30rem']]">
+    <template #start>
+      {{ lorem }}
+    </template>
+    <template #end>
+      {{ lorem }}
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { lorem } from './Default'
+
+export default {
+  data: () => ({
+    lorem,
+  }),
+}
+</script>

packages/docs/src/page-configs/ui-elements/split/examples/Default.vue

@@ -0,0 +1,67 @@
+<template>
+  <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" 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" draggable="false" class="img img--end" alt="" />
+      </div>
+    </template>
+  </va-split>
+</template>
+
+<script>
+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 {
+  data: () => ({
+    lorem,
+  }),
+}
+</script>
+
+<style lang="scss">
+.split-demo {
+  position: relative;
+  height: 11rem;
+  padding: 1rem;
+  border: 1px solid gainsboro;
+
+  & .va-split__panel {
+    padding: 0.75rem;
+  }
+
+  &--image {
+    height: 22rem;
+    padding: 0;
+
+    & .va-split__panel {
+      padding: 0;
+    }
+  }
+
+  & .img-block {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  .img {
+    position: absolute;
+    top: 0;
+    width: 67vw;
+
+    &--start {
+      left: 0;
+    }
+
+    &--end {
+      right: 0;
+    }
+  }
+}
+</style>

packages/docs/src/page-configs/ui-elements/split/examples/Disabled.vue

@@ -0,0 +1,20 @@
+<template>
+  <va-split class="split-demo" disabled>
+    <template #start>
+      {{ lorem }}
+    </template>
+    <template #end>
+      {{ lorem }}
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { lorem } from './Default'
+
+export default {
+  data: () => ({
+    lorem,
+  }),
+}
+</script>

packages/docs/src/page-configs/ui-elements/split/examples/Maximization.vue

@@ -0,0 +1,20 @@
+<template>
+  <va-split class="split-demo" maximization>
+    <template #start>
+      {{ lorem }}
+    </template>
+    <template #end>
+      {{ lorem }}
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { lorem } from './Default'
+
+export default {
+  data: () => ({
+    lorem,
+  }),
+}
+</script>

packages/docs/src/page-configs/ui-elements/split/examples/Nested.vue

@@ -0,0 +1,34 @@
+<template>
+  <va-split class="split-demo">
+    <template #start>
+      <va-split>
+        <template #start>
+          {{ lorem }}
+        </template>
+        <template #end>
+          {{ lorem }}
+        </template>
+      </va-split>
+    </template>
+    <template #end>
+      <va-split vertical style="height: 8rem;">
+        <template #start>
+          {{ lorem }}
+        </template>
+        <template #end>
+          {{ lorem }}
+        </template>
+      </va-split>
+    </template>
+  </va-split>
+</template>
+
+<script>
+import { lorem } from './Default'
+
+export default {
+  data: () => ({
+    lorem,
+  }),
+}
+</script>