Feat/tree view improvements

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

@@ -1452,7 +1452,8 @@
         "checked": "Array of pre-selected tree nodes.",
         "checkedBy": "The key to set the checked field in the tree view model.",
         "color": "The checkboxes color.",
-        "expanded": "Array of pre-expanded tree nodes."
+        "expanded": "Array of pre-expanded tree nodes.",
+        "expandNodeBy": "Click target to expand node, can be `node` or `leaf` icon."
       },
       "slots": {
         "notFound": "No matching nodes to the filter message.",
@@ -4654,7 +4655,8 @@
         "title": "Filters"
       },
       "selectable": {
-        "title": "Selectable"
+        "title": "Selectable",
+        "coloredTitle": "Colored checkboxes"
       }
     }
   },

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

@@ -1320,7 +1320,8 @@
         "checked": "Массив пред-выбранных элементов дерева.",
         "checkedBy": "Ключ для установки поля значения чекбокса в модели компонента.",
         "color": "Цвет чекбоксов.",
-        "expanded": "Массив пред-раскрытых элементов дерева"
+        "expanded": "Массив пред-раскрытых элементов дерева",
+        "expandNodeBy": "Место клика, по которому будет раскрываться элемент дерева, может быть `node` или `leaf`."
       },
       "slots": {
         "notFound": "Сообщение о не найденных соответствующих фильтру элементов дерева.",
@@ -4387,7 +4388,8 @@
         "title": "Фильтры"
       },
       "selectable": {
-        "title": "Чекбоксы"
+        "title": "Чекбоксы",
+        "coloredTitle": "Цветные чекбоксы"
       }
     }
   },

packages/docs/src/page-configs/ui-elements/tree-view/examples/Selectable.vue

@@ -2,43 +2,22 @@
   <va-tree-view
     v-model:checked="selectedNodes"
     :nodes="nodes"
-    :color="selectedColor"
     selectable
     expand-all
   />
 
   <p class="mt-4">
     Selected nodes: {{ selectedNodes.join(',') || 'none' }}
   </p>
-
-  <p class="d-flex align-center">
-    Color:
-    <va-color-palette
-      v-model="selectedColor"
-      class="ml-2"
-      :palette="colorsPalette"
-    />
-  </p>
 </template>
 
 <script>
-const COLORS_PALETTE = [
-  '#4ae387',
-  '#e34a4a',
-  '#4ab2e3',
-  '#db76df',
-  '#f7cc36',
-  '#f3f3f3',
-  '#000',
-]
 
 export default {
   name: 'Default',
 
   data: () => ({
     selectedNodes: [],
-    colorsPalette: COLORS_PALETTE,
-    selectedColor: COLORS_PALETTE[0],
     nodes: [
       {
         id: 1,

packages/docs/src/page-configs/ui-elements/tree-view/examples/SelectableColored.vue

@@ -0,0 +1,81 @@
+<template>
+  <p class="d-flex align-center">
+    Color:
+    <va-color-palette
+      v-model="selectedColor"
+      class="ml-2"
+      :palette="colorsPalette"
+    />
+  </p>
+
+  <va-tree-view
+    :nodes="nodes"
+    v-model:checked="selectedNodes"
+    :color="selectedColor"
+    selectable
+    expand-all
+  />
+</template>
+
+<script>
+const COLORS_PALETTE = [
+  '#4ae387',
+  '#e34a4a',
+  '#4ab2e3',
+  '#db76df',
+  '#f7cc36',
+  '#f3f3f3',
+  '#000',
+]
+
+export default {
+  name: 'SelectableColored',
+  data: () => ({
+    selectedNodes: [1, 2, 3, 4, 5, 6],
+    colorsPalette: COLORS_PALETTE,
+    selectedColor: COLORS_PALETTE[0],
+    nodes: [
+      {
+        id: 1,
+        label: 'Category',
+        checked: true,
+        children: [
+          {
+            id: 2,
+            label: 'Subcategory',
+            children: [
+              { id: 3, label: 'Item' },
+              { id: 4, label: 'Item' },
+            ],
+          },
+          {
+            id: 5,
+            label: 'Subcategory',
+            children: [
+              { id: 6, label: 'Item' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 7,
+        label: 'Category',
+        children: [
+          { id: 8, label: 'Item' },
+        ],
+      },
+      {
+        id: 9,
+        label: 'Category',
+        children: [
+          { id: 10, label: 'Item' },
+        ],
+      },
+      {
+        id: 11,
+        label: 'Item',
+      },
+    ],
+  }),
+}
+</script>

packages/docs/src/page-configs/ui-elements/tree-view/page-config.ts

@@ -40,6 +40,8 @@ const config: ApiDocsBlock[] = [
   // Selectable
   block.subtitle('treeView.examples.selectable.title'),
   block.example('Selectable'),
+  block.subtitle('treeView.examples.selectable.coloredTitle'),
+  block.example('SelectableColored'),
 
   // API
   block.subtitle('api'),

packages/ui/src/components/va-tree-view/VaTreeViewKeyboardNavigation.demo.vue

@@ -0,0 +1,188 @@
+<template>
+  <VbDemo>
+    <VbCard title="Flat-like navigation">
+      <va-tree-view :nodes="flat" />
+    </VbCard>
+    <VbCard title="Stair-like navigation">
+      <va-tree-view :nodes="stairs" />
+    </VbCard>
+    <VbCard title="Triangle-like navigation">
+      <va-tree-view :nodes="triangle" />
+    </VbCard>
+    <VbCard title="Waves-like navigation">
+      <va-tree-view :nodes="waves" />
+    </VbCard>
+    <VbCard title="Selection">
+      Selected node: {{selectedNode}}
+      <br />
+      <va-tree-view
+        :nodes="triangle"
+        @update:selected="onSelectNode"
+        expand-all
+      />
+    </VbCard>
+    <VbCard title="Checkboxes selection">
+      Checked nodes: {{checkedNodes}}
+      <br />
+      <va-tree-view
+        v-model:checked="checkedNodes"
+        :nodes="triangle"
+        selectable
+        expand-all
+      />
+    </VbCard>
+  </VbDemo>
+</template>
+
+<script>
+import VaTreeView from './VaTreeView.vue'
+
+export default {
+  name: 'VaTreeViewKeyboardNavigation.demo',
+
+  components: {
+    VaTreeView,
+  },
+
+  data: () => ({
+    selectedNode: null,
+    checkedNodes: [],
+    flat: [
+      {
+        id: 1,
+        label: 'Item',
+      },
+      {
+        id: 2,
+        label: 'Item',
+      },
+      {
+        id: 3,
+        label: 'Item',
+      },
+    ],
+    stairs: [
+      {
+        id: 1,
+        label: 'Item',
+        children: [
+          {
+            id: 2,
+            label: 'Item',
+            children: [
+              {
+                id: 3,
+                label: 'Item',
+                children: [
+                  {
+                    id: 4,
+                    label: 'Item',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 5,
+        label: 'Item',
+        children: [
+          {
+            id: 6,
+            label: 'Item',
+            children: [
+              {
+                id: 7,
+                label: 'Item',
+                children: [
+                  {
+                    id: 8,
+                    label: 'Item',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    triangle: [
+      {
+        id: 1,
+        label: 'Item',
+        children: [
+          {
+            id: 2,
+            label: 'Item',
+            children: [
+              {
+                id: 3,
+                label: 'Item',
+              },
+              {
+                id: 4,
+                label: 'Item',
+              },
+            ],
+          },
+          {
+            id: 5,
+            label: 'Item',
+          },
+        ],
+      },
+      {
+        id: 6,
+        label: 'Item',
+      },
+    ],
+    waves: [
+      {
+        id: 1,
+        label: 'Item',
+      },
+      {
+        id: 2,
+        label: 'Item',
+        children: [
+          {
+            id: 3,
+            label: 'Item',
+          },
+        ],
+      },
+      {
+        id: 4,
+        label: 'Item',
+        children: [
+          {
+            id: 5,
+            label: 'Item',
+          },
+        ],
+      },
+      {
+        id: 6,
+        label: 'Item',
+        children: [
+          {
+            id: 6,
+            label: 'Item',
+          },
+        ],
+      },
+      {
+        id: 7,
+        label: 'Item',
+      },
+    ],
+  }),
+
+  methods: {
+    onSelectNode (node) {
+      this.selectedNode = node ? `${node.id} ${node.label}` : null
+    },
+  },
+}
+</script>