@webitel/ui-sdk 26.6.58 → 26.6.60

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

@@ -1,279 +0,0 @@
-import VueMultiselect from 'vue-multiselect';
-import { ObserveVisibility } from 'vue-observe-visibility';
-
-import debounce from '../../../scripts/debounce.js';
-import isEmpty from '../../../scripts/isEmpty.js';
-import labelUsageMixin from '../../wt-label/mixins/labelUsageMixin.js';
-
-export default {
-	mixins: [
-		labelUsageMixin,
-	],
-	directives: {
-		ObserveVisibility,
-	},
-	components: {
-		VueMultiselect,
-	},
-	props: {
-		options: {
-			type: Array,
-			default: () => [],
-		},
-
-		placeholder: {
-			type: String,
-			default: '',
-		},
-
-		trackBy: {
-			type: String,
-			default: 'id',
-		},
-
-		optionLabel: {
-			type: String,
-		},
-
-		searchMethod: {
-			type: Function,
-		},
-
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-
-		required: {
-			type: Boolean,
-			default: false,
-		},
-
-		allowEmpty: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * pass "value" prop as string, receive @input event with string,
-		 * but pass options as objects and calculate value from options by this prop
-		 */
-		useValueFromOptionsByProp: {
-			type: String,
-			default: '',
-		},
-	},
-	data: () => ({
-		apiOptions: [],
-		cachedOptionsMap: {}, // is needed for props.useValueFromOptionsByProp
-		isLoading: false,
-		defaultOptionLabel: 'name',
-
-		searchParams: {
-			search: '',
-			page: 1,
-		},
-		searchHasNext: true,
-		// https://webitel.atlassian.net/browse/WTEL-9569
-		// prevents cascade page loads when the sentinel stays visible after a page appends to the list
-		_canLoadNext: true,
-	}),
-	computed: {
-		selectOptionLabel() {
-			// trackBy === null means that options are not objects but primitives
-			if (this.trackBy === null) return null;
-			return this.optionLabel || this.defaultOptionLabel;
-		},
-		isApiMode() {
-			return !!this.searchMethod;
-		},
-		showIntersectionObserver() {
-			return this.isApiMode && !this.isLoading && this.apiOptions.length;
-		},
-		selectValue() {
-			/* vue-multiselect doesn't show placeholder if value is empty object */
-			if (!this.isValue) return '';
-
-			let returnedValue = this.value;
-
-			/*
-      coerce single value to array, if it was passed with `multiple` prop
-      by dev mistake or internal error
-       */
-			if (this.multiple && !Array.isArray(returnedValue)) {
-				console.warn(
-					'wt-select: value prop should be an array when using multiple mode',
-				);
-				returnedValue = [
-					returnedValue,
-				];
-			}
-
-			if (this.useValueFromOptionsByProp) {
-				if (this.multiple) {
-					returnedValue = returnedValue.map(
-						(item) => this.cachedOptionsMap[item] || item,
-					);
-				} else {
-					returnedValue = this.cachedOptionsMap[returnedValue] || returnedValue;
-				}
-			}
-
-			return returnedValue;
-		},
-
-		selectOptions() {
-			return this.isApiMode ? this.apiOptions : this.options;
-		},
-
-		isValue() {
-			return !isEmpty(this.value);
-		},
-		listeners() {
-			return {
-				'update:model-value': this.input,
-				close: this.close,
-				tag: this.tag,
-				'search-change': (search) => {
-					this.$emit('search-change', search);
-					this.handleSearchChange(search);
-				},
-			};
-		},
-	},
-
-	methods: {
-		getOptionLabel({ option, optionLabel }) {
-			// https://webitel.atlassian.net/browse/WTEL-3181
-			// if allowCustomValue select mode, return vue-multiselect label as is
-			if (this.allowCustomValues && option.isTag) return option.label;
-
-			if (optionLabel && option[optionLabel]) return option[optionLabel];
-			if (option.locale) {
-				if (Array.isArray(option.locale)) return this.$t(...option.locale);
-				return this.$t(option.locale);
-			}
-			return option[this.defaultOptionLabel] || option;
-		},
-		handleSearchChange(search) {
-			// search can be used in non-api mode too
-			this.searchParams.search = search;
-
-			if (!this.isApiMode) return;
-			this.isLoading = true;
-			this.searchParams.page = 1;
-			// block auto-load until sentinel leaves the viewport: list is being reset,
-			// so the sentinel may still be visible from the previous result set
-			this._canLoadNext = false;
-			this.fetchOptions();
-		},
-
-		handleAfterListIntersect(isVisible) {
-			if (!isVisible) {
-				// sentinel left the viewport — user scrolled up or list shrank;
-				// next intersection will be a genuine scroll-to-bottom
-				this._canLoadNext = true;
-				return;
-			}
-			if (this.searchHasNext && this._canLoadNext) {
-				// sentinel entered the viewport after user scrolled to the bottom
-				this._canLoadNext = false;
-				this.isLoading = true;
-				this.searchParams.page += 1;
-				this.fetchOptions();
-			}
-		},
-
-		async fetchOptions({ search, page } = this.searchParams) {
-			if (!this.isApiMode) return;
-			const { items, next } = await this.searchMethod({
-				search,
-				page,
-			});
-			this.apiOptions =
-				this.searchParams.page === 1 ? items : this.apiOptions.concat(items);
-			this.searchHasNext = next;
-			this.isLoading = false;
-		},
-
-		input(value) {
-			let emittedValue = value;
-			if (this.useValueFromOptionsByProp) {
-				if (this.multiple) {
-					emittedValue = value.map(
-						(item) => item[this.useValueFromOptionsByProp],
-					);
-				} else {
-					emittedValue = value[this.useValueFromOptionsByProp];
-				}
-			}
-			this.$emit('input', emittedValue); // vue 2
-			this.$emit('update:model-value', emittedValue); // vue 3
-		},
-
-		close(event) {
-			this.$emit('closed', event);
-		},
-
-		tag() {},
-	},
-
-	watch: {
-		disabled() {
-			// load options if becomes enabled
-			if (!this.disabled) this.fetchOptions();
-		},
-		selectOptions: {
-			handler() {
-				if (this.trackBy === null) return; // then, options are primitives
-
-				for (const opt of this.selectOptions) {
-					this.cachedOptionsMap[
-						opt[this.useValueFromOptionsByProp || this.trackBy]
-					] = opt;
-				}
-			},
-			immediate: true,
-		},
-		value: {
-			async handler() {
-				/*
-        use case: select api option while using `useValueFromOptionsByProp` prop,
-        then, refresh page and restore selected id. but it may not be in options list,
-
-        when using api-fetched options, selected value, tracked by id,
-         may be not in returned options list,
-        so its necessary to fetch those values separately
-         */
-				if (this.useValueFromOptionsByProp && this.isApiMode) {
-					const valuesArr = Array.isArray(this.value)
-						? this.value
-						: [
-								this.value,
-							];
-					const uncachedValues = valuesArr.filter(() => {
-						return !this.cachedOptionsMap[this.value];
-					});
-
-					if (uncachedValues.length) {
-						const { items } = await this.searchMethod({
-							id: uncachedValues,
-							size: uncachedValues.length,
-						});
-						items.forEach((item) => {
-							this.cachedOptionsMap[item[this.useValueFromOptionsByProp]] =
-								item;
-						});
-					}
-				}
-			},
-			immediate: true,
-		},
-	},
-
-	created() {
-		// load options only if not disabled
-		if (!this.disabled) this.fetchOptions();
-
-		this.fetchOptions = debounce(this.fetchOptions, 500);
-	},
-};

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

@@ -1,239 +0,0 @@
-/* THIS FILE IS ADDED TO BIOME IGNORE coz it fails to parse Vue :deep() selector*/
-
-:deep(.multiselect) {
-    position: relative;
-    cursor: pointer;
-}
-
-:deep(.multiselect) .multiselect__select {
-    position: absolute;
-    top: var(--select-icon-top-pos);
-    right: var(--select-caret-right-pos);
-    transition: var(--transition);
-    background: transparent;
-    padding: 0;
-    /* reset default */
-    width: fit-content;
-    /* reset default */
-    height: fit-content;
-    /* reset default */
-}
-
-:deep(.multiselect) .multiselect__select::before {
-    display: none;
-    /* reset default */
-}
-
-:deep(.multiselect) .multiselect__limit {
-    position: absolute;
-    top: var(--select-chip-top-pos);
-}
-
-:deep(.multiselect) .multiselect__clear {
-    position: absolute;
-    top: var(--select-icon-top-pos);
-    z-index: 1;
-}
-
-/* visible select input wrapper */
-:deep(.multiselect) .multiselect__tags {
-    border: var(--select-tags-border);
-    border-color: var(--wt-text-field-input-border-color);
-    border-radius: var(--border-radius);
-    background: transparent;
-    padding: calc(var(--spacing-xs) - 1px);
-    /* borders */
-}
-
-:deep(.multiselect) .multiselect__input,
-:deep(.multiselect) .multiselect__single,
-:deep(.multiselect) .multiselect__placeholder {
-    /* typo-body-1 */
-    font-family: 'Montserrat', monospace;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 24px;
-    text-transform: none;
-    margin: 0;
-    /* reset default */
-    background: transparent;
-    padding: 0;
-    /* reset default */
-    color: var(--wt-text-field-text-color);
-}
-
-:deep(.multiselect) .multiselect__input::placeholder,
-:deep(.multiselect) .multiselect__input::-webkit-input-placeholder,
-:deep(.multiselect) .multiselect__input::-moz-placeholder,
-:deep(.multiselect) .multiselect__input:-moz-placeholder,
-:deep(.multiselect) .multiselect__input:-ms-input-placeholder {
-    font: inherit;
-    transition: var(--transition);
-    color: var(--wt-text-field-placeholder-color);
-}
-
-:deep(.multiselect) .multiselect__custom-tag,
-:deep(.multiselect) .multiselect__single-label {
-    color: var(--wt-text-field-text-color);
-}
-
-:deep(.multiselect) .multiselect__placeholder {
-    /* wt-placeholder */
-    transition: var(--transition);
-    color: var(--wt-text-field-placeholder-color);
-    display: block;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    /* text overflow 3 dots */
-    white-space: nowrap;
-}
-
-/* select options wrapper */
-:deep(.multiselect) .multiselect__content-wrapper {
-    /* wt-distant-scrollbar */
-    transition: var(--transition);
-    box-shadow: var(--elevation-10);
-    border: var(--select-tags-border);
-    border-color: var(--wt-text-field-select-option-wrapper-border-color);
-    border-radius: var(--border-radius);
-    background: transparent;
-}
-
-:deep(.multiselect) .multiselect__content-wrapper::-webkit-scrollbar {
-    width: 14px;
-    height: 18px;
-    background-color: var(--scrollbar-bg-color);
-}
-
-:deep(.multiselect) .multiselect__content-wrapper::-webkit-scrollbar-thumb {
-    height: 2px;
-    border: 4px solid rgba(0, 0, 0, 0);
-    border-radius: var(--scrollbar-border-radius);
-    background-color: var(--scrollbar-thumb-color);
-    background-clip: padding-box;
-}
-
-/* select options */
-:deep(.multiselect) .multiselect__option {
-    /* typo-body-1 */
-    font-family: 'Montserrat', monospace;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 24px;
-    text-transform: none;
-    background: var(--wt-text-field-select-option-background-color);
-    padding: var(--select-options-padding);
-    color: var(--wt-text-field-select-option-text-color);
-}
-
-:deep(.multiselect) .multiselect__option::after {
-    display: none;
-}
-
-:deep(.multiselect) .multiselect__option--highlight {
-    background: var(--wt-text-field-select-option-background-hover-color);
-    color: var(--wt-text-field-select-option-text-hover-color);
-}
-
-:deep(.multiselect) .multiselect__option--selected {
-    background: var(--wt-text-field-select-option-background-selected-color);
-    color: var(--wt-text-field-select-option-text-selected-color);
-    font-weight: normal;
-    /* reset */
-}
-
-:deep(.multiselect--active) .multiselect__select.multiselect__arrow .wt-icon {
-    fill: var(--icon-active-color);
-}
-
-:deep(.multiselect--active) .multiselect__select.multiselect__custom-value {
-    transform: none;
-}
-
-.wt-select--loading :deep(.multiselect) .multiselect__content-wrapper,
-.wt-tags-input--loading :deep(.multiselect) .multiselect__content-wrapper {
-    overflow-y: hidden;
-}
-
-.wt-select--loading :deep(.multiselect) .multiselect__loading-wrapper,
-.wt-tags-input--loading :deep(.multiselect) .multiselect__loading-wrapper {
-    display: flex;
-    position: sticky;
-    top: 0;
-    left: 0;
-    justify-content: center;
-    align-items: center;
-    z-index: 1;
-    backdrop-filter: blur(4px);
-    width: 100%;
-    height: 300px;
-    /* max dropdown panel height */
-}
-
-.wt-select.wt-select--invalid :deep(.multiselect) .multiselect__tags,
-.wt-tags-input.wt-tags-input--invalid :deep(.multiselect) .multiselect__tags {
-    outline: none;
-    /* prevent outline overlapping false color */
-    border-color: var(--wt-text-field-input-border-error-color);
-}
-
-.wt-select.wt-select--invalid :deep(.multiselect) .multiselect__custom-tag,
-.wt-select.wt-select--invalid :deep(.multiselect) .multiselect__single-label,
-.wt-tags-input.wt-tags-input--invalid :deep(.multiselect) .multiselect__custom-tag,
-.wt-tags-input.wt-tags-input--invalid :deep(.multiselect) .multiselect__single-label {
-    color: var(--wt-text-field-placeholder-error-color);
-}
-
-.wt-select.wt-select--invalid :deep(.multiselect) .multiselect__placeholder,
-.wt-tags-input.wt-tags-input--invalid :deep(.multiselect) .multiselect__placeholder {
-    /* wt-placeholder--error */
-    transition: var(--transition);
-    color: var(--wt-text-field-placeholder-error-color);
-}
-
-.wt-select--disabled,
-.wt-tags-input--disabled {
-    pointer-events: none;
-}
-
-.wt-select--disabled .multiselect--disabled,
-.wt-tags-input--disabled .multiselect--disabled {
-    opacity: 1;
-    background: none;
-}
-
-.wt-select--disabled .multiselect__select,
-.wt-tags-input--disabled .multiselect__select {
-    background: transparent;
-    /* reset default */
-}
-
-.wt-select--disabled :deep(.multiselect) .multiselect__tags,
-.wt-tags-input--disabled :deep(.multiselect) .multiselect__tags {
-    border-color: var(--wt-text-field-input-border-disabled-color);
-    background: var(--wt-text-field-input-background-disabled-color);
-}
-
-.wt-select--disabled :deep(.multiselect) .multiselect__placeholder,
-.wt-tags-input--disabled :deep(.multiselect) .multiselect__placeholder {
-    /* wt-placeholder--disabled */
-    transition: var(--transition);
-    color: var(--wt-text-field-placeholder-disabled-color);
-}
-
-/* override .wt-select colors on chips */
-.wt-tags-input :deep(.multiselect) .multiselect__tags .multiselect__custom-tag,
-.wt-tags-input :deep(.multiselect) .multiselect__tags .multiselect__single-label,
-.wt-tags-input--invalid :deep(.multiselect) .multiselect__tags .multiselect__custom-tag,
-.wt-tags-input--invalid :deep(.multiselect) .multiselect__tags .multiselect__single-label {
-    color: var(--wt-chip-main-text-color);
-}
-
-.multiselect__custom-tag {
-    display: block;
-    overflow: hidden;
-    max-width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}