From 98adbd84290be2670c3459848dbb84ed60710f4f Mon Sep 17 00:00:00 2001
From: Pavel Spacil <pavel.spacil@gmail.com>
Date: Mon, 9 Oct 2023 15:18:37 +0200
Subject: [PATCH 1/4] feat(FComboBox): add `clas` prop

---
 src/components/FComboBox/FComboBox.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/FComboBox/FComboBox.vue b/src/components/FComboBox/FComboBox.vue
index e76fa1c..928d4ef 100755
--- a/src/components/FComboBox/FComboBox.vue
+++ b/src/components/FComboBox/FComboBox.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="fcombobox"
-        :class="classes"
+        :class="[clas, classes]"
         @[clickEvent]="onClick"
         role="combobox"
         aria-haspopup="listbox"
@@ -225,6 +225,11 @@ export default {
             type: String,
             default: '',
         },
+        /** Css class to be added to the root element */
+        clas: {
+            type: String,
+            default: '',
+        },
         readonly: {
             type: Boolean,
             default: false,

From f69ebf22fd446afaa35cdb9e32ce2b597ba85659 Mon Sep 17 00:00:00 2001
From: Pavel Spacil <pavel.spacil@gmail.com>
Date: Mon, 9 Oct 2023 15:35:59 +0200
Subject: [PATCH 2/4] feat(aria): create `findNextOrPrevElemByList` and
 `keyboardNavigationByList` functions

---
 src/utils/aria.js | 242 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 211 insertions(+), 31 deletions(-)

diff --git a/src/utils/aria.js b/src/utils/aria.js
index b1f4c40..733f7f0 100755
--- a/src/utils/aria.js
+++ b/src/utils/aria.js
@@ -1,3 +1,5 @@
+import { getAttr, setAttr } from './DOM.js';
+
 const RECEIVE_FOCUS_FROM_ATTR = 'data-receive-focus-from';
 
 const KEY_EVENTS = {
@@ -319,6 +321,51 @@ export function getLastElement(_eTarget, _selector) {
     return elem;
 }
 
+/**
+ *
+ * @param {KeyboardEvent} event
+ * @param {('horizontal' | 'vertical' | 'both')} [direction] Movement direction.
+ * @param {boolean} [useHomeAndEnd] `Home` and `End` keys are enabled.
+ * @return {string}
+ */
+function getMove({ event, direction = 'horizontal', useHomeAndEnd }) {
+    let move = '';
+
+    if (direction === 'horizontal' || direction === 'both') {
+        if (isKey('ArrowRight', event)) {
+            move = 'next';
+        } else if (isKey('ArrowLeft', event)) {
+            move = 'prev';
+        }
+    }
+
+    if (!move && (direction === 'vertical' || direction === 'both')) {
+        if (isKey('ArrowDown', event)) {
+            move = 'next';
+        } else if (isKey('ArrowUp', event)) {
+            move = 'prev';
+        }
+    }
+
+    if (!move) {
+        if (useHomeAndEnd) {
+            if (isKey('Home', event)) {
+                move = 'first';
+            } else if (isKey('End', event)) {
+                move = 'last';
+            }
+        }
+
+        if (isKey('PageUp', event)) {
+            move = 'first';
+        } else if (isKey('PageDown', event)) {
+            move = 'last';
+        }
+    }
+
+    return move;
+}
+
 /**
  *
  * @param {KeyboardEvent} _event
@@ -350,37 +397,7 @@ export function keyboardNavigation({
     // console.log(_event.code);
 
     if (eTarget) {
-        if (_direction === 'horizontal' || _direction === 'both') {
-            if (isKey('ArrowRight', _event)) {
-                move = 'next';
-            } else if (isKey('ArrowLeft', _event)) {
-                move = 'prev';
-            }
-        }
-
-        if (!move && (_direction === 'vertical' || _direction === 'both')) {
-            if (isKey('ArrowDown', _event)) {
-                move = 'next';
-            } else if (isKey('ArrowUp', _event)) {
-                move = 'prev';
-            }
-        }
-
-        if (!move) {
-            if (_useHomeAndEnd) {
-                if (isKey('Home', _event)) {
-                    move = 'first';
-                } else if (isKey('End', _event)) {
-                    move = 'last';
-                }
-            }
-
-            if (isKey('PageUp', _event)) {
-                move = 'first';
-            } else if (isKey('PageDown', _event)) {
-                move = 'last';
-            }
-        }
+        move = getMove({ event: _event, direction: _direction, useHomeAndEnd: _useHomeAndEnd });
 
         if (move === 'next') {
             elem = eTarget.nextElementSibling;
@@ -413,3 +430,166 @@ export function keyboardNavigation({
 
     return elem;
 }
+
+/**
+ * @param {NodeList} elemList List of elements to navigate through
+ * @param {string} skipElemsSelector Skip elements that matching this selector
+ * @param {number} startIdx Index into elemList
+ * @param {'next'|'prev'} [find] Direction
+ * @return {HTMLElement|null}
+ */
+export function findNextOrPrevElemByList({ elemList, skipElemsSelector, startIdx = -1, find = 'next' }) {
+    const elemListLen = elemList.length;
+
+    if (!skipElemsSelector || elemListLen === 0) {
+        return null;
+    }
+
+    let el = elemList[startIdx] || null;
+    let idx = startIdx;
+    const findNext = find === 'next';
+
+    while (el && el.matches(skipElemsSelector)) {
+        if (findNext) {
+            if (idx + 1 < elemListLen) {
+                el = elemList[idx + 1];
+                idx += 1;
+            } else {
+                el = null;
+            }
+        } else {
+            if (idx - 1 >= 0) {
+                el = elemList[idx - 1];
+                idx -= 1;
+            } else {
+                el = null;
+            }
+        }
+    }
+
+    return el;
+}
+
+/**
+ *
+ * @param {KeyboardEvent} event
+ * @param {NodeList} elemList List of elements to navigate through
+ * @param {('horizontal' | 'vertical' | 'both')} [direction] Movement direction.
+ * @param {string} [skipElemsSelector] Skip elements that matching this selector
+ * @param {boolean} [circular] Circular keyboard navigation
+ * @param {boolean} [focusElem] Focus found element.
+ * @param {boolean} [useHomeAndEnd] `Home` and `End` keys are enabled.
+ * @param {boolean} [addMissingTabIndex]
+ * @return {HTMLElement|null} Next or previous element or null.
+ */
+export function keyboardNavigationByList({
+    event,
+    elemList,
+    direction = 'horizontal',
+    skipElemsSelector = '',
+    circular = false,
+    focusElem = true,
+    useHomeAndEnd = true,
+    addMissingTabIndex = true,
+}) {
+    if (!event || !(event.type in KEY_EVENTS)) {
+        return null;
+    }
+
+    let elem = null;
+    let move = '';
+    let activeElem = null;
+    let activeElemIdx = -1;
+    const elemListLen = elemList.length;
+
+    if (elemListLen > 0) {
+        move = getMove({ event: event, direction: direction, useHomeAndEnd: useHomeAndEnd });
+
+        if (move) {
+            elemList.forEach((elem, idx) => {
+                let tabindex = getAttr(elem, 'tabindex');
+
+                if (addMissingTabIndex && !tabindex) {
+                    setAttr(elem, 'tabindex', '-1');
+                }
+
+                if (tabindex === '0') {
+                    activeElemIdx = idx;
+                    activeElem = elem;
+                }
+            });
+
+            if (activeElemIdx > -1) {
+                if (move === 'next') {
+                    if (activeElemIdx + 1 < elemListLen) {
+                        elem = elemList[activeElemIdx + 1];
+                    }
+
+                    elem = findNextOrPrevElemByList({
+                        elemList,
+                        skipElemsSelector,
+                        startIdx: activeElemIdx + 1,
+                        find: 'next',
+                    });
+
+                    if (circular && elem === null) {
+                        elem = findNextOrPrevElemByList({
+                            elemList,
+                            skipElemsSelector,
+                            startIdx: 0,
+                            find: 'next',
+                        });
+                    }
+                } else if (move === 'prev') {
+                    if (activeElemIdx - 1 >= 0) {
+                        elem = elemList[activeElemIdx - 1];
+                    }
+
+                    elem = findNextOrPrevElemByList({
+                        elemList,
+                        skipElemsSelector,
+                        startIdx: activeElemIdx - 1,
+                        find: 'prev',
+                    });
+
+                    if (circular && elem === null) {
+                        elem = findNextOrPrevElemByList({
+                            elemList,
+                            skipElemsSelector,
+                            startIdx: elemListLen - 1,
+                            find: 'prev',
+                        });
+                    }
+                } else if (move === 'first') {
+                    elem = findNextOrPrevElemByList({
+                        elemList,
+                        skipElemsSelector,
+                        startIdx: 0,
+                        find: 'next',
+                    });
+                } else if (move === 'last') {
+                    elem = findNextOrPrevElemByList({
+                        elemList,
+                        skipElemsSelector,
+                        startIdx: elemListLen - 1,
+                        find: 'prev',
+                    });
+                }
+            } else {
+                activeElemIdx = 0;
+                activeElem = elemList[0];
+            }
+
+            if (elem && activeElem) {
+                setAttr(activeElem, 'tabindex', '-1');
+                setAttr(elem, 'tabindex', '0');
+
+                if (focusElem) {
+                    elem.focus();
+                }
+            }
+        }
+    }
+
+    return elem;
+}

From 9503aa64df8df4ce3ad5fdec2c498c589f36f3e0 Mon Sep 17 00:00:00 2001
From: Pavel Spacil <pavel.spacil@gmail.com>
Date: Mon, 9 Oct 2023 16:11:37 +0200
Subject: [PATCH 3/4] feat(FToolbar): create component

---
 src/components/FToolbar/FToolbar.spec.js    | 405 ++++++++++++++++++++
 src/components/FToolbar/FToolbar.stories.js | 123 ++++++
 src/components/FToolbar/FToolbar.types.js   |   9 +
 src/components/FToolbar/FToolbar.vue        | 173 +++++++++
 src/components/index.js                     |   1 +
 5 files changed, 711 insertions(+)
 create mode 100644 src/components/FToolbar/FToolbar.spec.js
 create mode 100644 src/components/FToolbar/FToolbar.stories.js
 create mode 100644 src/components/FToolbar/FToolbar.types.js
 create mode 100644 src/components/FToolbar/FToolbar.vue

diff --git a/src/components/FToolbar/FToolbar.spec.js b/src/components/FToolbar/FToolbar.spec.js
new file mode 100644
index 0000000..74a79cc
--- /dev/null
+++ b/src/components/FToolbar/FToolbar.spec.js
@@ -0,0 +1,405 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { destroyWrapper } from '@/test/utils.js';
+import FToolbar from './FToolbar.vue';
+import { FComboBox } from '@/components/index.js';
+import { nextTick, shallowRef } from 'vue';
+import { delay } from '@/utils/index.js';
+
+let wrapper = null;
+
+function createWrapper(
+    options = {
+        props: {
+            items: [
+                {
+                    type: 'button',
+                    name: 'bold',
+                    label: 'Bold',
+                    icon: 'bold',
+                    props: {},
+                },
+                {
+                    type: 'button',
+                    name: 'italic',
+                    label: 'Italic',
+                },
+            ],
+        },
+    }
+) {
+    return mount(FToolbar, { ...options, attachTo: document.body });
+}
+
+afterEach(() => {
+    destroyWrapper(wrapper);
+});
+
+describe('FToolbar', () => {
+    it('should render buttons', () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        name: 'bold',
+                    },
+                    {
+                        type: 'button',
+                        name: 'italic',
+                    },
+                ],
+            },
+        });
+
+        const buttons = wrapper.findAll('button');
+        expect(buttons[0].attributes('value')).toBe('bold');
+        expect(buttons[1].attributes('value')).toBe('italic');
+    });
+
+    it('should set default button type', () => {
+        wrapper = createWrapper({
+            props: {
+                defaultBtnType: 'secondary',
+                items: [
+                    {
+                        name: 'bold',
+                    },
+                ],
+            },
+        });
+
+        expect(wrapper.findComponent({ name: 'FButton' }).props('btnType')).toBe('secondary');
+    });
+
+    it('should render separator', () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        type: 'separator',
+                    },
+                ],
+            },
+        });
+
+        expect(wrapper.find('.ftoolbar_separator').exists()).toBe(true);
+    });
+
+    it('should accept a component in the `type` prop', () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        type: shallowRef(FComboBox),
+                        name: 'combobox',
+                    },
+                ],
+            },
+        });
+
+        expect(wrapper.findComponent(FComboBox).exists()).toBe(true);
+    });
+
+    it('should pass labels to components', () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        label: 'Bold',
+                        name: 'bold',
+                    },
+                    {
+                        type: shallowRef(FComboBox),
+                        label: 'Combobox',
+                        name: 'combobox',
+                    },
+                ],
+            },
+        });
+
+        const text = wrapper.text();
+        expect(text).toContain('Bold');
+        expect(text).toContain('Combobox');
+    });
+
+    it('should pass props to components', () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        props: {
+                            label: 'Bold',
+                        },
+                        name: 'bold',
+                    },
+                    {
+                        type: shallowRef(FComboBox),
+                        props: {
+                            label: 'Combobox',
+                        },
+                        name: 'combobox',
+                    },
+                ],
+            },
+        });
+
+        const text = wrapper.text();
+        expect(text).toContain('Bold');
+        expect(text).toContain('Combobox');
+    });
+
+    it('should pass names to components', () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        name: 'bold',
+                    },
+                    {
+                        type: shallowRef(FComboBox),
+                        name: 'combobox',
+                    },
+                ],
+            },
+        });
+
+        expect(wrapper.find('[name="bold"]').exists()).toBe(true);
+        expect(wrapper.find('[name="combobox"]').exists()).toBe(true);
+    });
+
+    it('should pass values to components', () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        name: 'bold',
+                        value: 'foo',
+                    },
+                    {
+                        type: shallowRef(FComboBox),
+                        name: 'combobox',
+                        value: 'opt2',
+                        props: {
+                            data: [
+                                { label: 'Option 1', value: 'opt1' },
+                                { label: 'Option 2', value: 'opt2' },
+                            ],
+                        },
+                    },
+                ],
+            },
+        });
+
+        expect(wrapper.find('[name="bold"]').attributes('value')).toBe('foo');
+        expect(wrapper.findComponent(FComboBox).vm.inputValue).toBe('opt2');
+    });
+
+    it('should update value of a toolbar item by name', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        name: 'bold',
+                        value: 'foo',
+                    },
+                    {
+                        type: shallowRef(FComboBox),
+                        name: 'combobox',
+                        props: {
+                            data: [
+                                { label: 'Option 1', value: 'opt1' },
+                                { label: 'Option 2', value: 'opt2' },
+                            ],
+                        },
+                    },
+                ],
+            },
+        });
+
+        wrapper.vm.setValueByName('bold', 'new value');
+        wrapper.vm.setValueByName('combobox', 'opt2');
+        await nextTick();
+
+        expect(wrapper.find('[name="bold"]').attributes('value')).toBe('new value');
+        expect(wrapper.findComponent(FComboBox).vm.inputValue).toBe('opt2');
+    });
+
+    it('should emit "toolbar-action" event with item value and name', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    {
+                        name: 'bold',
+                        props: { toggle: true },
+                    },
+                    {
+                        type: shallowRef(FComboBox),
+                        name: 'combobox',
+                        props: {
+                            data: [
+                                { label: 'Option 1', value: 'opt1' },
+                                { label: 'Option 2', value: 'opt2' },
+                            ],
+                        },
+                    },
+                ],
+            },
+        });
+
+        await delay();
+        await wrapper.find('button').trigger('click');
+        await wrapper.findComponent(FComboBox).selectComboboxItem(2);
+
+        expect(wrapper.emitted('toolbar-action')[0][0]).toEqual({ value: true, name: 'bold' });
+        expect(wrapper.emitted('toolbar-action')[1][0]).toEqual({ value: 'opt2', name: 'combobox' });
+    });
+
+    it('should has first non-disabled item focusable', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [{ name: 'bold', props: { disabled: true } }, { name: 'italic' }],
+            },
+        });
+
+        await delay();
+        const buttons = wrapper.findAll('button');
+
+        expect(buttons[0].attributes('tabindex')).toBe('-1');
+        expect(buttons[1].attributes('tabindex')).toBe('0');
+    });
+
+    it('should focus next non-disabled element if ArrowRight key is pressed', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    { name: 'bold' },
+                    { type: 'separator' },
+                    { name: 'italic', props: { disabled: true } },
+                    { name: 'underline' },
+                ],
+            },
+        });
+
+        await delay();
+        const buttons = wrapper.findAll('button');
+
+        await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+
+        expect(buttons[2].element).toBe(document.activeElement);
+        expect(buttons[2].attributes('tabindex')).toBe('0');
+    });
+
+    it('should focus previous non-disabled element if ArrowLeft key is pressed', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    { name: 'bold' },
+                    { type: 'separator' },
+                    { name: 'italic', props: { disabled: true } },
+                    { name: 'underline' },
+                ],
+            },
+        });
+
+        await delay();
+        const buttons = wrapper.findAll('button');
+        // move focus to the last button
+        await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+
+        await buttons[2].trigger('keydown', { key: 'ArrowLeft' });
+
+        expect(buttons[0].element).toBe(document.activeElement);
+        expect(buttons[0].attributes('tabindex')).toBe('0');
+    });
+
+    it('should focus a first non-disabled element if ArrowRight key is pressed and focus is on the last non-disabled element', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    { name: 'bold', props: { disabled: true } },
+                    { type: 'separator' },
+                    { name: 'italic' },
+                    { name: 'underline' },
+                ],
+            },
+        });
+
+        await delay();
+        const buttons = wrapper.findAll('button');
+        // move focus to the last button
+        await buttons[1].trigger('keydown', { key: 'ArrowRight' });
+
+        await buttons[2].trigger('keydown', { key: 'ArrowRight' });
+
+        expect(buttons[1].element).toBe(document.activeElement);
+        expect(buttons[1].attributes('tabindex')).toBe('0');
+    });
+
+    it('should focus a first non-disabled element if Home key is pressed and focus is on the last non-disabled element', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    { name: 'bold', props: { disabled: true } },
+                    { type: 'separator' },
+                    { name: 'italic' },
+                    { name: 'underline' },
+                ],
+            },
+        });
+
+        await delay();
+        const buttons = wrapper.findAll('button');
+        // move focus to the last button
+        await buttons[1].trigger('keydown', { key: 'ArrowRight' });
+
+        await buttons[2].trigger('keydown', { key: 'Home' });
+
+        expect(buttons[1].element).toBe(document.activeElement);
+        expect(buttons[1].attributes('tabindex')).toBe('0');
+    });
+
+    it('should focus last non-disabled element if ArrowLeft key is pressed and focus is on the first non-disabled element', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    { name: 'bold', props: { disabled: true } },
+                    { type: 'separator' },
+                    { name: 'italic' },
+                    { name: 'underline' },
+                ],
+            },
+        });
+
+        await delay();
+        const buttons = wrapper.findAll('button');
+        buttons[1].element.focus();
+
+        await buttons[1].trigger('keydown', { key: 'ArrowLeft' });
+
+        expect(buttons[2].element).toBe(document.activeElement);
+        expect(buttons[2].attributes('tabindex')).toBe('0');
+    });
+
+    it('should focus last non-disabled element if End key is pressed and focus is on the first non-disabled element', async () => {
+        wrapper = createWrapper({
+            props: {
+                items: [
+                    { name: 'bold', props: { disabled: true } },
+                    { type: 'separator' },
+                    { name: 'italic' },
+                    { name: 'underline' },
+                    { name: 'foo', props: { disabled: true } },
+                ],
+            },
+        });
+
+        await delay();
+        const buttons = wrapper.findAll('button');
+        buttons[1].element.focus();
+
+        await buttons[1].trigger('keydown', { key: 'End' });
+
+        expect(buttons[2].element).toBe(document.activeElement);
+        expect(buttons[2].attributes('tabindex')).toBe('0');
+    });
+});
diff --git a/src/components/FToolbar/FToolbar.stories.js b/src/components/FToolbar/FToolbar.stories.js
new file mode 100644
index 0000000..6fea0d9
--- /dev/null
+++ b/src/components/FToolbar/FToolbar.stories.js
@@ -0,0 +1,123 @@
+import FToolbar from './FToolbar.vue';
+import { FComboBox, FButton } from '../index.js';
+import { markRaw } from 'vue';
+
+export default {
+    title: 'FToolbar',
+    component: FToolbar,
+};
+
+export const Default = () => ({
+    components: { FToolbar, FComboBox },
+    template: `
+        <div>
+            <FToolbar :items="items" />
+        </div>
+    `,
+    data() {
+        return {
+            items: [
+                { name: 'bold', label: 'Bold', props: { toggle: true } },
+                { name: 'italic', label: 'Italic' },
+                { name: 'underline', label: 'Underline', props: { disabled: true } },
+                { type: 'separator' },
+                { name: 'left', label: 'Left' },
+                { type: 'separator' },
+                {
+                    name: 'combobox',
+                    type: markRaw(FComboBox),
+                    props: {
+                        selectMode: true,
+                        data: [
+                            { label: 'Option 1', value: 'opt1' },
+                            { label: 'Option 2', value: 'opt2' },
+                        ],
+                    },
+                },
+            ],
+        };
+    },
+});
+
+export const OnToolbarAction = () => ({
+    components: { FToolbar, FComboBox },
+    template: `
+        <div>
+        <FToolbar :items="items" @toolbar-action="onToolbarAction" />
+        <br />
+        <p>
+            toolbar action: <code>{{ toolbarAction }}</code>
+        </p>
+        </div>
+    `,
+    data() {
+        return {
+            items: [
+                { name: 'bold', label: 'Bold', props: { toggle: true } },
+                { name: 'italic', label: 'Italic' },
+                {
+                    name: 'combobox',
+                    type: markRaw(FComboBox),
+                    props: {
+                        selectMode: true,
+                        data: [
+                            { label: 'Option 1', value: 'opt1' },
+                            { label: 'Option 2', value: 'opt2' },
+                        ],
+                    },
+                },
+            ],
+            toolbarAction: '',
+        };
+    },
+    methods: {
+        onToolbarAction(action) {
+            this.toolbarAction = action;
+        },
+    },
+});
+
+export const UpdateValue = () => ({
+    components: { FToolbar, FComboBox, FButton },
+    template: `
+        <div>
+            <FToolbar ref="toolbar" :items="items" @toolbar-action="onToolbarAction" />
+            <br />
+            <p>
+               <FButton label="set 'bold' to true" secondary @click="setValueByName('bold', true)" />
+                <FButton label="set 'combobox' to 'Option 2'" secondary @click="setValueByName('combobox', 'opt2')" />
+            </p>
+            <p>
+                toolbar action: <code>{{ toolbarAction }}</code>
+            </p>
+        </div>
+    `,
+    data() {
+        return {
+            items: [
+                { name: 'bold', label: 'Bold', props: { toggle: true } },
+                { name: 'italic', label: 'Italic' },
+                {
+                    name: 'combobox',
+                    type: markRaw(FComboBox),
+                    props: {
+                        selectMode: true,
+                        data: [
+                            { label: 'Option 1', value: 'opt1' },
+                            { label: 'Option 2', value: 'opt2' },
+                        ],
+                    },
+                },
+            ],
+            toolbarAction: '',
+        };
+    },
+    methods: {
+        setValueByName(name, value) {
+            this.$refs.toolbar.setValueByName(name, value);
+        },
+        onToolbarAction(action) {
+            this.toolbarAction = action;
+        },
+    },
+});
diff --git a/src/components/FToolbar/FToolbar.types.js b/src/components/FToolbar/FToolbar.types.js
new file mode 100644
index 0000000..ad52b56
--- /dev/null
+++ b/src/components/FToolbar/FToolbar.types.js
@@ -0,0 +1,9 @@
+/**
+ * FToolbarItem object
+ * @typedef {Object} FToolbarItem
+ * @property {string} name
+ * @property {'button'|'separator'|'link'|Object} [type] One of predefined components or component name. Defaults to 'button'
+ * @property {Object} [props] Component's props
+ * @property {*} [value]
+ * @property {string} [label]
+ */
diff --git a/src/components/FToolbar/FToolbar.vue b/src/components/FToolbar/FToolbar.vue
new file mode 100644
index 0000000..43be393
--- /dev/null
+++ b/src/components/FToolbar/FToolbar.vue
@@ -0,0 +1,173 @@
+<script setup>
+import './FToolbar.types.js';
+import {
+    defer,
+    findNextOrPrevElemByList,
+    getAttr,
+    getUniqueId,
+    keyboardNavigationByList,
+    setAttr,
+} from '../../utils/index.js';
+import { FActionButton } from '../index.js';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+/**
+ * @type {{items: FToolbarItem[]}}
+ */
+const props = defineProps({
+    items: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+    defaultBtnType: {
+        type: String,
+        default: 'tertiary',
+    },
+    defaultCompSize: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['toolbar-action']);
+
+const el = ref(null);
+const data = ref({});
+const cItems = computed(() =>
+    props.items.map((item, idx) => {
+        setDataItem(item, idx);
+        return { ...item, _id: getUniqueId() };
+    })
+);
+let ignoreEmit = true;
+let toolbarElements = null;
+
+function setDataItem(item) {
+    if (item.name) {
+        data.value[item.name] = 'value' in item ? item.value : null;
+    }
+}
+
+function setValueByName(name, value) {
+    ignoreEmit = true;
+
+    if (name in data.value) {
+        data.value[name] = value;
+    } else {
+        console.warn(`Item with name '${name}' doesn't exists`);
+    }
+
+    defer(() => {
+        ignoreEmit = false;
+    });
+}
+
+function onUpdateValue(value, name) {
+    if (!ignoreEmit) {
+        data.value[name] = value;
+        emit('toolbar-action', { value, name });
+    }
+}
+
+function onToolbarKeydown(event) {
+    if (toolbarElements) {
+        keyboardNavigationByList({
+            event,
+            elemList: toolbarElements,
+            skipElemsSelector: ':disabled, [aria-disabled="true"]',
+            circular: true,
+        });
+    }
+}
+
+function setToolbarElements() {
+    toolbarElements = el.value.querySelectorAll('button[name], input[name]');
+
+    toolbarElements.forEach((elem) => {
+        let tabindex = getAttr(elem, 'tabindex');
+
+        if (!tabindex) {
+            setAttr(elem, 'tabindex', '-1');
+        }
+    });
+
+    const elem = findNextOrPrevElemByList({
+        elemList: toolbarElements,
+        skipElemsSelector: ':disabled, [aria-disabled="true"]',
+        startIdx: 0,
+        find: 'next',
+    });
+
+    if (elem) {
+        setAttr(elem, 'tabindex', '0');
+    }
+}
+
+onMounted(() => {
+    setToolbarElements();
+
+    defer(() => {
+        ignoreEmit = false;
+    });
+});
+
+onBeforeUnmount(() => {
+    toolbarElements = null;
+});
+
+defineExpose({
+    setValueByName,
+});
+</script>
+
+<template>
+    <div ref="el" class="ftoolbar" role="toolbar" @keydown="onToolbarKeydown">
+        <template v-for="item in cItems" :key="item._id">
+            <FActionButton
+                v-if="!item.type || item.type === 'button'"
+                :btn-type="defaultBtnType"
+                :name="item.name"
+                :value="data[item.name]"
+                :label="item.label"
+                v-bind="item.props || {}"
+                @update:value="onUpdateValue($event, item.name)"
+            />
+            <div v-else-if="item.type === 'separator'" class="ftoolbar_separator"></div>
+            <Component
+                v-else
+                :is="item.type"
+                :name="item.name"
+                :value="data[item.name]"
+                :label="item.label"
+                v-bind="item.props || {}"
+                @update:value="onUpdateValue($event, item.name)"
+                @update:modelValue="onUpdateValue($event, item.name)"
+            />
+        </template>
+    </div>
+</template>
+
+<style lang="scss">
+.ftoolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--f-spacer-1);
+
+    .btn + .btn {
+        margin-inline-start: 0;
+    }
+
+    &_separator {
+        width: 1px;
+        //height: 80%;
+        height: 20px;
+        background-color: var(--f-color-grey-3);
+    }
+
+    .finput_inputcont {
+        border-color: transparent !important;
+    }
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 8695898..0670396 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -69,3 +69,4 @@ export { default as FLink } from './FLink/FLink.vue';
 export { default as FFitTextToRow } from './FFitTextToRow/FFitTextToRow.vue';
 export { default as FLazyComponent } from './FLazyComponent/FLazyComponent.vue';
 export { default as FActionButton } from './FActionButton/FActionButton.vue';
+export { default as FToolbar } from './FToolbar/FToolbar.vue';

From eddd2f0c1c9171c74437ed6aca35a28de61f4045 Mon Sep 17 00:00:00 2001
From: Pavel Spacil <pavel.spacil@gmail.com>
Date: Mon, 9 Oct 2023 16:12:00 +0200
Subject: [PATCH 4/4] chore(release): 0.37.0

---
 CHANGELOG.md      | 9 +++++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecbf000..af21996 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.37.0](https://github.com/Fantom-foundation/Fantom-Vue3-Components/compare/v0.36.2...v0.37.0) (2023-10-09)
+
+
+### Features
+
+* **aria:** create `findNextOrPrevElemByList` and `keyboardNavigationByList` functions ([f69ebf2](https://github.com/Fantom-foundation/Fantom-Vue3-Components/commit/f69ebf22fd446afaa35cdb9e32ce2b597ba85659))
+* **FComboBox:** add `clas` prop ([98adbd8](https://github.com/Fantom-foundation/Fantom-Vue3-Components/commit/98adbd84290be2670c3459848dbb84ed60710f4f))
+* **FToolbar:** create component ([9503aa6](https://github.com/Fantom-foundation/Fantom-Vue3-Components/commit/9503aa64df8df4ce3ad5fdec2c498c589f36f3e0))
+
 ### [0.36.2](https://github.com/Fantom-foundation/Fantom-Vue3-Components/compare/v0.36.1...v0.36.2) (2023-09-27)
 
 
diff --git a/package-lock.json b/package-lock.json
index c862250..2588f49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "fantom-vue3-components",
-    "version": "0.36.2",
+    "version": "0.37.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "fantom-vue3-components",
-            "version": "0.36.2",
+            "version": "0.37.0",
             "license": "MIT",
             "dependencies": {
                 "@vueuse/core": "^8.5.0",
diff --git a/package.json b/package.json
index 974aba8..8a1fe48 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fantom-vue3-components",
-    "version": "0.36.2",
+    "version": "0.37.0",
     "description": "Library of various Vue 3 components with focus on accessibility",
     "author": "Fantom Foundation",
     "license": "MIT",