@webitel/ui-sdk 26.8.21 → 26.8.22

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

@@ -27,7 +27,7 @@
       :placeholder="placeholder || label"
       :option-disabled="() => !!props.disabledOptions"
       :options="filteredOptions"
-      :option-label="(option) => getOptionLabel(option)"
+      :option-label="getOptionLabel"
       :option-value="optionValue"
       :max-selected-labels="MAX_SELECTED_LABELS"
       :selectedItemsLabel="`${model.length} ${t('webitelUI.select.selectedItemsLabel')}`"
@@ -56,7 +56,7 @@
             {{ value.length }} {{ t('webitelUI.select.selectedItemsLabel') }}
           </template>
           <template v-else>
-            {{ value.map((v) => getOptionLabel(v)).join(', ') }}
+            {{ value.map((v: SelectOption) => getOptionLabel(v)).join(', ') }}
           </template>
         </span>
         <span v-else class="p-placeholder">{{ placeholder }}&nbsp;</span>
@@ -133,14 +133,22 @@
 <script setup lang="ts">
 import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import type { SelectProps } from 'primevue';
-import { computed, onMounted, toRefs, useSlots, useTemplateRef } from 'vue';
+import { computed, toRefs, useSlots, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ChipColor, ComponentSize, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
+import type {
+	SelectOption,
+	SelectSearchMethod,
+} from '../_internals/composables/useSelect/types';
 import { useSelect } from '../_internals/composables/useSelect/useSelect';
 import { toArray } from '../_internals/composables/useSelect/useSelectUtils';
 
-interface Props extends SelectProps {
+interface Props extends Omit<SelectProps, 'options'> {
 	label?: string;
 	placeholder?: string;
 	required?: boolean;
@@ -161,7 +169,8 @@ interface Props extends SelectProps {
 	 * true shows the clear button
 	 */
 	showClear?: boolean;
-	options?: unknown[];
+	/** readonly so consumers can pass `as const` option lists */
+	options?: readonly unknown[];
 	optionLabel?: string;
 	optionValue?: string;
 	/**
@@ -171,7 +180,7 @@ interface Props extends SelectProps {
 	/**
 	 * Function that returns filtered options for server-side search
 	 */
-	searchMethod?: () => void;
+	searchMethod?: SelectSearchMethod;
 	/**
 	 * true allows adding custom values through the filter input
 	 */
@@ -182,9 +191,9 @@ interface Props extends SelectProps {
 	manualCustomValues?: boolean;
 	chipsView?: boolean;
 	labelProps?: object;
-	v?: Record<string, unknown>;
+	v?: VuelidateFieldLike;
 	regleValidation?: SuperCompatibleRegleFieldStatus;
-	customValidators?: unknown[];
+	customValidators?: CompatCustomValidator[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -197,7 +206,7 @@ const props = withDefaults(defineProps<Props>(), {
 	customValidators: () => [],
 });
 
-const model = defineModel({
+const model = defineModel<SelectOption>({
 	default: [],
 	get(value) {
 		return toArray(value);
@@ -227,7 +236,6 @@ const {
 	filterText,
 	filteredOptions,
 	getOptionLabel,
-	fetchOptions,
 	onDropdownBeforeShow,
 	onDropdownBeforeHide,
 	onDropdownShow,
@@ -237,12 +245,14 @@ const {
 	clearValue,
 } = useSelect({
 	selected: model,
-	options: computed(() => props.options),
+	options: computed(() => [
+		...props.options,
+	]),
 	optionLabel: computed(() => props.optionLabel),
 	optionValue: computed(() => props.optionValue),
 	dataKey: computed(() => props.dataKey),
 	allowCustomValues: computed(() => props.allowCustomValues),
-	manualCustomValues: computed(() => props.manualCustomValues),
+	manualCustomValues: props.manualCustomValues,
 	filterInput,
 	selectRef,
 	searchMethod: computed(() => props.searchMethod),

package/src/components/wt-navigation-bar/types/WtNavigationBar.ts

@@ -6,6 +6,7 @@ export interface WtNavigationBarRouteNavItem {
 	route: string;
 }
 
+/** both fields stay optional so the template can branch on them */
 export type WtNavigationBarNavItem = {
 	value: string;
 
@@ -14,4 +15,5 @@ export type WtNavigationBarNavItem = {
 	 * @default WtNavigationBarNavItem.value
 	 */
 	name?: string;
-} & (WtNavigationBarRouteNavItem | WtNavigationBarExpansionNavItem);
+} & Partial<WtNavigationBarRouteNavItem> &
+	Partial<WtNavigationBarExpansionNavItem>;

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

@@ -22,7 +22,7 @@
           >
             <img
               :alt="currentApp"
-              :src="darkMode ? appLogo[currentApp].dark : appLogo[currentApp].light
+              :src="darkMode ? appLogo[currentApp]?.dark : appLogo[currentApp]?.light
                 "
               class="wt-navigation-bar__app-pic"
             />
@@ -47,7 +47,7 @@
                     'wt-navigation-bar__nav-item-link--active':
                       currentNav.nav === navItem.value,
                   }"
-                  :to="navItem.route"
+                  :to="navItem.route ?? ''"
                   class="wt-navigation-bar__nav-item-link typo-body-1"
                   @click="close"
                 >
@@ -89,7 +89,7 @@
                           'wt-navigation-bar__nav-item-link--active':
                             currentNav.nav === subNavItem.value,
                         }"
-                        :to="nestedRoute(subNavItem, navItem)"
+                        :to="nestedRoute(subNavItem, navItem) ?? ''"
                         class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
                         @click="close"
                       >
@@ -108,6 +108,7 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue';
 import { WtApplication } from '../../enums';
 import ExpandTransition from '../transitions/wt-expand-transition.vue';
 import AdminDark from './assets/dark/app-logo-dark-admin.svg';
@@ -124,9 +125,18 @@ import HistoryLight from './assets/light/app-logo-light-history.svg';
 import SupervisorLight from './assets/light/app-logo-light-supervisor.svg';
 import WfmLight from './assets/light/app-logo-light-wfm.svg';
 import WorkspaceLight from './assets/light/app-logo-light-workspace.svg';
-import { WtNavigationBarNavItem } from './types/WtNavigationBar';
+import type { WtNavigationBarNavItem } from './types/WtNavigationBar';
 
-const appLogo = {
+/** partial: `Analytics` and `Meet` ship no logo */
+const appLogo: Partial<
+	Record<
+		WtApplication,
+		{
+			dark: string;
+			light: string;
+		}
+	>
+> = {
 	[WtApplication.Supervisor]: {
 		dark: SupervisorDark,
 		light: SupervisorLight,
@@ -169,8 +179,8 @@ export default {
 		 * @default 'admin'
 		 */
 		currentApp: {
-			type: String,
-			default: 'admin',
+			type: String as PropType<WtApplication>,
+			default: WtApplication.Admin,
 		},
 		/**
 		 * Should receive array of nav objects. All objects should have following properties:
@@ -182,7 +192,7 @@ export default {
 		 * @default []
 		 */
 		nav: {
-			type: Array,
+			type: Array as PropType<WtNavigationBarNavItem[]>,
 			default: () => [],
 		},
 		/**
@@ -214,27 +224,30 @@ export default {
 		currentNav() {
 			const pathSegments = this.$route.path.split('/').filter(Boolean);
 
-			const flatNav = this.nav.flatMap(
-				(item) =>
+			const flatNav: WtNavigationBarNavItem[] = this.nav.flatMap(
+				(item: WtNavigationBarNavItem) =>
 					item.subNav ?? [
 						item,
 					],
 			);
 
-			const navMap = new Map(
+			const navMap = new Map<string, WtNavigationBarNavItem>(
 				flatNav.map((item) => [
 					item.value,
 					item,
 				]),
 			);
 
-			const matchingSegment = pathSegments.find((segment) =>
+			const matchingSegment = pathSegments.find((segment: string) =>
 				navMap.has(segment),
 			);
-			const currentNav = navMap.get(matchingSegment);
+			const currentNav = matchingSegment
+				? navMap.get(matchingSegment)
+				: undefined;
 
-			const currentExpansion = this.nav.find((nav) =>
-				nav.subNav?.includes(currentNav),
+			const currentExpansion = this.nav.find(
+				(nav: WtNavigationBarNavItem) =>
+					!!currentNav && !!nav.subNav?.includes(currentNav),
 			);
 
 			return {
@@ -244,16 +257,19 @@ export default {
 		},
 	},
 	methods: {
-		nestedRoute(subNavItem, navItem) {
+		nestedRoute(
+			subNavItem: WtNavigationBarNavItem,
+			navItem: WtNavigationBarNavItem,
+		) {
 			return navItem.route
 				? `${navItem.route}/${subNavItem.route}`
 				: subNavItem.route;
 		},
-		expand(navItem) {
+		expand(navItem: WtNavigationBarNavItem) {
 			this.expandedName =
 				this.expandedName !== navItem.value ? navItem.value : '';
 		},
-		isExpanded(navItem) {
+		isExpanded(navItem: WtNavigationBarNavItem) {
 			return this.expandedName === navItem.value;
 		},
 		close() {

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

@@ -52,28 +52,28 @@
 <script setup lang="ts">
 import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import type { PasswordProps } from 'primevue';
-import {
-	computed,
-	defineModel,
-	ref,
-	toRefs,
-	useSlots,
-	useTemplateRef,
-} from 'vue';
-import { ComponentSize, MessageColor, MessageVariant } from '../../enums';
+import type { InputHTMLAttributes } from 'vue';
+import { computed, ref, toRefs, useSlots, useTemplateRef } from 'vue';
+import { ComponentSize, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
 import { useInputControl } from '../_internals/composables';
 
-interface WtPasswordProps extends /* @vue-ignore */ PasswordProps {
+/** native attrs are omitted: keeping them overflows prop inference (TS2590) */
+interface WtPasswordProps
+	extends /* @vue-ignore */ Omit<PasswordProps, keyof InputHTMLAttributes> {
 	label?: string;
 	labelProps?: Record<string, unknown>;
 	placeholder?: string;
 	disabled?: boolean;
 	required?: boolean;
 	toggleMask?: boolean;
-	v?: Record<string, unknown>;
+	v?: VuelidateFieldLike;
 	regleValidation?: SuperCompatibleRegleFieldStatus;
-	customValidators?: unknown[];
+	customValidators?: CompatCustomValidator[];
 }
 
 const props = withDefaults(defineProps<WtPasswordProps>(), {
@@ -84,7 +84,6 @@ const props = withDefaults(defineProps<WtPasswordProps>(), {
 	required: false,
 	toggleMask: true,
 	v: null,
-	regleValidation: null,
 	customValidators: () => [],
 });
 

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

@@ -181,9 +181,14 @@ function downloadMedia() {
 	const src = typeof props.src === 'string' ? props.src : props.src?.src;
 
 	const url =
-		typeof props.download === 'function' ? props.download(src) : props.download;
+		typeof props.download === 'function'
+			? props.download(typeof src === 'string' ? src : '')
+			: String(props.download);
 
-	const ext = props.src?.type.split('/').pop();
+	const ext =
+		typeof props.src === 'object'
+			? props.src?.type?.split('/').pop()
+			: undefined;
 
 	const filename = props.fileName || props.id || 'unknown';
 

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

@@ -26,8 +26,12 @@ import type { PopoverEmitsOptions, PopoverProps } from 'primevue';
 import { useAttrs, useTemplateRef } from 'vue';
 import { usePopoverOverlayFix } from './_internals/composables/usePopoverOverlayFix';
 
-interface Props extends PopoverProps {
+/** `breakpoints`/`pt`/`ptOptions` are re-declared so the `null` defaults below stay assignable */
+interface Props extends Omit<PopoverProps, 'breakpoints' | 'pt' | 'ptOptions'> {
 	disabled?: boolean;
+	breakpoints?: PopoverProps['breakpoints'] | null;
+	pt?: PopoverProps['pt'] | null;
+	ptOptions?: PopoverProps['ptOptions'] | null;
 }
 
 const attrs = useAttrs();

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

@@ -40,7 +40,7 @@ v-show="showPopupComponent" :class="[`wt-popup--size-${size}`, { 'wt-popup--over
 <script lang="ts" setup>
 import { TransitionSlide } from '@morev/vue-transitions';
 import { useScrollLock } from '@vueuse/core';
-import { computed, defineEmits, defineProps, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { ComponentSize } from '../../enums/ComponentSize/ComponentSize';
 
@@ -95,6 +95,10 @@ interface ActivatorSlotScope {
 
 const slots = defineSlots<{
 	activator?: ActivatorSlotScope;
+	header?: () => unknown;
+	title?: () => unknown;
+	main?: () => unknown;
+	actions?: () => unknown;
 }>();
 const activatorMode = !!slots.activator;
 

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

@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import type { RadioButtonProps } from 'primevue/radiobutton';
-import { computed, defineModel, defineProps, useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 
 /**
  * @emits {string | number | boolean | object} input - Fires when radio is selected. Emits the "value" prop

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

@@ -13,7 +13,7 @@
     <template #prefix>
       <wt-icon
         :color="invalidColorProvider"
-        :icon="searchMode?.icon || 'search'"
+        :icon="(typeof searchMode === 'object' && searchMode?.icon) || 'search'"
       />
     </template>
 
@@ -70,9 +70,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue';
+import { computed, type PropType, toRefs } from 'vue';
+
+export interface SearchMode {
+	value?: string;
+	icon?: string;
+	[key: string]: unknown;
+}
 
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type { CompatCustomValidator } from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
 import debounce from '../../scripts/debounce.js';
 
 const props = defineProps({
@@ -80,7 +87,7 @@ const props = defineProps({
 		type: Object,
 	},
 	customValidators: {
-		type: Array,
+		type: Array as PropType<CompatCustomValidator[]>,
 		default: () => [],
 	},
 	/**
@@ -104,10 +111,10 @@ const props = defineProps({
 		type: [
 			String,
 			Object,
-		],
+		] as PropType<string | SearchMode>,
 	},
 	searchModeOptions: {
-		type: Array,
+		type: Array as PropType<SearchMode[]>,
 		default: () => [],
 	},
 	/**
@@ -168,18 +175,18 @@ const isSuffixShow = computed(
 	() => props.value || props.searchMode || props.hint,
 );
 
-const search = debounce((value) => {
+const search = debounce((value: string) => {
 	emit('search', value);
 }, 1000);
 
-function handleInput(value) {
+function handleInput(value: string) {
 	emit('input', value);
 	search(value);
 }
 
-function handleKeyup(event) {
+function handleKeyup(event: KeyboardEvent) {
 	if (event.key === 'Enter') {
-		search(event.target.value);
+		search((event.target as HTMLInputElement).value);
 		event.preventDefault();
 	} else if (event.key === 'Esc') {
 		handleInput('');
@@ -187,7 +194,7 @@ function handleKeyup(event) {
 	}
 }
 
-function updateSearchMode({ option }) {
+function updateSearchMode({ option }: { option: SearchMode }) {
 	emit('update:search-mode', option);
 	emit('change:search-mode', option);
 }

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

@@ -24,10 +24,10 @@
       :placeholder="placeholder || label"
       :option-disabled="() => !!props.disabledOptions"
       :options="filteredOptions"
-      :option-label="(option) => getOptionLabel(option)"
+      :option-label="getOptionLabel"
       :option-value="optionValue"
       :data-key="dataKey"
-      :size="primevueSizeMap[size]"
+      :size="size ? primevueSizeMap[size] : undefined"
       v-bind="$attrs"
       :pt="{
         listContainer: {
@@ -109,12 +109,17 @@
 <script setup lang="ts">
 import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import type { SelectProps } from 'primevue';
-import { computed, onMounted, toRefs, useSlots, useTemplateRef } from 'vue';
-import { ComponentSize, MessageColor, MessageVariant } from '../../enums';
+import { computed, toRefs, useSlots, useTemplateRef } from 'vue';
+import { ComponentSize, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
+import type { SelectSearchMethod } from '../_internals/composables/useSelect/types';
 import { useSelect } from '../_internals/composables/useSelect/useSelect';
 
-interface Props extends SelectProps {
+interface Props extends Omit<SelectProps, 'size' | 'options'> {
 	label?: string;
 	placeholder?: string;
 	required?: boolean;
@@ -136,7 +141,8 @@ interface Props extends SelectProps {
 	 * true shows the clear button
 	 */
 	showClear?: boolean;
-	options?: unknown[];
+	/** readonly so consumers can pass `as const` option lists */
+	options?: readonly unknown[];
 	optionLabel?: string;
 	optionValue?: string;
 	/**
@@ -146,15 +152,15 @@ interface Props extends SelectProps {
 	/**
 	 * Function that returns filtered options for server-side search
 	 */
-	searchMethod?: () => void;
+	searchMethod?: SelectSearchMethod;
 	/**
 	 * true allows adding custom values through the filter input
 	 */
 	allowCustomValues?: boolean;
 	labelProps?: object;
-	v?: Record<string, unknown>;
+	v?: VuelidateFieldLike;
 	regleValidation?: SuperCompatibleRegleFieldStatus;
-	customValidators?: unknown[];
+	customValidators?: CompatCustomValidator[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -167,7 +173,7 @@ const props = withDefaults(defineProps<Props>(), {
 	customValidators: () => [],
 });
 
-const primevueSizeMap = {
+const primevueSizeMap: Record<string, string> = {
 	[ComponentSize.SM]: 'small',
 	[ComponentSize.LG]: 'large',
 };
@@ -197,7 +203,6 @@ const {
 	filterText,
 	filteredOptions,
 	getOptionLabel,
-	fetchOptions,
 	onDropdownBeforeShow,
 	onDropdownBeforeHide,
 	onDropdownShow,
@@ -207,7 +212,9 @@ const {
 	clearValue,
 } = useSelect({
 	selected: model,
-	options: computed(() => props.options),
+	options: computed(() => [
+		...props.options,
+	]),
 	optionLabel: computed(() => props.optionLabel),
 	optionValue: computed(() => props.optionValue),
 	dataKey: computed(() => props.dataKey),

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

@@ -10,9 +10,9 @@
     @closed="closedHandler"
     @update:model-value="inputHandler"
   >
-    <template #value="{ value }">
+    <template #value>
       <wt-indicator
-        :color="selectedOption.color"
+        :color="selectedOption?.color"
         :text="duration"
       />
     </template>

package/src/components/wt-table/types/WtTable.ts

@@ -1,3 +1,8 @@
+import type { SortSymbols } from '../../../scripts/sortQueryAdapters';
+
+/** derived so adding a symbol to `SortSymbols` widens this automatically */
+export type WtTableSortOrder = (typeof SortSymbols)[keyof typeof SortSymbols];
+
 export type WtTableHeader = {
 	value: string;
 	/**
@@ -9,6 +14,11 @@ export type WtTableHeader = {
 	width?: string;
 	/** API/query field name when it differs from `value` */
 	field?: string;
-	sort?: boolean | null;
+	/** `undefined` means the column is not sortable; `boolean` is back-compat */
+	sort?: WtTableSortOrder | boolean;
 	show?: boolean;
 };
+
+/** TODO(types): every cell is read through a header-driven runtime `field` key. */
+// biome-ignore lint/suspicious/noExplicitAny: see TODO above
+export type WtTableRow = any;