@webitel/ui-sdk 25.6.38 → 25.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.6.38",
+  "version": "25.8.1",
   "private": false,
   "scripts": {
     "dev": "npm run docs:dev",
@@ -129,6 +129,7 @@
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.22.0",
+    "@regle/core": "^1.3.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-vue": "^10.0.0",

package/src/api/clients/caseSources/caseSources.ts

@@ -69,7 +69,7 @@ const getSource = async ({ itemId: id }) => {
 
 const addSource = async ({ itemInstance }) => {
   const item = applyTransform(itemInstance, [
-    sanitize(getFieldsToSendFromZodSchema(createSourceBody)),
+    sanitize(getShallowFieldsToSendFromZodSchema(createSourceBody)),
     camelToSnake(),
   ]);
   try {
@@ -83,7 +83,7 @@ const addSource = async ({ itemInstance }) => {
 const updateSource = async ({ itemInstance, itemId: id }) => {
   const item = applyTransform(itemInstance, [
     camelToSnake(),
-    sanitize(updateSourceBody),
+    sanitize(getShallowFieldsToSendFromZodSchema(updateSourceBody)),
   ]);
 
   try {

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

@@ -89,7 +89,7 @@ import '@vuepic/vue-datepicker/dist/main.css';
 import VueDatepicker from '@vuepic/vue-datepicker';
 import { computed, ref, toRefs } from 'vue';
 
-import { useValidation } from '../../mixins/validationMixin/useValidation.js';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
 import WtInputInfo from '../wt-input-info/wt-input-info.vue';
 
 const props = defineProps({

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

@@ -43,7 +43,7 @@
         ref="AfterWrapper"
         class="wt-input__after-wrapper"
       >
-        <slot name="after-input" />
+        <slot name="after-input"/>
         <slot
           v-if="isPassword"
           name="show-password"
@@ -69,121 +69,64 @@
   </div>
 </template>
 
-<script setup>
-import { computed, onMounted, ref, toRefs, useSlots } from 'vue';
+<script lang="ts" setup>
+import type {RegleFieldStatus} from '@regle/core';
+import {computed, onMounted, ref, toRefs, useSlots} from 'vue';
 
-import { useValidation } from '../../mixins/validationMixin/useValidation.js';
+import {
+  useValidation
+} from '../../mixins/validationMixin/useValidation';
 
 /*
  * IMPORTANT: WT-INPUT SHOULD SUPPORT VUE 3 AND VUE 2 V-MODEL INTERFACES SO THAT THERE'S
  * TWO PROPS: VALUE AND MODELVALUE, AND 2 EVENTS: @UPDATE:MODELVALUE AND @INPUT
  * */
-const props = defineProps({
-  value: {
-    type: [String, Number],
-  },
-  /**
-   * Current input modelValue (`v-model`)
-   */
-  modelValue: {
-    type: [String, Number],
-  },
-  /**
-   * Form input label
-   */
-  label: {
-    type: String,
-    default: '',
-  },
-  /**
-   * Form input placeholder
-   */
-  placeholder: {
-    type: String,
-  },
-  /**
-   * Form input name
-   */
-  name: {
-    type: String,
-    default: '',
-  },
-  /**
-   * Form input type
-   */
-  type: {
-    type: String,
-    default: 'text',
-  },
-  /**
-   * Native input required attribute
-   */
-  required: {
-    type: Boolean,
-    default: false,
-    description: 'Native input required attribute',
-  },
-  /**
-   * Native input disabled attribute
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-    description: 'Native input disabled attribute',
-  },
-  /**
-   * Status of show password icon display
-   */
-  hasShowPassword: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Native number input restrictions
-   */
-  numberMin: {
-    type: Number,
-    default: 0,
-  },
-
-  /**
-   * Native number input restrictions
-   */
-  numberMax: {
-    type: Number,
-  },
-
-  labelProps: {
-    type: Object,
-    description: 'Object with props, passed down to wt-label as props',
-  },
-
-  preventTrim: {
-    type: Boolean,
-    default: false,
-  },
-
-  // validation rules
-  // TODO: move to separate file to make it reusable
-  v: {
-    type: Object,
-  },
-  customValidators: {
-    type: Array,
-    default: () => [],
-  },
+const props = withDefaults(defineProps<{
+  value?: string | number;
+  modelValue?: string | number;
+  label?: string;
+  placeholder?: string;
+  name?: string;
+  type?: string;
+  required?: boolean;
+  disabled?: boolean;
+  hasShowPassword?: boolean;
+  numberMin?: number;
+  numberMax?: number;
+  labelProps?: Record<string, unknown>;
+  preventTrim?: boolean;
+  v?: Record<string, unknown>;
+  regleValidation?: RegleFieldStatus<string>;
+  customValidators?: unknown[];
+}>(), {
+  label: '',
+  name: '',
+  type: 'text',
+  required: false,
+  disabled: false,
+  hasShowPassword: false,
+  numberMin: 0,
+  preventTrim: false,
+  v: null,
+  regleValidation: null,
+  customValidators: () => [],
 });
+
 const emit = defineEmits(['update:modelValue', 'input', 'keyup']);
 
 const slots = useSlots();
 
 // https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3
-const { v, customValidators } = toRefs(props);
+const {v, customValidators, regleValidation } = toRefs(props);
 
-const { isValidation, invalid, validationText } = useValidation({
+const {
+  isValidation,
+  invalid,
+  validationText,
+} = useValidation({
   v,
   customValidators,
+  regleValidation,
 });
 
 // toggles password <-> text at showPassword

package/src/components/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { ref } from 'vue';
 
-import { useValidation } from '../../../mixins/validationMixin/useValidation.js';
+import { useValidation } from '../../../mixins/validationMixin/useValidation';
 import WtSearchBar from '../wt-search-bar.vue';
 
 vi.mock('../../../mixins/validationMixin/useValidation');

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -81,7 +81,7 @@
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue';
 
-import { useValidation } from '../../mixins/validationMixin/useValidation.js';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
 import debounce from '../../scripts/debounce.js';
 
 const props = defineProps({

package/src/components/wt-select/mixins/multiselectMixin.js

@@ -7,7 +7,7 @@ import isEmpty from '../../../scripts/isEmpty.js';
 import labelUsageMixin from '../../wt-label/mixins/labelUsageMixin.js';
 
 export default {
-  mixins: [validationMixin, labelUsageMixin],
+  mixins: [labelUsageMixin],
   directives: { ObserveVisibility },
   components: {
     VueMultiselect,

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

@@ -167,6 +167,8 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
 import isEmpty from '../../scripts/isEmpty.js';
 import taggableMixin from '../wt-tags-input/mixin/taggableMixin.js';
 import multiselectMixin from './mixins/multiselectMixin.js';
@@ -213,6 +215,14 @@ export default {
       default: false,
       description: 'See wt-tags-input "manualTagging" prop.',
     },
+    v: {
+      type: Object,
+      default: null,
+    },
+    regleValidation: {
+      type: Object,
+      default: null,
+    },
   },
   emits: [
     'reset',
@@ -222,6 +232,25 @@ export default {
     'closed',
     'custom-value', // fires when allowCustomValues and new customValue is added
   ],
+  setup: (props/*, ctx*/) => {
+    // https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3
+    const {v, customValidators, regleValidation } = toRefs(props);
+    const {
+      isValidation,
+      invalid,
+      validationText,
+    } = useValidation({
+      v,
+      customValidators,
+      regleValidation,
+    });
+
+    return {
+      isValidation,
+      invalid,
+      validationText,
+    };
+  },
   data: () => ({
     isOpened: false,
     items: [],

package/src/components/wt-tags-input/wt-tags-input.vue

@@ -103,6 +103,7 @@
 
 <script>
 import deepEqual from 'deep-equal';
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 import multiselectMixin from '../wt-select/mixins/multiselectMixin.js';
 import taggableMixin from './mixin/taggableMixin.js';
@@ -110,6 +111,7 @@ import taggableMixin from './mixin/taggableMixin.js';
 export default {
   name: 'WtTagsInput',
   mixins: [
+    validationMixin,
     multiselectMixin,
     // taggableMixin is used to add custom select values, see [https://my.webitel.com/browse/WTEL-3181
     taggableMixin,

package/src/locale/en/en.js

@@ -353,7 +353,14 @@ export default {
     maxLength: 'The length should not be greater than',
     sameAs: 'Incorrect password',
     requiredArrayValue: 'Array should not be empty',
-    minLength: 'Quantity of characters should not be less than',
+    minLength: ({ named }) => {
+      let text = 'The length should not be less than';
+      if (named('min')) {
+        text += ` ${named('min')}`;
+      }
+
+      return text;
+    },
     url: 'Should look like URL',
     websocketValidator: 'Should look like WebSocket url',
     isRegExpMatched: 'Password must match the regular expression:',

package/src/mixins/validationMixin/regle/useRegleValidation.ts

@@ -0,0 +1,29 @@
+import type { RegleFieldStatus } from '@regle/core';
+import { computed, ComputedRef, Ref } from 'vue';
+
+export type UseFieldValidationParams = {
+  field: Ref<RegleFieldStatus<string>>;
+};
+
+export type UseFieldValidationReturn = {
+  invalid: ComputedRef<boolean | null>; // null if is not validated
+  validationText?: ComputedRef<string>;
+};
+
+export const useFieldValidation = ({
+  field: fieldRef,
+}: UseFieldValidationParams): UseFieldValidationReturn => {
+
+  const invalid = computed(() => {
+    return fieldRef.value.$error;
+  });
+
+  const validationText = computed(() => {
+    return fieldRef.value?.$errors?.at(0);
+  });
+
+  return {
+    invalid,
+    validationText,
+  };
+};

package/src/mixins/validationMixin/useValidation.ts

@@ -0,0 +1,59 @@
+import { computed } from 'vue';
+
+import {
+  useFieldValidation as useRegleFieldValidation,
+  UseFieldValidationParams as UseRegleFieldValidationParams,
+} from "./regle/useRegleValidation";
+import {
+  useFieldValidation as useVuelidateValidation,
+  UseFieldValidationParams as UseVuelidateFieldValidationParams,
+} from "./vuelidate/useVuelidateValidation";
+
+type CompatVuelidateParams = {
+  v: UseVuelidateFieldValidationParams['field'];
+};
+
+export const useValidation = ({
+  v: vuelidateValidation,
+  customValidators: inputCustomValidators, // vuelidate custom validations, compat
+  regleValidation,
+}: UseRegleFieldValidationParams | CompatVuelidateParams) => {
+
+  const {
+    isValidation: isVuelidateValidation,
+      invalid: vuelidateInvalid,
+      validationText: vuelidateValidationText,
+  } = useVuelidateValidation({
+    field: vuelidateValidation,
+    customValidators: inputCustomValidators,
+  });
+
+  const {
+    invalid: regleInvalid,
+      validationText: regleValidationText,
+  } = useRegleFieldValidation({
+    field: regleValidation,
+  });
+
+  const isRegleValidation = computed(() => {
+    return !!regleValidation?.value;
+  });
+
+  const isValidation = computed(() => {
+    return isRegleValidation.value || isVuelidateValidation.value;
+  });
+
+  const invalid = computed(() => {
+    return isRegleValidation.value ? regleInvalid.value : vuelidateInvalid.value;
+  });
+
+  const validationText = computed(() => {
+    return isRegleValidation.value ? regleValidationText.value : vuelidateValidationText.value;
+  });
+
+  return {
+    isValidation,
+    invalid,
+    validationText,
+  };
+};

package/src/mixins/validationMixin/{useValidation.js → vuelidate/useVuelidateValidation.ts}

@@ -1,10 +1,16 @@
-import { computed, isReactive } from 'vue';
+import {computed, isReactive, Ref} from 'vue';
 import { useI18n } from 'vue-i18n';
+import type { Validation } from '@vuelidate/core';
 
-export function useValidation({
-  v: inputV,
+export type UseFieldValidationParams = {
+  field: Ref<Validation>;
+  customValidators?: Array<object>;
+};
+
+export const useFieldValidation = ({
+  field: inputV,
   customValidators: inputCustomValidators,
-}) {
+}: UseFieldValidationParams) => {
   const { t } = useI18n();
 
   // support vue options api, where v is a reactive, not ref
@@ -82,4 +88,6 @@ export function useValidation({
     invalid,
     validationText,
   };
-}
+};
+
+export const useVuelidateFieldValidation = useFieldValidation;

package/src/modules/DeleteConfirmationPopup/__tests__/delete-confirmation-popup.spec.js

@@ -1,7 +1,7 @@
 import { mount, shallowMount } from '@vue/test-utils';
 import { ref } from 'vue';
 
-import { useValidation } from '../../../mixins/validationMixin/useValidation.js';
+import { useValidation } from '../../../mixins/validationMixin/useValidation';
 import DeleteConfirmationPopup from '../components/delete-confirmation-popup.vue';
 
 vi.mock('../../../mixins/validationMixin/useValidation.js');