@webitel/ui-sdk 26.6.59 → 26.6.61

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

@@ -1,17 +1,18 @@
 <template>
-  <wt-select
-    :clearable="false"
+  <wt-single-select
+    :show-clear="false"
     :options="availableOptions"
-    :searchable="false"
-    :value="selectedOption"
+    :filterable="false"
+    :model-value="selectedOption"
     class="wt-status-select"
-    track-by="value"
+    data-key="value"
+		:size="ComponentSize.SM"
     @closed="closedHandler"
-    @input="inputHandler"
+    @update:model-value="inputHandler"
   >
-    <template #singleLabel="{ option }">
+    <template #value="{ value }">
       <wt-indicator
-        :color="option.color"
+        :color="value.color"
         :text="duration"
       />
     </template>
@@ -21,151 +22,91 @@
         :text="option.text"
       />
     </template>
-  </wt-select>
+  </wt-single-select>
 </template>
 
-<script>
-import AgentStatus from '../../enums/AgentStatus/AgentStatus.enum.js';
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { AgentStatus, ComponentSize } from '../../enums';
 import convertDuration from '../../scripts/convertDuration.js';
 import StatusOptions from './_internals/StatusOptions.lookup.js';
 
-export default {
-	name: 'WtStatusSelect',
-	model: {
-		prop: 'status',
-		event: 'change',
-	},
-	/**
-	 * @emits {string} change - Fires when status changes. Emits changed status value
-	 * @emits {Event} closed - Fires when dropdown is closed
-	 */
-	props: {
-		/**
-		 * Component is looking for value from AgentStatus enum
-		 * @type {string}
-		 * @default AgentStatus.OFFLINE
-		 */
-		status: {
-			type: String,
-			default: AgentStatus.OFFLINE,
-		},
-		/**
-		 * If seconds number, converts to hh:mm:ss format
-		 * @type {string | number}
-		 * @default 0
-		 */
-		statusDuration: {
-			type: [
-				String,
-				Number,
-			],
-			default: 0,
-		},
-		/**
-		 * If passed, replaces default status-select options. Should have 3 required properties: "color", "text" and "value"
-		 * @type {Array}
-		 */
-		options: {
-			type: Array,
-		},
-		// size: {
-		//   type: String,
-		//   default: 'md',
-		//   options: ['sm', 'md'],
-		// },
-	},
-	emits: [
-		'change',
-		'closed',
-	],
-	computed: {
-		selectedOption() {
-			return this.statusOptions.find((option) => option.value === this.status);
-		},
-		statusOptions() {
-			return this.options
-				? this.options
-				: StatusOptions.map((opt) => ({
-						...opt,
-						text: this.$t(opt.locale),
-					}));
-		},
-		availableOptions() {
-			return this.statusOptions.reduce((options, opt) => {
-				// PAUSE option is always passed
-				if (
-					(this.status === opt.value && opt.value !== AgentStatus.PAUSE) ||
-					opt.value === AgentStatus.BREAK_OUT
-				) {
-					// skip breakout option
-					return options;
-				}
-				options.push(opt);
-				return options;
-			}, []);
-		},
-		duration() {
-			/* The check commented below limits the display of time in the status to 8 characters.
-      Accordingly, if the agent is in the status of 100 hours (100: 00: 00),
-      then this time will be displayed as NaN:NaN:NaN */
+interface StatusOption {
+	color: string;
+	text: string;
+	value: string;
+	locale?: string;
+}
 
-			// if (typeof this.statusDuration === 'string' && this.statusDuration.length === 8) return this.statusDuration;
-			if (typeof this.statusDuration === 'string') return this.statusDuration;
-			if (this.statusDuration !== undefined) {
-				return convertDuration(this.statusDuration);
-			}
-			return this.selectedOption.text;
-		},
+const props = withDefaults(
+	defineProps<{
+		status?: string;
+		statusDuration?: string | number;
+		options?: StatusOption[];
+	}>(),
+	{
+		status: AgentStatus.OFFLINE,
+		statusDuration: 0,
 	},
-	methods: {
-		inputHandler(value) {
-			this.$emit('change', value.value);
-		},
-		closedHandler(event) {
-			this.$emit('closed', event);
-		},
-	},
-};
-</script>
+);
 
-<style scoped>
-.wt-status-select.wt-select {
-  box-shadow: var(--elevation-5);
-}
+const emit = defineEmits<{
+	change: [
+		value: string,
+	];
+	closed: [
+		event: Event,
+	];
+}>();
 
-.wt-status-select.wt-select :deep(.multiselect) {
-  min-height: 0;
-}
+const { t } = useI18n();
 
-.wt-status-select.wt-select :deep(.multiselect__tags) {
-  border: none;
-  background: var(--wt-status-select-background-color);
-  padding: var(--wt-status-select-padding);
-  min-height: 0;
-}
+const statusOptions = computed<StatusOption[]>(() =>
+	props.options
+		? props.options
+		: StatusOptions.map((opt) => ({
+				...opt,
+				text: t(opt.locale),
+			})),
+);
 
-.wt-status-select.wt-select :deep(.multiselect__select) {
-  top: 0;
-  right: 0;
-}
+const selectedOption = computed<StatusOption | undefined>(() =>
+	statusOptions.value.find((option) => option.value === props.status),
+);
 
-.wt-status-select.wt-select :deep(.multiselect__content-wrapper) {
-  border: none;
-  background: transparent;
-}
+const availableOptions = computed<StatusOption[]>(() =>
+	statusOptions.value.reduce<StatusOption[]>((options, opt) => {
+		// PAUSE option is always passed
+		if (
+			(props.status === opt.value && opt.value !== AgentStatus.PAUSE) ||
+			opt.value === AgentStatus.BREAK_OUT
+		) {
+			// skip breakout option
+			return options;
+		}
+		options.push(opt);
+		return options;
+	}, []),
+);
 
-.wt-status-select.wt-select :deep(.multiselect__option) {
-  background: var(--wt-status-select-option-background-color);
-  padding: 0;
-  min-height: 0;
-  color: var(--wt-status-select-option-text-color);
-}
+const duration = computed<string>(() => {
+	/* The check commented below limits the display of time in the status to 8 characters.
+  Accordingly, if the agent is in the status of 100 hours (100: 00: 00),
+  then this time will be displayed as NaN:NaN:NaN */
+
+	// if (typeof props.statusDuration === 'string' && props.statusDuration.length === 8) return props.statusDuration;
+	if (typeof props.statusDuration === 'string') return props.statusDuration;
+	if (props.statusDuration !== undefined)
+		return convertDuration(props.statusDuration);
+	return selectedOption.value?.text ?? '';
+});
 
-.wt-status-select.wt-select :deep(.multiselect__option--highlight) {
-  background: var(--wt-status-select-option-background-hover-color);
+function inputHandler(value: StatusOption) {
+	emit('change', value.value);
 }
 
-.wt-status-select.wt-select :deep(.multiselect__option--selected) {
-  /* background: var(--wt-status-select-option-background-selected-color); */
+function closedHandler(event: Event) {
+	emit('closed', event);
 }
-</style>
+</script>

package/src/css/components-variables.css

@@ -7,6 +7,7 @@
 @import "../components/wt-breadcrumb/_variables.css";
 @import "../components/wt-button-select/_variables.css";
 @import "../components/wt-button/_variables.css";
+@import "../components/wt-card/_variables.css";
 @import "../components/wt-checkbox/_variables.css";
 @import "../components/wt-chip/_variables.css";
 @import "../components/wt-context-menu/_variables.css";
@@ -37,7 +38,6 @@
 @import "../components/wt-radio/_variables.css";
 @import "../components/wt-rounded-action/_variables.css";
 @import "../components/wt-search-bar/_variables.css";
-@import "../components/wt-select/_variables.css";
 @import "../components/wt-slider/_variables.css";
 @import "../components/wt-status-select/_variables.css";
 @import "../components/wt-stepper/_variables.css";

package/types/components/wt-card/wt-card.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/wt-single-select/wt-single-select.vue.d.ts

@@ -4,6 +4,7 @@ interface Props extends SelectProps {
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
+    size?: string | null;
     /**
      * true disables all options but keeps dropdown visible
      */

package/types/components/wt-status-select/wt-status-select.vue.d.ts

@@ -1,3 +1,23 @@
+interface StatusOption {
+    color: string;
+    text: string;
+    value: string;
+    locale?: string;
+}
+type __VLS_Props = {
+    status?: string;
+    statusDuration?: string | number;
+    options?: StatusOption[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    closed: (event: Event) => any;
+    change: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClosed?: (event: Event) => any;
+    onChange?: (value: string) => any;
+}>, {
+    status: string;
+    statusDuration: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;

package/dist/AgentStatus.enum-C3IGHtvR.js

@@ -1,9 +0,0 @@
-//#region src/enums/AgentStatus/AgentStatus.enum.js
-var e = Object.freeze({
-	ONLINE: "online",
-	PAUSE: "pause",
-	OFFLINE: "offline",
-	BREAK_OUT: "break_out"
-});
-//#endregion
-export { e as t };

package/dist/wt-status-select-A5t6Vjm4.js

@@ -1,101 +0,0 @@
-import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t } from "./AgentStatus.enum-C3IGHtvR.js";
-import { t as n } from "./convertDuration-1K7fuEpO.js";
-import { createBlock as r, createVNode as i, openBlock as a, resolveComponent as o, withCtx as s } from "vue";
-//#region src/components/wt-status-select/_internals/StatusOptions.lookup.js
-var c = [
-	{
-		locale: "webitelUI.statusSelect.online",
-		color: "success",
-		value: t.ONLINE
-	},
-	{
-		locale: "webitelUI.statusSelect.pause",
-		color: "primary",
-		value: t.PAUSE
-	},
-	{
-		locale: "webitelUI.statusSelect.offline",
-		color: "disabled",
-		value: t.OFFLINE
-	},
-	{
-		locale: "webitelUI.statusSelect.breakOut",
-		color: "break-out",
-		value: t.BREAK_OUT
-	}
-], l = {
-	name: "WtStatusSelect",
-	model: {
-		prop: "status",
-		event: "change"
-	},
-	props: {
-		status: {
-			type: String,
-			default: t.OFFLINE
-		},
-		statusDuration: {
-			type: [String, Number],
-			default: 0
-		},
-		options: { type: Array }
-	},
-	emits: ["change", "closed"],
-	computed: {
-		selectedOption() {
-			return this.statusOptions.find((e) => e.value === this.status);
-		},
-		statusOptions() {
-			return this.options ? this.options : c.map((e) => ({
-				...e,
-				text: this.$t(e.locale)
-			}));
-		},
-		availableOptions() {
-			return this.statusOptions.reduce((e, n) => (this.status === n.value && n.value !== t.PAUSE || n.value === t.BREAK_OUT || e.push(n), e), []);
-		},
-		duration() {
-			return typeof this.statusDuration == "string" ? this.statusDuration : this.statusDuration === void 0 ? this.selectedOption.text : n(this.statusDuration);
-		}
-	},
-	methods: {
-		inputHandler(e) {
-			this.$emit("change", e.value);
-		},
-		closedHandler(e) {
-			this.$emit("closed", e);
-		}
-	}
-};
-function u(e, t, n, c, l, u) {
-	let d = o("wt-indicator"), f = o("wt-select");
-	return a(), r(f, {
-		clearable: !1,
-		options: u.availableOptions,
-		searchable: !1,
-		value: u.selectedOption,
-		class: "wt-status-select",
-		"track-by": "value",
-		onClosed: u.closedHandler,
-		onInput: u.inputHandler
-	}, {
-		singleLabel: s(({ option: e }) => [i(d, {
-			color: e.color,
-			text: u.duration
-		}, null, 8, ["color", "text"])]),
-		option: s(({ option: e }) => [i(d, {
-			color: e.color,
-			text: e.text
-		}, null, 8, ["color", "text"])]),
-		_: 1
-	}, 8, [
-		"options",
-		"value",
-		"onClosed",
-		"onInput"
-	]);
-}
-var d = /*#__PURE__*/ e(l, [["render", u], ["__scopeId", "data-v-580212cb"]]);
-//#endregion
-export { d as default };

package/src/components/wt-select/__tests__/WtSelect.spec.js

@@ -1,30 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-
-import WtLabel from '../../wt-label/wt-label.vue';
-import WtSelect from '../wt-select.vue';
-
-describe('WtSelect', () => {
-	it('renders a component', () => {
-		const wrapper = shallowMount(WtSelect, {
-			stubs: {
-				WtLabel,
-				WtIcon: true,
-			},
-		});
-		expect(wrapper.classes('wt-select')).toBe(true);
-	});
-
-	it('renders label text when passed', () => {
-		const label = 'Hello there';
-		const wrapper = mount(WtSelect, {
-			stubs: {
-				WtLabel,
-				WtIcon: true,
-			},
-			props: {
-				label,
-			},
-		});
-		expect(wrapper.find('.wt-label').text()).toBe(label);
-	});
-});

package/src/components/wt-select/_variables.css

@@ -1,12 +0,0 @@
-:root {
-	--select-icon-top-pos: var(--spacing-xs);
-	--select-chip-top-pos: var(--spacing-xs);
-
-	--select-caret-right-pos: var(--input-padding);
-
-	--select-tags-border: var(
-		--input-border
-	); /* right pos = 10px spacing + clear icon size + clear offset */
-
-	--select-options-padding: var(--input-padding);
-}

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

@@ -1,50 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import MultiselectMixin from '../multiselectMixin.js';
-
-const Component = {
-	mixins: [
-		MultiselectMixin,
-	],
-	render() {},
-};
-
-describe('MultiselectMixin', () => {
-	it('renders a component', () => {
-		const wrapper = shallowMount(Component);
-		expect(wrapper.exists()).toBe(true);
-	});
-
-	it('Correctly computes internal search options', () => {
-		const options = [
-			'1',
-			'2',
-		];
-		const wrapper = shallowMount(Component, {
-			props: {
-				options,
-			},
-		});
-		expect(wrapper.vm.selectOptions).toEqual(options);
-	});
-
-	it('Correctly computes internal search options: search case', async () => {
-		const options = [
-			'1',
-			'2',
-		];
-		const searchOptions = [
-			'1',
-		];
-		const wrapper = shallowMount(Component, {
-			props: {
-				options,
-				searchMethod: () => ({
-					items: searchOptions,
-				}),
-			},
-		});
-		await wrapper.vm.$nextTick();
-		expect(wrapper.vm.selectOptions).toEqual(searchOptions);
-	});
-});