Implement ActionBar component

packages/survey-vue-ui/src/components/action-bar/Action.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-bind:class="item.getActionRootCss()" 
+      :id="item.id">
+    <div class="sv-action__content">
+      <sv-action-bar-separator
+        v-if="item.needSeparator"
+      ></sv-action-bar-separator>
+      <component :is="componentName" :item="item"> </component>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Action } from "survey-core";
+import { defineSurveyComponent } from "../../base";
+
+export default defineSurveyComponent({
+  // eslint-disable-next-line
+  name: "sv-action",
+  props: {
+    item: Action,
+  },
+  computed: {
+    componentName() {
+      return this.item.component || "sv-action-bar-item";
+    },
+  },
+  data: (vm: any) => {
+    return {
+      getModel: () => {
+        return vm.item;
+      },
+    };
+  },
+});
+
+</script>

packages/survey-vue-ui/src/components/action-bar/ActionBar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    v-if="model.hasActions"
+    ref="container"
+    :class="model.getRootCss()"
+    v-on:click="
+      (event) => {
+        event.stopPropagation();
+      }
+    "
+  >
+    <sv-action
+      v-for="item in model.renderedActions"
+      v-bind:key="item.id"
+      :item="item"
+    ></sv-action>
+  </div>
+</template>
+
+<script lang="ts">
+import { ActionContainer } from "survey-core";
+import { defineSurveyComponent } from "../../base";
+
+export default defineSurveyComponent({
+  // eslint-disable-next-line
+  name: "sv-action-bar",
+  props: {
+    model: ActionContainer,
+    handleClick: Boolean
+  },
+  computed: {
+    componentName() {
+      return this.item.component || "sv-action-bar-item";
+    },
+  },
+  mounted() {
+    if (!this.model.hasActions) return;
+    const container = this.$el;
+    this.model.initResponsivityManager(container);
+  },
+  beforeUnmount() {
+    this.model.resetResponsivityManager();
+  },
+  data: (vm: any) => {
+    return {
+      getModel: () => {
+        return vm.model;
+      },
+    };
+  },
+});
+</script>

packages/survey-vue-ui/src/components/action-bar/ActionBarItem.vue

@@ -0,0 +1,57 @@
+<template>
+  <button
+    :class="item.getActionBarItemCss()"
+    type="button"
+    v-on:click="
+      () => {
+        item.action();
+      }
+    "
+    v-on:keyup="
+      (evt) => {
+        evt.stopPropagation();
+      }
+    "
+    v-bind:disabled="item.enabled !== undefined && !item.enabled"
+    v-bind:title="item.tooltip || item.title"
+    v-bind:aria-checked="item.ariaChecked"
+    v-bind:aria-expanded="item.ariaExpanded"
+    v-bind:role="item.ariaRole"
+    v-bind:tabindex="item.disableTabStop ? -1 : 0"
+  >
+    <sv-svg-icon
+      v-if="item.iconName"
+      :class="item.cssClasses.itemIcon"
+      :iconName="item.iconName"
+      :size="item.iconSize"
+      :title="item.tooltip || item.title"
+    ></sv-svg-icon>
+
+    <span
+      v-if="item.hasTitle"
+      :class="item.getActionBarItemTitleCss()"
+      >{{ item.title }}</span
+    >
+  </button>
+</template>
+
+<script lang="ts">
+import { Action } from "survey-core";
+import { defineSurveyComponent } from "../../base";
+
+export default defineSurveyComponent({
+  // eslint-disable-next-line
+  name: "sv-action-bar-item",
+  props: {
+    item: Action,
+  },
+  data: (vm: any) => {
+    return {
+      getModel: () => {
+        return vm.item;
+      },
+    };
+  },
+});
+
+</script>

packages/survey-vue-ui/src/components/action-bar/ActionBarItemDropdown.vue

@@ -0,0 +1,61 @@
+<template>
+  <button
+    type="button"
+    :class="item.getActionBarItemCss()"
+    v-on:click="
+      () => {
+        item.action();
+      }
+    "
+    v-on:keyup="
+      (evt) => {
+        evt.stopPropagation();
+      }
+    "
+    v-bind:disabled="item.enabled !== undefined && item.enabled"
+    v-bind:title="item.tooltip || item.title"
+    v-bind:role="item.ariaRole"
+    v-bind:tabindex="item.disableTabStop ? -1 : 0"
+  >
+    <sv-svg-icon
+      v-if="item.iconName"
+      :class="item.cssClasses.itemIcon"
+      :iconName="item.iconName"
+      :size="item.iconSize"
+      :title="item.tooltip || item.title"
+    ></sv-svg-icon>
+
+    <span
+      v-if="item.hasTitle"
+      :class="item.getActionBarItemTitleCss()"
+      >{{ item.title }}</span
+    >
+    <sv-popup :model="item.popupModel"></sv-popup>
+  </button>
+</template>
+
+<script lang="ts">
+import { Action, ActionDropdownViewModel } from "survey-core";
+import { defineSurveyComponent } from "../../base";
+
+export default defineSurveyComponent({
+  // eslint-disable-next-line
+  name: "sv-action-bar-item-dropdown",
+  props: {
+    item: Action,
+  },
+  beforeCreate() {
+    this.viewModel = new ActionDropdownViewModel(this.item);
+  },
+  beforeUnmount() {
+    this.viewModel.dispose();
+  },
+  data: (vm: any) => {
+    return {
+      getModel: () => {
+        return vm.item;
+      },
+    };
+  },
+});
+</script>

packages/survey-vue-ui/src/components/action-bar/ActionBarSeparator.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="sv-action-bar-separator" :class="innerCss"></div>
+</template>
+
+<script lang="ts">
+import { Action } from "survey-core";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  name: "sv-action-bar-separator",
+  props: {
+    item: Action,
+  },
+  computed: {
+    innerCss() {
+      return this.item && this.item.innerCss;
+    },
+  },
+  data: (vm: any) => {
+    return {
+      getModel: () => {
+        return vm.question;
+      },
+    };
+  },
+});
+
+</script>