Merge pull request #344 from webitel/fix/props-in-wt-action-bar

fix: props mode and add new props include/exclude[WTEL-5282] (https://webitel.atlassian.net/browse/WTEL-5282)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.62",
+  "version": "24.10.63",
   "private": false,
   "scripts": {
     "dev": "vite",

src/components/wt-action-bar/WtActionBarActionsOrder.js

@@ -12,7 +12,4 @@ export const tableActionsOrder = [
 ];
 
 // TODO
-export const cardActionsOrder = [
-  ...tableActionsOrder,
-  IconAction.EDIT,
-]
+export const sectionActionsOrder = tableActionsOrder;

src/components/wt-action-bar/wt-action-bar.vue

@@ -35,16 +35,16 @@
 import { computed } from 'vue';
 import IconAction from '../../enums/IconAction/IconAction.enum.js';
 import WtIconAction from '../wt-icon-action/wt-icon-action.vue';
-import { tableActionsOrder, cardActionsOrder } from './WtActionBarActionsOrder.js';
+import { tableActionsOrder, sectionActionsOrder } from './WtActionBarActionsOrder.js';
 
 const props = defineProps({
   /**
-   * [`'table'`, `'card'`]
+   * [`'table'`, `'section'`]
    * */
   mode: {
     type: String,
     default: 'table',
-    validator: (v) => ['table', 'card'].includes(v),
+    validator: (v) => ['table', 'section'].includes(v),
   },
   /**
    * see `IconAction` enum
@@ -63,6 +63,24 @@ const props = defineProps({
     // default: 'md',
     // validator: (v) => ['sm', 'md', 'lg'].includes(v),
   },
+
+  /**
+  * Leave the default value for the mode only listed in includes prop
+   */
+
+  include: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+  * Leave the default values for the mode, except for those in exclude prop
+   */
+
+  exclude: {
+    type: Array,
+    default: () => [],
+  },
 });
 const emit = defineEmits([
   /**
@@ -72,7 +90,11 @@ const emit = defineEmits([
 ]);
 
 const shownActions = computed(() => {
-  const actionsOrder = props.mode === 'card' ? cardActionsOrder : tableActionsOrder;
+  const actionsOrder = props.mode === 'section' ? sectionActionsOrder : tableActionsOrder;
+
+  if(props.include.length) return actionsOrder.filter((action) => props.include.includes(action));
+
+  if(props.exclude.length) return actionsOrder.filter((action) => !props.exclude.includes(action));
 
   return actionsOrder.filter((action) => props.actions.includes(action));
 });