@webitel/ui-sdk 24.4.34 → 24.4.37

package/package.json

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

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

@@ -23,7 +23,7 @@
       </div>
     </div>
     <wt-expand-transition
-      v-if="opened"
+      v-show="opened"
     >
       <div
         class="wt-expansion-panel-body"

package/src/components/wt-player/wt-player.vue

@@ -109,8 +109,8 @@ export default {
       if (this.player) this.player.destroy();
       const controls = [
         'play-large', 'play', 'progress', 'current-time',
-        'mute', 'volume', 'captions', 'settings', 'pip',
-        'airplay', 'fullscreen',
+        'duration', 'mute', 'volume', 'captions', 'settings',
+        'pip', 'airplay', 'fullscreen'
       ];
       if (this.download) controls.push('download');
       this.player = new Plyr(this.$refs.player, {
@@ -186,13 +186,15 @@ export default {
       box-shadow: var(--elevation-10);
     }
 
-    .plyr__controls .plyr__control {
+    .plyr__controls > .plyr__control,
+    .plyr__controls > .plyr__controls__item > .plyr__control {
       padding: var(--plyr-controls-icon-padding);
+    }
 
-      svg {
-        height: var(--plyr-controls-icon-size);
-        width: var(--plyr-controls-icon-size);
-      }
+    .plyr__controls > .plyr__control > svg,
+    .plyr__controls > .plyr__controls__item > .plyr__control > svg {
+      height: var(--plyr-controls-icon-size);
+      width: var(--plyr-controls-icon-size);
     }
 
     .plyr__control--overlaid svg {

package/src/locale/en/en.js

@@ -344,6 +344,7 @@ export default {
         score: 'Score',
       },
       clearSelection: 'Clear selection',
+      scoreInputTooltip: 'Value should be more than {min} and less than {max}',
     },
     deleteConfirmationPopup: {
       title: 'Confirm deletion',

package/src/locale/ru/ru.js

@@ -342,6 +342,7 @@ export default {
         score: 'Бал',
       },
       clearSelection: 'Очистить выбор',
+      scoreInputTooltip: 'Значение должно быть не меньше {min} и не больше {max}',
     },
     deleteConfirmationPopup: {
       title: 'Подтвердите удаление',

package/src/locale/ua/ua.js

@@ -342,6 +342,7 @@ export default {
         score: 'Бал',
       },
       clearSelection: 'Очистити вибір',
+      scoreInputTooltip: 'Значення повинно бути не менше {min} та не більше {max}',
     },
     deleteConfirmationPopup: {
       title: 'Підтвердіть видалення',

package/src/modules/AuditForm/components/questions/options/__tests__/audit-form-question-options-write-row.spec.js

@@ -16,7 +16,7 @@ describe('AuditFormQuestionOptionsWriteRow', () => {
         option: {},
       },
     });
-    const deleteBtn = wrapper.findComponent({ name: 'wt-icon-btn' });
+    const deleteBtn = wrapper.findComponent('.audit-form-question-options-write-row__tooltip .wt-icon-btn');
     expect(deleteBtn.attributes().icon).toBe('bucket');
     deleteBtn.vm.$emit('click');
     expect(wrapper.emitted().delete).toBeTruthy();

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

@@ -9,10 +9,13 @@
     />
     <wt-input
       :label="$t('webitelUI.auditForm.score', 1)"
+      :label-props="{ hint: $t('scorecards.scoreInputTooltip', { min: minScore, max: maxScore}), hintPosition: 'right' }"
       :value="option.score"
       :v="v$.option.score"
+      :number-min="minScore"
+      :number-max="maxScore"
       type="number"
-      @input="emit('update:option', { name: option.name, score: $event })"
+      @input="changeScore"
     />
     <wt-tooltip class="audit-form-question-options-write-row__tooltip">
       <template #activator>
@@ -55,6 +58,9 @@ const emit = defineEmits([
 // is needed for useVuelidate, because props.question/props.result isn't reactive
 const { option } = toRefs(props);
 
+const minScore = 0;
+const maxScore = 10;
+
 const v$ = useVuelidate(
   computed(() => (
     {
@@ -62,8 +68,8 @@ const v$ = useVuelidate(
         name: { required },
         score: {
           required,
-          minValue: minValue(0),
-          maxValue: maxValue(10),
+          minValue: minValue(minScore),
+          maxValue: maxValue(maxScore),
           decimalValidator: decimalValidator(2),
         },
       },
@@ -72,6 +78,12 @@ const v$ = useVuelidate(
   { $autoDirty: true },
 );
 
+
+function changeScore(value) {
+  const score = value > maxScore ? maxScore : Number(Math.abs(value)); // to prevent -1, 000 or string value because of this task https://webitel.atlassian.net/browse/WTEL-4505
+  emit('update:option', { name: props.option.name, score });
+}
+
 // init validation
 onMounted(() => v$.value.$touch());
 </script>

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

@@ -8,8 +8,9 @@
         :value="question.min"
         :v="v$.question.min"
         :number-min="0"
-        :number-max="19"
+        :number-max="9"
         :label="$t('reusable.from')"
+        :label-props="{ hint: $t('scorecards.scoreInputTooltip', { min: '0', max: '9'}), hintPosition: 'right' }"
         type="number"
         required
         @input="updateQuestion({ path: 'min', value: $event })"
@@ -18,8 +19,9 @@
         :value="question.max"
         :v="v$.question.max"
         :number-min="1"
-        :number-max="20"
+        :number-max="10"
         :label="$t('reusable.to')"
+        :label-props="{ hint: $t('scorecards.scoreInputTooltip', { min: '1', max: '10'}), hintPosition: 'right' }"
         type="number"
         required
         @input="updateQuestion({ path: 'max', value: $event })"
@@ -109,7 +111,8 @@ const scoreRange = computed(() => {
 const isResult = computed(() => !isEmpty(props.result));
 
 function updateQuestion({ path, value }) {
-  emit('change:question', updateObject({ obj: props.question, path, value }));
+  const number = value > 10 ? 10 : Number(Math.abs(value)); // to prevent -1, 000 or string value because of this task https://webitel.atlassian.net/browse/WTEL-4505
+  emit('change:question', updateObject({ obj: props.question, path, value: number }));
 }
 
 // init validation