epicmaxco · aluarius · Aug 9, 2022 · Jul 6, 2022 · Jul 7, 2022 · Jul 10, 2022
diff --git 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
@@ -1272,6 +1272,21 @@
       "events": {},
       "methods": {},
       "slots": {}
+    },
+    "VaSplit": {
+      "props": {
+        "vertical": "Changes `va-split` orientation to vertical.",
+        "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."
+      },
+      "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
@@ -1202,6 +1202,21 @@
       "events": {},
       "methods": {},
       "slots": {}
+    },
+    "VaSplit": {
+      "props": {
+        "vertical": "Меняет ориентацию сплиттера на вертикальную.",
+        "minSize": "Минимальный размер (в %) панелей.",
+        "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
@@ -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
@@ -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
@@ -0,0 +1,40 @@
+<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 { VaSplit } from 'vuestic-ui/src/components/va-split'
+import { lorem } from './Default'
+
+export default {
+  components: { VaSplit },
+  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>
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
@@ -0,0 +1,73 @@
+<template>
+  <va-split class="split-demo split-demo--image">
+    <template #start>
+      <div class="img-block">
+        <img src="https://picsum.photos/seed/picsum/1536/800" 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="" />
+      </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 {
+  position: relative;
+  height: 11rem;
+  padding: 1rem;
+  border: 1px solid gainsboro;
+
+  & .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
@@ -0,0 +1,22 @@
+<template>
+  <va-split class="split-demo" disabled>
+    <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/Maximization.vue 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>
+      {{ 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/Nested.vue 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>
+          {{ lorem }}
+        </template>
+        <template #end>
+          {{ lorem }}
+        </template>
+      </va-split>
+    </template>
+    <template #end>
+      <va-split :limits="[10, 90]" vertical style="height: 11rem;">
+        <template #start>
+          {{ lorem }}
+        </template>
+        <template #end>
+          {{ lorem }}
+        </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
@@ -0,0 +1,22 @@
+<template>
+  <va-split class="split-demo" vertical>
+    <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>