@webitel/ui-sdk 25.6.11 → 25.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.6.11",
+  "version": "25.6.13",
   "private": false,
   "scripts": {
     "dev": "npm run docs:dev",

package/src/assets/icons/sprite/index.js

@@ -146,6 +146,7 @@ import plyrRestart from './plyr-restart.svg';
 import plyrRewind from './plyr-rewind.svg';
 import plyrSettings from './plyr-settings.svg';
 import plyrVolume from './plyr-volume.svg';
+import portal from './portal.svg';
 import previewTagApplication from './preview-tag-application.svg';
 import previewTagAudio from './preview-tag-audio.svg';
 import previewTagImage from './preview-tag-image.svg';
@@ -390,6 +391,8 @@ export default objCamelToKebab({
 
   webitelLogo,
 
+  portal,
+
   previewTagAudio,
   previewTagVideo,
   previewTagApplication,

package/src/assets/icons/sprite/portal.svg

@@ -0,0 +1,3 @@
+<svg id="portal" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM9 19.416C9.92666 19.7912 10.9388 20 12 20C12.4458 20 12.8827 19.9617 13.3086 19.8916L9 16.3008V19.416ZM15.5596 19.1641C16.6047 18.6438 17.5195 17.9024 18.2432 17H12.9629L15.5596 19.1641ZM4.83496 15.5596C5.35516 16.6047 6.09769 17.5185 7 18.2422V12.9619L4.83496 15.5596ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9ZM16.3018 15H19.416C19.7912 14.0733 20 13.0612 20 12C20 11.5539 19.9618 11.1166 19.8916 10.6904L16.3018 15ZM4.58398 9C4.20875 9.92666 4 10.9388 4 12C4 12.4457 4.03734 12.8827 4.10742 13.3086L7.69824 9H4.58398ZM17 11.0371L19.1641 8.43945C18.6438 7.39467 17.9022 6.48031 17 5.75684V11.0371ZM12 4C11.554 4 11.1166 4.03724 10.6904 4.10742L15 7.69824V4.58301C14.0734 4.20786 13.0611 4 12 4ZM8.43945 4.83496C7.3945 5.35523 6.4804 6.0977 5.75684 7H11.0371L8.43945 4.83496Z" />
+</svg>

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -50,35 +50,32 @@
       </div>
       <component
         :is="QuestionTypeComponent"
-        :question="question"
+        v-model:question="questionModel"
         mode="write"
-        @change:question="emit('change:question', $event)"
       />
     </section>
   </article>
 </template>
 
-<script setup>
-import cloneDeep from 'lodash/cloneDeep.js';
-import set from 'lodash/set.js';
+<script lang="ts" setup>
+import cloneDeep from 'lodash/cloneDeep';
 import { computed } from 'vue';
-import { EngineAuditQuestionType } from 'webitel-sdk';
+import { EngineAuditQuestionType, EngineQuestion } from 'webitel-sdk';
 
 import WtIconBtn from '../../../components/wt-icon-btn/wt-icon-btn.vue';
 import WtInput from '../../../components/wt-input/wt-input.vue';
 import WtSelect from '../../../components/wt-select/wt-select.vue';
 import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
 import WtTooltip from '../../../components/wt-tooltip/wt-tooltip.vue';
+import {updateObject} from '../../../scripts';
 import { generateQuestionOptionsSchema } from '../schemas/AuditFormQuestionOptionsSchema.js';
 import { generateQuestionScoreSchema } from '../schemas/AuditFormQuestionScoreSchema.js';
 import AuditFormQuestionOptions from './form-questions/options/audit-form-question-options.vue';
 import AuditFormQuestionScore from './form-questions/score/audit-form-question-score.vue';
 
-const props = defineProps({
-  question: {
-    type: Object,
-    required: true,
-  },
+const questionModel = defineModel<EngineQuestion>('question');
+
+defineProps({
   first: {
     type: Boolean,
     default: false,
@@ -88,7 +85,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['change:question', 'copy', 'delete']);
+const emit = defineEmits(['copy', 'delete']);
 
 const QuestionType = [
   {
@@ -102,30 +99,29 @@ const QuestionType = [
 ];
 
 const prettifiedQuestionType = computed(() =>
-  QuestionType.find(({ value }) => value === props.question.type),
+  QuestionType.find(({ value }) => value === questionModel.value.type),
 );
 
 const QuestionTypeComponent = computed(() => {
-  if (props.question.type === EngineAuditQuestionType.Option)
+  if (questionModel.value.type === EngineAuditQuestionType.Option)
     return AuditFormQuestionOptions;
-  if (props.question.type === EngineAuditQuestionType.Score)
+  if (questionModel.value.type === EngineAuditQuestionType.Score)
     return AuditFormQuestionScore;
   return null;
 });
 
 function updateQuestion({ path, value }) {
-  const question = set(cloneDeep(props.question), path, value);
-  emit('change:question', question);
+  questionModel.value = updateObject({ obj: questionModel.value, path, value });
 }
 
 function handleQuestionTypeChange(type) {
-  const question = cloneDeep(props.question);
+  const question = cloneDeep(questionModel.value);
   if (type === EngineAuditQuestionType.Option) {
     Object.assign(question, generateQuestionOptionsSchema());
   } else if (type === EngineAuditQuestionType.Score) {
     Object.assign(question, generateQuestionScoreSchema());
   }
-  emit('change:question', question);
+  questionModel.value = question;
 }
 </script>
 

package/src/modules/AuditForm/components/audit-form-question.vue

@@ -1,6 +1,8 @@
 <template>
   <component
     :is="component"
+    v-model:question="questionModel"
+    v-model:answer="answerModel"
     v-clickaway="saveQuestion"
     :class="[
       `audit-form-question--mode-${mode}`,
@@ -13,26 +15,19 @@
     ]"
     :disable-dragging="mode === 'fill'"
     :first="first"
-    :question="question"
     :readonly="readonly"
-    :result="answer /* compat, should be ':answer' */"
-    :answer="answer"
     :v="v$"
     class="audit-form-question"
     @activate="activateQuestion"
     @copy="emit('copy')"
     @delete="emit('delete')"
-    @change:question="emit('update:question', $event) /* compat, should be removed */"
-    @update:question="emit('update:question', $event)"
-    @change:result="emit('update:answer', $event) /* compat, should be ':answer' */"
-    @update:answer="emit('update:answer', $event)"
   />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { computed, inject,onMounted, ref, toRefs } from 'vue';
+import { computed, inject,onMounted, ref } from 'vue';
 import { EngineQuestion, EngineQuestionAnswer } from "webitel-sdk";
 
 import vClickaway from '../../../directives/clickaway/clickaway.js';
@@ -43,9 +38,10 @@ import QuestionWrite from './audit-form-question-write-wrapper.vue';
 const mode = inject('mode');
 const readonly = inject('readonly');
 
-const props = withDefaults(defineProps<{
-  question: EngineQuestion;
-  answer: EngineQuestionAnswer | null;
+const questionModel = defineModel<EngineQuestion>('question');
+const answerModel = defineModel<EngineQuestionAnswer | null>('answer');
+
+withDefaults(defineProps<{
   first?: boolean;
 }>(), {
   first: false,
@@ -54,8 +50,6 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
   'copy': [];
   'delete': [];
-  'update:question': [unknown]; // todo
-  'update:answer': [unknown]; // todo
 }>();
 
 const QuestionState = {
@@ -65,9 +59,6 @@ const QuestionState = {
 
 const state = ref(QuestionState.SAVED);
 
-// is needed for useVuelidate, because props.question/props.result isn't reactive
-const { question, answer } = toRefs(props);
-
 const v$ = useVuelidate(
   computed(() =>
     mode === 'create'
@@ -80,7 +71,7 @@ const v$ = useVuelidate(
           answer: {
             required: (value) => {
               // if not required, no need to validate
-              if (!props.question.required) return true;
+              if (!questionModel.value.required) return true;
 
               if (value && value?.score != null) {
                 return true;
@@ -89,7 +80,7 @@ const v$ = useVuelidate(
           },
         },
   ),
-  { question, answer },
+  { question: questionModel, answer: answerModel },
   { $autoDirty: true },
 );
 
@@ -102,7 +93,7 @@ const component = computed(() => {
   return QuestionRead;
 });
 
-const isAnswer = computed(() => !isEmpty(props.answer));
+const isAnswer = computed(() => !isEmpty(answerModel.value));
 
 function saveQuestion() {
   state.value = QuestionState.SAVED;

package/src/modules/AuditForm/components/form-questions/options/audit-form-question-options.vue

@@ -49,7 +49,7 @@ import OptionsWriteRow from './audit-form-question-options-write-row.vue';
 const questionModel = defineModel<EngineQuestion>('question');
 const answerModel = defineModel<EngineQuestionAnswer | null>('answer');
 
-const props = defineProps<{
+defineProps<{
   /**
    * question mode, NOT audit form mode
    */

package/src/modules/AuditForm/components/form-questions/score/audit-form-question-score.vue

@@ -44,20 +44,17 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { integer, maxValue, minValue, required } from '@vuelidate/validators';
-import { computed, onMounted, toRefs } from 'vue';
-import { EngineQuestionAnswer } from 'webitel-sdk';
+import { computed, onMounted } from 'vue';
+import {EngineQuestion, EngineQuestionAnswer} from 'webitel-sdk';
 
 import WtInput from '../../../../../components/wt-input/wt-input.vue';
 import WtRadio from '../../../../../components/wt-radio/wt-radio.vue';
 import updateObject from '../../../../../scripts/updateObject.js';
 
 const answerModel = defineModel<EngineQuestionAnswer | null>('answer');
+const questionModel = defineModel<EngineQuestion>('question');
 
-const props = defineProps({
-  question: {
-    type: Object,
-    required: true,
-  },
+defineProps({
   mode: {
     // options: ['read', 'write']
     type: String,
@@ -65,11 +62,6 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['change:question']);
-
-// is needed for useVuelidate, because props.question/props.result isn't reactive
-const { question } = toRefs(props);
-
 const v$ = useVuelidate(
   computed(() => ({
     question: {
@@ -80,25 +72,25 @@ const v$ = useVuelidate(
         integer,
       },
       max: {
-        minValue: minValue(props.question.min ? props.question.min : 1),
+        minValue: minValue(questionModel.value.min ? questionModel.value.min : 1),
         maxValue: maxValue(10),
         required,
         integer,
       },
     },
   })),
-  { question },
+  { question: questionModel },
   { $autoDirty: true },
 );
 
 const scoreRange = computed(() => {
-  if (props.question.min > props.question.max) return [];
+  if (questionModel.value.min > questionModel.value.max) return [];
   const result = [];
-  let i = +props.question.min;
+  let i = +questionModel.value.min;
   do {
     result.push(i);
     i += 1;
-  } while (i <= props.question.max);
+  } while (i <= questionModel.value.max);
   return result;
 });
 
@@ -110,7 +102,7 @@ function updateAnswer(score) {
 }
 
 function updateQuestion({ path, value }) {
-  emit('change:question', updateObject({ obj: props.question, path, value }));
+  questionModel.value = updateObject({ obj: questionModel.value, path, value });
 }
 
 // init validation

package/src/modules/AuditForm/components/__tests__/audit-form-question-read-wrapper.spec.js

@@ -1,15 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import AuditFormQuestionReadWrapper from '../audit-form-question-read-wrapper.vue';
-
-describe('AuditFormQuestionReadWrapper', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(AuditFormQuestionReadWrapper, {
-      props: {
-        question: {},
-        result: {},
-      },
-    });
-    expect(wrapper.isVisible()).toBe(true);
-  });
-});

package/src/modules/AuditForm/components/__tests__/audit-form-question-write-wrapper.spec.js

@@ -1,68 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { EngineAuditQuestionType } from 'webitel-sdk';
-
-import { generateQuestionOptionsSchema } from '../../schemas/AuditFormQuestionOptionsSchema.js';
-import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema.js';
-import { generateQuestionScoreSchema } from '../../schemas/AuditFormQuestionScoreSchema.js';
-import AuditFormQuestionWriteWrapper from '../audit-form-question-write-wrapper.vue';
-
-const v = { question: {} };
-
-describe('AuditFormQuestionWriteWrapper', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
-      props: {
-        question: {},
-        v,
-      },
-    });
-    expect(wrapper.isVisible()).toBe(true);
-  });
-  it('correctly changes question', () => {
-    const question = generateQuestionSchema();
-    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
-      props: {
-        question,
-        v,
-      },
-    });
-    wrapper
-      .findComponent({ name: 'wt-switcher' })
-      .vm.$emit('change', !question.required);
-    expect(wrapper.emitted()['change:question'][0][0].required).toBe(
-      !question.required,
-    );
-  });
-  it('correctly changes question type to Score', () => {
-    const question = {};
-    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
-      props: {
-        question,
-        v,
-      },
-    });
-    wrapper
-      .find('.audit-form-question-write-content-question')
-      .findComponent({ name: 'wt-select' })
-      .vm.$emit('input', { value: EngineAuditQuestionType.Score });
-    expect(wrapper.emitted()['change:question'][0][0]).toEqual(
-      generateQuestionScoreSchema(),
-    );
-  });
-  it('correctly changes question type to Options', () => {
-    const question = {};
-    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
-      props: {
-        question,
-        v,
-      },
-    });
-    wrapper
-      .find('.audit-form-question-write-content-question')
-      .findComponent({ name: 'wt-select' })
-      .vm.$emit('input', { value: EngineAuditQuestionType.Option });
-    expect(wrapper.emitted()['change:question'][0][0]).toEqual(
-      generateQuestionOptionsSchema(),
-    );
-  });
-});

package/src/modules/AuditForm/components/__tests__/audit-form-question.spec.js

@@ -1,15 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import AuditFormQuestion from '../audit-form-question.vue';
-
-describe('AuditFormQuestion', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(AuditFormQuestion, {
-      props: {
-        question: {},
-        result: {},
-      },
-    });
-    expect(wrapper.isVisible()).toBe(true);
-  });
-});

package/src/modules/AuditForm/components/__tests__/audit-form.spec.js

@@ -1,83 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { ref } from 'vue';
-
-import { useDestroyableSortable } from '../../../../composables/useDestroyableSortable/useDestroyableSortable.js';
-import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema.js';
-import AuditForm from '../audit-form.vue';
-
-vi.mock(
-  '../../../../composables/useDestroyableSortable/useDestroyableSortable.js',
-);
-
-useDestroyableSortable.mockImplementation(() => ({
-  reloadSortable: ref(false),
-}));
-
-describe('AuditForm', () => {
-  it('renders a component', async () => {
-    const wrapper = mount(AuditForm, {
-      props: {
-        mode: '',
-        questions: [],
-      },
-    });
-    expect(wrapper.isVisible()).toBe(true);
-  });
-  it('add question button triggers update question event', async () => {
-    const wrapper = mount(AuditForm, {
-      props: {
-        mode: 'create',
-        questions: [],
-      },
-    });
-    await wrapper.findComponent('.audit-form__add-button').vm.$emit('click');
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-    console.info(wrapper.html());
-    expect(wrapper.emitted()['update:questions'][0][0]).toEqual([
-      generateQuestionSchema({ required: true }),
-    ]);
-  });
-  it('delete event from child question emits update without passed question', async () => {
-    const wrapper = mount(AuditForm, {
-      props: {
-        mode: 'create',
-        questions: [generateQuestionSchema()],
-      },
-    });
-    await wrapper
-      .findComponent({ name: 'audit-form-question' })
-      .vm.$emit('delete', { key: 0 });
-    expect(wrapper.emitted()['update:questions'][0][0]).toEqual([]);
-  });
-  it('copy event from child question emits update with duplicated questions', async () => {
-    const question = generateQuestionSchema();
-    const wrapper = mount(AuditForm, {
-      props: {
-        mode: 'create',
-        questions: [question],
-      },
-    });
-    await wrapper
-      .findComponent({ name: 'audit-form-question' })
-      .vm.$emit('copy', { question, key: 0 });
-    expect(wrapper.emitted()['update:questions'][0][0]).toEqual([
-      question,
-      question,
-    ]);
-  });
-  it('initializes result depending on passed questions', () => {
-    const wrapper = mount(AuditForm, {
-      props: {
-        mode: 'fill',
-        questions: [
-          generateQuestionSchema(),
-          generateQuestionSchema(),
-          generateQuestionSchema(),
-        ],
-      },
-    });
-    expect(wrapper.emitted()['update:result'][0][0]).toEqual([{}, {}, {}]);
-  });
-});