@webitel/ui-sdk 24.12.159 → 24.12.161

package/package.json

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

package/src/components/wt-tree-table/wt-tree-table.vue

@@ -17,7 +17,10 @@
             @click="sort(col)"
           >
             <div class="wt-tree-table-th__content">
-              <div v-if="key === 0 && selectable">
+              <div
+                v-if="key === 0 && selectable"
+                @click.stop
+              >
                 <wt-checkbox
                   :selected="isAllSelected"
                   @change="selectAll"
@@ -90,10 +93,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue';
+import {computed, withDefaults} from 'vue';
 
 import { useWtTable } from '../../composables/useWtTable/useWtTable';
 import { getNextSortOrder } from '../../scripts/sortQueryAdapters';
+import { WtCheckbox } from '../index';
 import type { WtTableHeader } from '../wt-table/types/WtTable.d.ts';
 import WtTreeTableRow from '../wt-tree-table-row/wt-tree-table-row.vue';
 

package/src/modules/Filters/v2/filters/components/config/dynamic-filter-config-form.vue

@@ -2,7 +2,6 @@
   <form class="dynamic-filter-config-form">
     <wt-select
       :clearable="false"
-      :disabled="editMode"
       :label="t('webitelUI.filters.filterName')"
       :options="options"
       :value="filterName"
@@ -86,8 +85,6 @@ const filterName = ref();
 const filterLabel = ref('');
 const filterValue = ref();
 
-const editMode = !!props.filter;
-
 const invalid = ref(false);
 
 const onLabelValueUpdate = (val: string) => {

package/src/modules/Filters/v2/filters/components/values/_shared/durations/duration-filter-value-field.vue

@@ -4,6 +4,7 @@
       v-if="model"
       :label="t('reusable.from')"
       :value="model.from"
+      :v="v$.model?.from"
       format="mm:ss"
       @input="handleInput('from', $event)"
     />
@@ -11,6 +12,7 @@
       v-if="model"
       :label="t('reusable.to')"
       :value="model.to"
+      :v="v$.model?.to"
       format="mm:ss"
       @input="handleInput('to', $event)"
     />
@@ -18,9 +20,11 @@
 </template>
 
 <script lang="ts" setup>
-import {useI18n} from "vue-i18n";
+import { useVuelidate } from '@vuelidate/core';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-const {t} = useI18n();
+const { t } = useI18n();
 
 type ModelValue = {
   from: number;
@@ -29,6 +33,10 @@ type ModelValue = {
 
 const model = defineModel<ModelValue>();
 
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
 if (!model.value) {
   model.value = {
     from: 0,
@@ -36,11 +44,39 @@ if (!model.value) {
   };
 }
 
+const isValueEmpty = () => {
+  return !!model?.value?.to || !!model?.value?.from;
+};
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      from: {
+        required: isValueEmpty,
+      },
+      to: {
+        required: isValueEmpty,
+      },
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
 const handleInput = (key: keyof ModelValue, value: number) => {
   const newValue = { ...model.value };
   newValue[key] = value;
   model.value = newValue;
 };
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
 </script>
 
 <style lang="scss" scoped>

package/src/modules/Filters/v2/filters/components/values/rating/rating-from-to-filter-value-field.vue

@@ -2,7 +2,7 @@
   <div class="rating-from-to-filter-value-field">
     <wt-input
       v-if="model"
-      :label="`${t('webitelUI.filters.filterValueFrom')}:`"
+      :label="`${t('reusable.from')}:`"
       :number-min="0"
       :placeholder="t('webitelUI.filters.filterValue')"
       :v="v$.model?.from"
@@ -14,7 +14,7 @@
 
     <wt-input
       v-if="model"
-      :label="`${t('reusable.to').toLowerCase()}:`"
+      :label="`${t('reusable.to')}:`"
       :number-min="0"
       :placeholder="t('webitelUI.filters.filterValue')"
       :v="v$.model?.to"

package/src/modules/Filters/v2/filters/components/values/talk-duration/talk-duration-filter-value-field.vue

@@ -2,14 +2,18 @@
   <duration-filter-value-field
     :model-value="model"
     @update:model-value="model = $event"
+    @update:invalid="emit('update:invalid', $event)"
   />
 </template>
 
 <script lang="ts" setup>
 import DurationFilterValueField from '../_shared/durations/duration-filter-value-field.vue';
-import type {TalkDurationFilterModelValue} from "./TalkDurationFilter.d.ts";
+import type { TalkDurationFilterModelValue } from './TalkDurationFilter.d.ts';
 
 const model = defineModel<TalkDurationFilterModelValue>();
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
 </script>
 
 <style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/total-duration/total-duration-filter-value-field.vue

@@ -2,15 +2,18 @@
   <duration-filter-value-field
     :model-value="model"
     @update:model-value="model = $event"
+    @update:invalid="emit('update:invalid', $event)"
   />
 </template>
 
 <script lang="ts" setup>
 import DurationFilterValueField from '../_shared/durations/duration-filter-value-field.vue';
-import type {TotalDurationFilterModelValue} from "./TotalDurationFilter";
-
+import type { TotalDurationFilterModelValue } from './TotalDurationFilter';
 
 const model = defineModel<TotalDurationFilterModelValue>();
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
 </script>
 
 <style lang="scss" scoped></style>