@webitel/ui-datalist 1.1.4 → 1.1.6

package/src/modules/filters/modules/filterConfig/components/_custom/type-extension-filter-value-field.vue

@@ -45,8 +45,8 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import {
-  WtSelect,
-  WtTypeExtensionValueInput,
+	WtSelect,
+	WtTypeExtensionValueInput,
 } from '@webitel/ui-sdk/components';
 import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums'; // DO NOT REMOVE THIS IMPORT!! : Webstorm lies you, import is used for dynamic slot computation
 import { computed, useAttrs, watch } from 'vue';
@@ -58,31 +58,39 @@ import { ITypeExtensionFilterConfig } from './index';
 const model = defineModel<unknown>();
 
 const props = defineProps<{
-  filterConfig: ITypeExtensionFilterConfig;
+	filterConfig: ITypeExtensionFilterConfig;
 }>();
 
 const emit = defineEmits<{
-  'update:invalid': [boolean];
+	'update:invalid': [
+		boolean,
+	];
 }>();
 
 const attrs = useAttrs();
 
 const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      required,
-    },
-  })),
-  { model },
-  { $autoDirty: true },
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
 );
 
 watch(
-  () => v$.value.$invalid,
-  (invalid) => {
-    emit('update:invalid', invalid);
-  },
-  { immediate: true },
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
 );
 </script>
 

package/src/modules/filters/modules/filterConfig/components/_custom/type-extension-filter-value-preview.vue

@@ -32,16 +32,16 @@ import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-fi
 import { ITypeExtensionFilterConfig } from './index';
 
 const props = defineProps<
-  DynamicFilterPreviewComponentProps & {
-    filterConfig: ITypeExtensionFilterConfig;
-  }
+	DynamicFilterPreviewComponentProps & {
+		filterConfig: ITypeExtensionFilterConfig;
+	}
 >();
 
 const showLookupValuePreview = computed(() => {
-  return [
-    WtTypeExtensionFieldKind.Multiselect,
-    WtTypeExtensionFieldKind.Select,
-  ].includes(props.filterConfig.field.kind);
+	return [
+		WtTypeExtensionFieldKind.Multiselect,
+		WtTypeExtensionFieldKind.Select,
+	].includes(props.filterConfig.field.kind);
 });
 </script>
 

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-filter-value-field.vue

@@ -24,24 +24,27 @@ import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 type ModelValue = {
-  from: number;
-  to: number;
+	from: number;
+	to: number;
 };
 
 const model = defineModel<ModelValue>();
 const { t } = useI18n();
 
 const handleInput = (key: keyof ModelValue, value: number) => {
-  model.value = { ...model.value, [key]: value };
+	model.value = {
+		...model.value,
+		[key]: value,
+	};
 };
 
 const initModel = () => {
-  if (!model.value) {
-    model.value = {
-      from: startOfToday().getTime(),
-      to: endOfToday().getTime(),
-    };
-  }
+	if (!model.value) {
+		model.value = {
+			from: startOfToday().getTime(),
+			to: endOfToday().getTime(),
+		};
+	}
 };
 
 onMounted(() => initModel());

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-filter-value-preview.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { formatDate } from '@webitel/ui-sdk/utils';
 import { FormatDateMode } from '@webitel/ui-sdk/enums';
+import { formatDate } from '@webitel/ui-sdk/utils';
+import { ref } from 'vue';
 
 const props = defineProps<{
-  value: number[];
+	value: number[];
 }>();
 
 const date = ref(formatDate(+props.value, FormatDateMode.DATETIME));

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-options/date-time-options-filter-value-field.vue

@@ -33,59 +33,66 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const model = defineModel<
-  RelativeDatetimeValue | { from: number; to: number }
+	| RelativeDatetimeValue
+	| {
+			from: number;
+			to: number;
+	  }
 >();
 
 const { t } = useI18n();
 
 const radioOpts = [
-  RelativeDatetimeValue.Today,
-  RelativeDatetimeValue.ThisWeek,
-  RelativeDatetimeValue.ThisMonth,
-  RelativeDatetimeValue.Custom,
+	RelativeDatetimeValue.Today,
+	RelativeDatetimeValue.ThisWeek,
+	RelativeDatetimeValue.ThisMonth,
+	RelativeDatetimeValue.Custom,
 ];
 
 const selectedRadioValue = ref();
 
 const initialize = () => {
-  if (!model.value) {
-    /* initialize */
-    selectedRadioValue.value = radioOpts[0];
-    model.value = selectedRadioValue.value;
-  } else if (typeof model.value === 'string') {
-    /* RelativeDatetimeValue */
-    selectedRadioValue.value = model.value;
-  } else {
-    /* { from, to } */
-    selectedRadioValue.value = RelativeDatetimeValue.Custom;
-  }
+	if (!model.value) {
+		/* initialize */
+		selectedRadioValue.value = radioOpts[0];
+		model.value = selectedRadioValue.value;
+	} else if (typeof model.value === 'string') {
+		/* RelativeDatetimeValue */
+		selectedRadioValue.value = model.value;
+	} else {
+		/* { from, to } */
+		selectedRadioValue.value = RelativeDatetimeValue.Custom;
+	}
 };
 
 initialize();
 
 const showDatepickers = computed(() => {
-  return selectedRadioValue.value === RelativeDatetimeValue.Custom;
+	return selectedRadioValue.value === RelativeDatetimeValue.Custom;
 });
 
 const handleRadioChange = (value: RelativeDatetimeValue) => {
-  selectedRadioValue.value = value;
-  if (value === RelativeDatetimeValue.Custom) {
-    model.value = {
-      from: startOfToday().getTime(),
-      to: endOfToday().getTime(),
-    };
-  } else {
-    model.value = value;
-  }
+	selectedRadioValue.value = value;
+	if (value === RelativeDatetimeValue.Custom) {
+		model.value = {
+			from: startOfToday().getTime(),
+			to: endOfToday().getTime(),
+		};
+	} else {
+		model.value = value;
+	}
 };
 
 const changeAbsoluteValue = (value: number, prop: 'from' | 'to') => {
-  const newModelValue = {
-    ...(model.value as { from: number; to: number }),
-    [prop]: value,
-  };
+	const newModelValue = {
+		...(model.value as {
+			from: number;
+			to: number;
+		}),
+		[prop]: value,
+	};
 
-  model.value = newModelValue;
+	model.value = newModelValue;
 };
 </script>
 

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-options/date-time-options-filter-value-preview.vue

@@ -25,32 +25,37 @@
 </template>
 
 <script lang="ts" setup>
-import { RelativeDatetimeValue, FormatDateMode } from '@webitel/ui-sdk/enums';
+import { FormatDateMode, RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
 import { isRelativeDatetimeValue } from '@webitel/ui-sdk/scripts';
 import { formatDate } from '@webitel/ui-sdk/utils';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-  value: { from: number; to: number } | RelativeDatetimeValue;
+	value:
+		| {
+				from: number;
+				to: number;
+		  }
+		| RelativeDatetimeValue;
 }>();
 
 const { t } = useI18n();
 
 const isRelativeValue = computed(() => {
-  return isRelativeDatetimeValue(props.value);
+	return isRelativeDatetimeValue(props.value);
 });
 
 const from = computed(() => {
-  return isRelativeDatetimeValue.value
-    ? false
-    : formatDate(props.value.from, FormatDateMode.DATETIME);
+	return isRelativeDatetimeValue.value
+		? false
+		: formatDate(props.value.from, FormatDateMode.DATETIME);
 });
 
 const to = computed(() => {
-  return isRelativeDatetimeValue.value
-    ? false
-    : formatDate(props.value.to, FormatDateMode.DATETIME);
+	return isRelativeDatetimeValue.value
+		? false
+		: formatDate(props.value.to, FormatDateMode.DATETIME);
 });
 </script>
 

package/src/modules/filters/modules/filterConfig/components/_shared/has-options/has-option-filter-value-field.vue

@@ -19,7 +19,7 @@ import { useI18n } from 'vue-i18n';
 import { BooleanOptions } from '../../../enums/options/BooleanFilterOptions';
 
 const props = defineProps<{
-  hideLabel?: boolean;
+	hideLabel?: boolean;
 }>();
 
 const model = defineModel<boolean | null>();
@@ -28,15 +28,17 @@ const attrs = useAttrs();
 
 const { t } = useI18n();
 
-const labelValue = computed(() => props?.hideLabel ? null : t('webitelUI.filters.filterValue'))
+const labelValue = computed(() =>
+	props?.hideLabel ? null : t('webitelUI.filters.filterValue'),
+);
 
 const strModel = computed({
-  get: () => {
-    return typeof model.value === 'boolean' ? String(model.value) : model.value;
-  },
-  set: (value: string) => {
-    model.value = typeof value === 'string' ? value === 'true' : value;
-  },
+	get: () => {
+		return typeof model.value === 'boolean' ? String(model.value) : model.value;
+	},
+	set: (value: string) => {
+		model.value = typeof value === 'string' ? value === 'true' : value;
+	},
 });
 </script>
 

package/src/modules/filters/modules/filterConfig/components/_shared/has-options/has-option-filter-value-preview.vue

@@ -6,7 +6,7 @@
 import { usePrettifyBooleanValuePreview } from '../../../composables/booleanFilterToolkit';
 
 const props = defineProps<{
-  value: boolean;
+	value: boolean;
 }>();
 
 const { localeValue } = usePrettifyBooleanValuePreview(props.value);

package/src/modules/filters/modules/filterConfig/components/_shared/lookup-filter-preview/lookup-filter-value-preview.vue

@@ -11,10 +11,10 @@
 
 <script lang="ts" setup>
 defineProps<{
-  /**
-   * would be great to use a type for this
-   * */
-  value: Record<string, unknown>[];
+	/**
+	 * would be great to use a type for this
+	 * */
+	value: Record<string, unknown>[];
 }>();
 </script>
 

package/src/modules/filters/modules/filterConfig/components/agent/agent-filter-value-field.vue

@@ -25,33 +25,41 @@ type ModelValue = number[];
 const model = defineModel<ModelValue>();
 
 const emit = defineEmits<{
-  'update:invalid': [boolean];
+	'update:invalid': [
+		boolean,
+	];
 }>();
 
 const { t } = useI18n();
 
 const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      required,
-    },
-  })),
-  { model },
-  { $autoDirty: true },
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
 );
 
 v$.value.$touch();
 
 watch(
-  () => v$.value.$invalid,
-  (invalid) => {
-    emit('update:invalid', invalid);
-  },
-  { immediate: true },
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
 );
 
 const handleInput = (value: ModelValue) => {
-  model.value = value;
+	model.value = value;
 };
 </script>
 

package/src/modules/filters/modules/filterConfig/components/agent/agent-filter-value-preview.vue

@@ -8,7 +8,7 @@ import type { EngineAgent } from 'webitel-sdk';
 import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: EngineAgent[];
+	value: EngineAgent[];
 }>();
 </script>
 

package/src/modules/filters/modules/filterConfig/components/agent-status/agent-status-filter-value-field.vue

@@ -18,50 +18,63 @@ import { required } from '@vuelidate/validators';
 import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-
-import { useAgentStatusOptions } from '../../composables/useAgentStatusOptions';
 import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { useAgentStatusOptions } from '../../composables/useAgentStatusOptions';
 
 const model = defineModel<string>();
 const { t } = useI18n();
 
 const props = defineProps<{
-  filterConfig?: WtSysTypeFilterConfig,
-  disableValidation?: boolean;
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
 }>();
 
 const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      required,
-    },
-  })),
-  { model },
-  { $autoDirty: true },
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
 );
 
 v$.value.$touch();
 
 const emit = defineEmits<{
-  'update:invalid': [boolean];
+	'update:invalid': [
+		boolean,
+	];
 }>();
 
 const labelValue = computed(() =>
-  t(`webitelUI.filters.${props?.filterConfig?.showFilterName ?
-    props?.filterConfig.name : 'filterValue'}`));
+	t(
+		`webitelUI.filters.${
+			props?.filterConfig?.showFilterName
+				? props?.filterConfig.name
+				: 'filterValue'
+		}`,
+	),
+);
 
 const { options } = useAgentStatusOptions();
 
 onMounted(() => {
-  if (!props?.disableValidation) v$.value.$touch();
+	if (!props?.disableValidation) v$.value.$touch();
 });
 
 watch(
-  () => v$.value.$invalid,
-  (invalid) => {
-    emit('update:invalid', invalid);
-  },
-  { immediate: true },
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
 );
 </script>
 

package/src/modules/filters/modules/filterConfig/components/agent-status/agent-status-filter-value-preview.vue

@@ -10,26 +10,25 @@
 </template>
 
 <script lang="ts" setup>
-import { useAgentStatusOptions } from '../../composables/useAgentStatusOptions';
 import { computed } from 'vue';
+import { useAgentStatusOptions } from '../../composables/useAgentStatusOptions';
 
 const props = defineProps<{
-  value: number[];
+	value: number[];
 }>();
 
 const { options } = useAgentStatusOptions();
 
 const arrayLabels = computed(() =>
-  options.value.reduce((acc, { value, label }) => {
-    acc[value] = label;
-    return acc;
-  }, {})
+	options.value.reduce((acc, { value, label }) => {
+		acc[value] = label;
+		return acc;
+	}, {}),
 );
 
 const arrayValues = computed(() =>
-  props.value.map((v) => arrayLabels.value[v] || v)
+	props.value.map((v) => arrayLabels.value[v] || v),
 );
-
 </script>
 
 <style scoped></style>

package/src/modules/filters/modules/filterConfig/components/amd-result/amd-result-filter-value-field.vue

@@ -25,27 +25,35 @@ const model = defineModel<string>();
 const { t } = useI18n();
 
 const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      required,
-    },
-  })),
-  { model },
-  { $autoDirty: true },
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
 );
 
 v$.value.$touch();
 
 const emit = defineEmits<{
-  'update:invalid': [boolean];
+	'update:invalid': [
+		boolean,
+	];
 }>();
 
 watch(
-  () => v$.value.$invalid,
-  (invalid) => {
-    emit('update:invalid', invalid);
-  },
-  { immediate: true },
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
 );
 </script>
 

package/src/modules/filters/modules/filterConfig/components/amd-result/amd-result-filter-value-preview.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 const props = defineProps<{
-  value: number[];
+	value: number[];
 }>();
 </script>
 

package/src/modules/filters/modules/filterConfig/components/auditor/auditor-filter-value-field.vue

@@ -23,46 +23,60 @@ import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 type ModelValue = number[];
 
 const props = defineProps<{
-  filterConfig: WtSysTypeFilterConfig;
-  disableValidation?: boolean;
+	filterConfig: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
 }>();
 
 const model = defineModel<ModelValue>();
 
 const emit = defineEmits<{
-  'update:invalid': [boolean];
+	'update:invalid': [
+		boolean,
+	];
 }>();
 const { t } = useI18n();
 
 const labelValue = computed(() =>
-  t(`webitelUI.filters.${props?.filterConfig?.showFilterName ?
-    props?.filterConfig.name : 'filterValue'}`))
+	t(
+		`webitelUI.filters.${
+			props?.filterConfig?.showFilterName
+				? props?.filterConfig.name
+				: 'filterValue'
+		}`,
+	),
+);
 
 const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      required,
-    },
-  })),
-  { model },
-  { $autoDirty: true },
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
 );
 v$.value.$touch();
 
 onMounted(() => {
-  if (!props?.disableValidation) v$.value.$touch();
+	if (!props?.disableValidation) v$.value.$touch();
 });
 
 watch(
-  () => v$.value.$invalid,
-  (invalid) => {
-    emit('update:invalid', invalid);
-  },
-  { immediate: true },
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
 );
 
 const handleInput = (value: ModelValue) => {
-  model.value = value;
+	model.value = value;
 };
 </script>