@webitel/ui-sdk 26.6.17 → 26.6.18

package/src/components/wt-tags-input/__tests__/WtTagsInput.spec.js

@@ -1,89 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-
-import WtLabel from '../../wt-label/wt-label.vue';
-import WtTagsInput from '../wt-tags-input.vue';
-
-describe('WtTagsInput', () => {
-	it('renders a component', () => {
-		const wrapper = shallowMount(WtTagsInput);
-		expect(wrapper.classes('wt-tags-input')).toBe(true);
-	});
-
-	it('renders label text when passed', () => {
-		const label = 'Hello there';
-		const wrapper = mount(WtTagsInput, {
-			stubs: {
-				WtLabel,
-			},
-			props: {
-				label,
-			},
-		});
-		expect(wrapper.find('.wt-label').text()).toBe(label);
-	});
-
-	it('by default emits "input" event at native "tag" event', () => {
-		const tag = '123';
-		const wrapper = mount(WtTagsInput, {
-			props: {
-				value: [],
-			},
-		});
-		wrapper
-			.findComponent({
-				name: 'vue-multiselect',
-			})
-			.vm.$emit('tag', tag);
-		expect(wrapper.emitted().input[0][0]).toEqual([
-			tag,
-		]);
-	});
-
-	it('by default when input taggable initialize options should set from value', () => {
-		const wrapper = mount(WtTagsInput, {
-			props: {
-				value: [
-					{
-						label: 'Vue.js',
-						text: 'JavaScript',
-					},
-					{
-						label: 'Vue2.js',
-						text: 'JavaScript',
-					},
-					{
-						label: 'Vue3.js',
-						text: 'JavaScript',
-					},
-				],
-				options: [
-					{
-						label: 'Vue.js',
-						text: 'JavaScript',
-					},
-				],
-			},
-		});
-		expect(
-			wrapper.findComponent({
-				name: 'vue-multiselect',
-			}).vm.$props.options.length,
-		).toEqual(3);
-	});
-
-	it('in manual mode doesnt emit "input" event at native "tag" event', () => {
-		const tag = '123';
-		const wrapper = mount(WtTagsInput, {
-			props: {
-				value: [],
-				manualTagging: true,
-			},
-		});
-		wrapper
-			.findComponent({
-				name: 'vue-multiselect',
-			})
-			.vm.$emit('tag', tag);
-		expect(wrapper.emitted().input).toBeFalsy();
-	});
-});

package/src/components/wt-tags-input/mixin/__tests__/taggableMixin.spec.js

@@ -1,27 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-
-import taggableMixin from '../taggableMixin.js';
-
-describe('taggableMixin', () => {
-	const Component = {
-		render() {},
-		mixins: [
-			taggableMixin,
-		],
-	};
-
-	it('renders a component', () => {
-		const wrapper = shallowMount(Component);
-		expect(wrapper.exists()).toBe(true);
-	});
-
-	it('Methods are called correctly', () => {
-		const searchQuery = '123';
-		const wrapper = mount(Component);
-
-		wrapper.vm.$emit('tag', searchQuery);
-
-		expect(wrapper.emitted().tag).toBeTruthy();
-		expect(wrapper.emitted().input).toBeFalsy();
-	});
-});

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

@@ -1,275 +0,0 @@
-<template>
-  <div
-    :class="{
-      'wt-tags-input--disabled': disabled,
-      'wt-tags-input--invalid': invalid,
-      'wt-tags-input--loading': isLoading,
-    }"
-    class="wt-tags-input"
-  >
-    <wt-label
-      v-if="hasLabel"
-      :disabled="disabled"
-      :invalid="invalid"
-      class="wt-tags-input__label"
-      v-bind="labelProps"
-    >
-      <!-- @slot Custom input label -->
-      <slot
-        name="label"
-        v-bind="{ label }"
-      >
-        {{ requiredLabel }}
-      </slot>
-    </wt-label>
-
-    <vue-multiselect
-      ref="vue-multiselect"
-      :close-on-select="false"
-      :disabled="disabled"
-      :internal-search="!searchMethod"
-      :label="selectOptionLabel"
-      :loading="false"
-      :model-value="selectValue"
-      :multiple="multiple"
-      :options="selectOptions"
-      :placeholder="placeholder || label"
-      :taggable="taggable"
-      :track-by="trackBy"
-      class="wt-tags-input__select"
-      v-bind="$attrs"
-      v-on="listeners"
-    >
-      <!--      Slot that is used for all selected options (tags)-->
-      <template #tag="{ option, remove }">
-        <wt-chip class="multiselect__custom-tag">
-          {{ getTagOptionLabel({ option, optionLabel }) }}
-          <wt-icon-btn
-            color="on-primary"
-            icon="close--filled"
-            size="sm"
-            @click="remove(option)"
-          />
-        </wt-chip>
-      </template>
-
-      <!--      Slot for custom option template -->
-      <template #option="{ option }">
-        <slot
-          name="option"
-          v-bind="{ option, optionLabel }"
-        >
-          {{ getTagOptionLabel({ option, optionLabel }) }}
-        </slot>
-      </template>
-
-      <!--      Element for opening and closing the dropdown -->
-      <template #caret="{ toggle }">
-        <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
-        <wt-icon-btn
-          :disabled="disabled"
-          class="multiselect__select"
-          color="active"
-          icon="arrow-down"
-          @mousedown.prevent.stop="toggle"
-        />
-      </template>
-
-      <template #beforeList>
-        <div
-          v-show="isLoading"
-          class="multiselect__loading-wrapper"
-        >
-          <wt-loader size="sm" />
-        </div>
-      </template>
-
-      <template
-        v-if="showIntersectionObserver"
-        #afterList
-      >
-        <div v-observe-visibility="handleAfterListIntersect" />
-      </template>
-    </vue-multiselect>
-
-    <wt-message
-      v-if="isValidation && validationText"
-      :color="validationTextColor"
-      :variant="MessageVariant.SIMPLE"
-      :size="ComponentSize.SM"
-    >
-      {{ validationText }}
-    </wt-message>
-  </div>
-</template>
-
-<script>
-import deepEqual from 'deep-equal';
-import { ComponentSize, MessageVariant } from '../../enums';
-import validationMixin from '../../mixins/validationMixin/validationMixin';
-import multiselectMixin from '../wt-select/mixins/multiselectMixin.js';
-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,
-	],
-	/**
-	 * @emits {Array} input - Fires when tags value changes. Emits value array
-	 * @emits {string} tag - Fires when tag is added (if manualTagging is true). Emits vue-multiselect "tag" value
-	 * @emits {string} search-change - Fires when search query changes
-	 * @emits {void} closed - Fires when dropdown is closed
-	 *
-	 * Note: This component inherits props from multiselectMixin (options, placeholder, optionLabel, searchMethod, disabled, required, allowEmpty, useValueFromOptionsByProp)
-	 * and validationMixin (v, customValidators). Also inherits label-related props from labelUsageMixin (label, labelProps).
-	 */
-	props: {
-		/**
-		 * Current tags value (v-model). Default mode for tags input is array of strings, not objects (that is the difference between tags input and select).
-		 * @type {Array}
-		 * @model value
-		 */
-		value: {
-			type: Array,
-		},
-		/**
-		 * Default mode for tags input is array of strings, not objects (that is the difference between tags input and select).
-		 * @type {string}
-		 * @default null
-		 */
-		trackBy: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * If true, user can add tags by himself
-		 * @type {boolean}
-		 * @default false
-		 */
-		taggable: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Represented property of select object. REQUIRED IN OBJECT-DATA TAG-INPUTS TO PREVENT OPTION DUPLICATION.
-		 * @type {string}
-		 * @default null
-		 */
-		optionLabel: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * False: "tag" method automatically pushes { optionLabel | "name", trackBy } object to value array and $emits "input" event.
-		 * True: "tag" method only $emits "tag" event. Tag addition is responsibility of client side.
-		 * @type {boolean}
-		 * @default false
-		 */
-		manualTagging: {
-			type: Boolean,
-			default: false,
-			description: `
-      False: "tag" method automatically pushes { optionLabel | "name", trackBy } object to value
-      array and $emits "input" event.
-
-      True: "tag" method only $emits "tag" event. Tag addition is responsibility of client side.
-    `,
-		},
-	},
-	emits: [
-		'input',
-		'tag',
-		'search-change',
-		'closed',
-	],
-	data: () => ({
-		defaultOptionLabel: 'label',
-
-		// [https://webitel.atlassian.net/browse/WTEL-4310]
-		// Multiple value is needed in TaggableMixin mixin to correctly add custom values
-
-		multiple: true,
-
-		// Expose enums to template
-		MessageVariant,
-		ComponentSize,
-	}),
-	created() {
-		if (!this.isApiMode) {
-			this.initializeOptions();
-		}
-	},
-	methods: {
-		getTagOptionLabel({ optionLabel, option }) {
-			/*
-      Multiselect creates new tags with "label" property by default, so we need to handle
-      it as well
-       */
-			const label = this.getOptionLabel({
-				optionLabel,
-				option,
-			});
-			return typeof label === 'object' ? option.label : label;
-		},
-		initializeOptions() {
-			if (!this.value) {
-				return [];
-			}
-
-			const newOptions = this.value.filter((valObj) => {
-				return !this.options.find((option) => {
-					return deepEqual(option, valObj);
-				});
-			});
-
-			this.options.unshift(...newOptions);
-		},
-	},
-};
-</script>
-
-<style scoped>
-@import '../wt-select/multiselect.css';
-
-.wt-tags-input {
-  width: 100%;
-}
-
-.wt-tags-input--disabled .wt-tags-input__tags-input {
-  width: 100%;
-  max-width: 100%;
-  /* reset default */
-}
-
-/* paddings recalc */
-.wt-tags-input :deep(.multiselect) .multiselect__tags {
-  padding-right: calc(var(--input-padding) + var(--icon-md-size) + var(--select-caret-right-pos));
-  padding-bottom: 0;
-}
-
-:deep(.multiselect__tags-wrap) {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.wt-tags-input :deep(.multiselect__custom-tag) {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: var(--spacing-xs);
-  margin: 0 var(--spacing-xs) calc(var(--spacing-xs) - 1px) 0;
-  /* border bottom */
-  max-width: 100%;
-  word-break: break-all;
-  white-space: normal;
-}
-
-:deep(.multiselect__input) {
-  margin-bottom: calc(var(--spacing-xs) - 1px);
-  /* border */
-}
-</style>

package/types/components/wt-tags-input/__tests__/WtTagsInput.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/types/components/wt-tags-input/mixin/__tests__/taggableMixin.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/types/components/wt-tags-input/wt-tags-input.vue.d.ts

@@ -1,3 +0,0 @@
-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>;