@webitel/ui-sdk 25.6.12 → 25.6.13

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [v25.6.12] - 2025-05-12
+### :sparkles: New Features
+- [`5dff95a`](https://github.com/webitel/webitel-ui-sdk/commit/5dff95af18314681fa30a08fa112eecc8f760c80) - added portal icon [WTEL-6785](https://webitel.atlassian.net/browse/WTEL-6785) *(commit by [@plnnsimon](https://github.com/plnnsimon))*
+
+
 ## [v25.6.11] - 2025-05-12
 ### :sparkles: New Features
 - [`fabd8e9`](https://github.com/webitel/webitel-ui-sdk/commit/fabd8e9d3aa19bfa106c1d26f796369d53902cc3) - audit-form hide-comment [WTEL-6874](https://webitel.atlassian.net/browse/WTEL-6874) *(commit by [@dlohvinov](https://github.com/dlohvinov))*
@@ -2130,3 +2135,4 @@
 [v25.6.9]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.8...v25.6.9
 [v25.6.10]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.9...v25.6.10
 [v25.6.11]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.10...v25.6.11
+[v25.6.12]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.11...v25.6.12

package/dist/types/modules/AuditForm/components/audit-form-question-write-wrapper.vue.d.ts

@@ -1,12 +1,35 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "delete" | "copy" | "change:question", ...args: any[]) => void;
-    question: Record<string, any>;
-    first: boolean;
-    v?: Record<string, any>;
-    $props: {
-        readonly question?: Record<string, any>;
-        readonly first?: boolean;
-        readonly v?: Record<string, any>;
+import { EngineQuestion } from 'webitel-sdk';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    first: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    v: {
+        type: ObjectConstructor;
+    };
+    question: {
+        type: import("vue").PropType<EngineQuestion>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (...args: any[]) => void;
+    copy: (...args: any[]) => void;
+    "update:question": (value: EngineQuestion) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    first: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    v: {
+        type: ObjectConstructor;
+    };
+    question: {
+        type: import("vue").PropType<EngineQuestion>;
+    };
+}>> & Readonly<{
+    onDelete?: (...args: any[]) => any;
+    onCopy?: (...args: any[]) => any;
+    "onUpdate:question"?: (value: EngineQuestion) => any;
+}>, {
+    first: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/modules/AuditForm/components/audit-form-question.vue.d.ts

@@ -1,23 +1,25 @@
 import { EngineQuestion, EngineQuestionAnswer } from "webitel-sdk";
 type __VLS_Props = {
-    question: EngineQuestion;
-    answer: EngineQuestionAnswer | null;
     first?: boolean;
 };
 declare function activateQuestion(): void;
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
+type __VLS_PublicProps = __VLS_Props & {
+    'question'?: EngineQuestion;
+    'answer'?: EngineQuestionAnswer | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
     activateQuestion: typeof activateQuestion;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: () => any;
     copy: () => any;
-    "update:question": (args_0: unknown) => any;
-    "update:answer": (args_0: unknown) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "update:question": (value: EngineQuestion) => any;
+    "update:answer": (value: EngineQuestionAnswer) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onDelete?: () => any;
     onCopy?: () => any;
-    "onUpdate:question"?: (args_0: unknown) => any;
-    "onUpdate:answer"?: (args_0: unknown) => any;
+    "onUpdate:question"?: (value: EngineQuestion) => any;
+    "onUpdate:answer"?: (value: EngineQuestionAnswer) => any;
 }>, {
     first: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/modules/AuditForm/components/form-questions/score/audit-form-question-score.vue.d.ts

@@ -1,9 +1,5 @@
-import { EngineQuestionAnswer } from 'webitel-sdk';
+import { EngineQuestion, EngineQuestionAnswer } from 'webitel-sdk';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    question: {
-        type: ObjectConstructor;
-        required: true;
-    };
     mode: {
         type: StringConstructor;
         default: string;
@@ -11,14 +7,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     answer: {
         type: import("vue").PropType<EngineQuestionAnswer>;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "change:question": (...args: any[]) => void;
-    "update:answer": (value: EngineQuestionAnswer) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     question: {
-        type: ObjectConstructor;
-        required: true;
+        type: import("vue").PropType<EngineQuestion>;
     };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:question": (value: EngineQuestion) => any;
+    "update:answer": (value: EngineQuestionAnswer) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {
         type: StringConstructor;
         default: string;
@@ -26,9 +21,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     answer: {
         type: import("vue").PropType<EngineQuestionAnswer>;
     };
+    question: {
+        type: import("vue").PropType<EngineQuestion>;
+    };
 }>> & Readonly<{
+    "onUpdate:question"?: (value: EngineQuestion) => any;
     "onUpdate:answer"?: (value: EngineQuestionAnswer) => any;
-    "onChange:question"?: (...args: any[]) => any;
 }>, {
     mode: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

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

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([{}, {}, {}]);
-  });
-});