24.02.48: wt-expansion-panel events, collapsed prop watcher, upd docs…

… [WTEL-3802, WTEL-3803, WTEL-3804]

docs/pages/docs/how-to/typical-workspace-queue-cases/Readme.md

@@ -25,7 +25,7 @@ _Виконані пункти можна пропустити._
 
 5. Створити вхідну чергу для цього оператора. В неї додати операторський скілл.
 
-[Приклад черги](https://dev.webitel.com/contact-center/queues/505)
+[Приклад черги](https://dev.webitel.com/contact-center/queues/730)
 
 ### Як налаштувати акаунт мембера?
 
@@ -50,3 +50,31 @@ _Виконані пункти можна пропустити._
 2. У акаунті оператора ввійти в режим Contact Center.
 3. У аккаунті мембера подзвонити на номер, вказаний в діалплані.
 
+## Як створити задачу (job) собі у чергу?
+
+_Виконані пункти можна пропустити._
+
+### Як налаштувати акаунт оператора?
+
+1. Створити користувача. (див. вище)
+2. Назначити користувачу девайс, а також дефолтний девайс. (див. вище)
+3. Створити свій операторський скілл. (див. вище)
+4. Створити агента з цього користувача, та назначити йому цей скілл. (див. вище)
+
+
+5. Створити вхідну чергу задач для цього оператора. В неї додати операторський скілл.
+
+[Приклад черги](https://dev.webitel.com/contact-center/queues/505)
+
+### Як створити задачу?
+
+1. Відкрити розділ мемберів для створеної вище черги.
+2. Створити мембера. Будь-якого.
+
+### Як отримати задачу y Workspace?
+1. Зайти у Contact-center з акаунта агента.
+2. Задача має прийти автоматично.
+
+
+
+

docs/pages/webitel-ui/components/wt-expansion-panel/Readme.md

@@ -1,16 +1,32 @@
 <script setup>
-import Docs from './wt-expansion-panel-docs.vue';
-import ExampleExpansionPanelDifferentSizes from './examples/example-expansion-panel-different-sizes.vue';
 </script>
 
 # WtExpansionPanel
 
 ## Props
-::: raw
-<Docs/>
-:::
+
+| Name        | Type    | Default | Description                                                                                      |
+|-------------|---------|---------|--------------------------------------------------------------------------------------------------|
+| `size`      | String  | `md`    | Size of the expansion panel. Can be `sm`, or `md`.                                               |
+| `collapsed` | Boolean | `false` | Whether the expansion panel is initially collapsed. Also, can force expansion state, if changed. |
+
+## Events
+
+| Name     | Params | Description                                 |
+|----------|--------|---------------------------------------------|
+| `opened` | -      | Emitted when the expansion panel is opened. |
+| `closed` | -      | Emitted when the expansion panel is closed. |
+
+## Slots
+
+| Name      | Scope                                 | Description                     |
+|-----------|---------------------------------------|---------------------------------|
+| `default` | -                                     | Content of the expansion panel. |
+| `title`   | -                                     | Title of the expansion panel.   |
+| `actions` | `{ open: function, opened: boolean }` | Actions of the expansion panel. |
 
 ## Example Expansion Panel Different Sizes
+
 ::: raw
 <ExampleExpansionPanelDifferentSizes/>
 :::

package.json

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

src/components/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js

@@ -6,4 +6,16 @@ describe('WtExpansionPanel', () => {
     const wrapper = shallowMount(WtExpansionPanel);
     expect(wrapper.isVisible()).toBe(true);
   });
+  it('emits "opened" event when opened', () => {
+    const wrapper = shallowMount(WtExpansionPanel);
+    wrapper.vm.opened = false;
+    wrapper.find('.wt-expansion-panel-header').trigger('click');
+    expect(wrapper.emitted().opened).toBeTruthy();
+  });
+  it('emits "closed" event when closed', () => {
+    const wrapper = shallowMount(WtExpansionPanel);
+    wrapper.vm.opened = true;
+    wrapper.find('.wt-expansion-panel-header').trigger('click');
+    expect(wrapper.emitted().closed).toBeTruthy();
+  });
 });

src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -6,8 +6,8 @@
     <div
       class="wt-expansion-panel-header"
       tabindex="0"
-      @click="opened = !opened"
-      @keypress.enter="opened = !opened"
+      @click="toggle"
+      @keypress.enter="toggle"
     >
       <slot name="title" />
       <div class="wt-expansion-panel-actions">
@@ -16,7 +16,8 @@
           v-bind="{ open, opened }"
         />
         <wt-icon
-          :class="{ 'wt-expansion-panel-arrow--opened':opened }"
+          class="wt-expansion-panel-arrow"
+          :class="{ 'wt-expansion-panel-arrow--opened': opened }"
           icon="arrow-right"
         />
       </div>
@@ -34,7 +35,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 const props = defineProps({
   size: {
@@ -47,11 +48,35 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['opened', 'closed']);
+
 const opened = ref(!props.collapsed);
 
 function open() {
-  if (!opened.value) opened.value = true;
+  if (!opened.value) {
+    opened.value = true;
+    emit('opened');
+  }
+}
+
+function close() {
+  if (opened.value) {
+    opened.value = false;
+    emit('closed');
+  }
+}
+
+function toggle() {
+  return opened.value ? close() : open();
 }
+
+watch(() => props.collapsed, (newVal) => {
+  if (newVal) {
+    close();
+  } else {
+    open();
+  }
+});
 </script>
 
 <style lang="scss">
@@ -85,8 +110,13 @@ function open() {
     gap: var(--spacing-xs);
   }
 
-  .wt-expansion-panel-arrow--opened {
-    transform: rotate(90deg);
+  .wt-expansion-panel-arrow {
+    transition: var(--transition);
+
+    &--opened {
+      transform: rotate(90deg);
+
+    }
   }
 
   &--sm {