Merge pull request #355 from webitel/feature/add-disabled-prop-in-wt-…

…action-bar

feature: add desabled prop in wt-action-bar[WTEL-5282](https://webite…

docs/pages/webitel-ui/components/wt-action-bar/Readme.md

@@ -2,6 +2,7 @@
 import Specs from './component-specs.vue';
 import ExampleTableActionBar from './examples/example-table-action-bar.vue';
 import ExampleSlottedTableActionBar from './examples/example-slotted-table-action-bar.vue';
+import ExampleDisabledTableActionBar from './examples/example-disabled-action-bar.vue';
 </script>
 
 # `wt-actions-bar.vue`
@@ -43,3 +44,23 @@ Events are built dynamically on `click:[IconAction]` pattern for all available [
 ::: details Code
 <<< ./examples/example-slotted-table-action-bar.vue
 :::
+
+## Example Slotted Table Actions Bar
+
+::: raw
+<ExampleSlottedTableActionBar />
+:::
+
+::: details Code
+<<< ./examples/example-slotted-table-action-bar.vue
+:::
+
+## Example Disabled Actions Bar
+
+::: raw
+<ExampleDisabledTableActionBar />
+:::
+
+::: details Code
+<<< ./examples/example-disabled-action-bar.vue
+:::

docs/pages/webitel-ui/components/wt-action-bar/examples/example-disabled-action-bar.vue

@@ -0,0 +1,19 @@
+<template>
+  <wt-action-bar
+    :actions="tableActionsOrder"
+    disabled:add="true"
+    disabled:delete="true"
+    disabled:refresh="true"
+    mode="table"
+  />
+</template>
+
+<script setup>
+import { tableActionsOrder } from '__lib__/components/wt-action-bar/WtActionBarActionsOrder.js';
+</script>
+
+<style lang="scss" scoped>
+.example-table-action-bar {
+
+}
+</style>

package.json

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

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

@@ -25,6 +25,7 @@
     >
       <wt-icon-action
         :action="action"
+        :disabled="props[`disabled:${action}`]"
         @click="emit(`click:${action}`)"
       />
     </slot>
@@ -81,6 +82,21 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+
+  /**
+   * Built dynamically on `disabled:[IconAction]` pattern for all available [IconActions](../../enums/IconAction/Readme.md).
+   */
+
+  disabled: { // Not implemented, but can be used to disable all actions
+    type: Boolean,
+    default: false,
+  },
+
+  ...Object.values(IconAction).reduce((acc, action) => {
+    acc[`disabled:${action}`] = { type: Boolean, default: false };
+    return acc;
+  }, {}),
+
 });
 const emit = defineEmits([
   /**