@webitel/ui-sdk 26.6.13 → 26.6.14

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

@@ -0,0 +1,254 @@
+<template>
+  <div class="wt-multi-select">
+    <wt-label 
+      v-if="hasLabel" 
+      :disabled="disabled" 
+      :invalid="invalid" 
+      class="wt-select__label" 
+      v-bind="labelProps">
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">
+        {{ requiredLabel }}
+      </slot>
+    </wt-label>
+    <p-multi-select
+      ref="selectRef"
+      v-model="model"
+      fluid
+      input-class="typo-body-1"
+      :display="chipsView ? 'chip' : 'comma'"
+      :show-toggle-all="false"
+      :invalid="invalid"
+      :id="selectId"
+      :show-clear="showClear"
+      :disabled="disabled"
+      :placeholder="placeholder || label"
+      :option-disabled="() => disabledOptions"
+      :options="filteredOptions"
+      :option-label="(option) => getOptionLabel(option)"
+      :option-value="optionValue"
+      :loading="isLoading"
+      :max-selected-labels="MAX_SELECTED_LABELS"
+      :selectedItemsLabel="`${model.length} ${t('webitelUI.select.selectedItemsLabel')}`"
+      :data-key="dataKey"
+      v-bind="$attrs"
+      @before-show="onDropdownBeforeShow"
+      @before-hide="onDropdownBeforeHide"
+      @show="onDropdownShow"
+      @hide="onDropdownHide"
+    >
+      <template #header>
+        <wt-input-text
+          v-if="filterable"
+          ref="filterInput"
+          :model-value="filterText"
+          @update:model-value="filterOptions($event)"
+          @keydown.enter.stop="onInputKeydown"
+        >
+          <template #suffix>
+            <wt-icon v-if="allowCustomValues && filterText" icon="select-custom-value-enter" />
+            <wt-icon icon="search" />
+          </template>
+        </wt-input-text>
+      </template>
+      <template #option="{ option }">
+        <span
+          class="wt-multi-select__option-label"
+          v-tooltip="getOptionLabel(option)"
+        >
+          {{ getOptionLabel(option) }}
+        </span>
+      </template>
+      <template #itemcheckboxicon="{checked}">
+        <wt-checkbox
+          :selected="checked"
+          class="wt-multi-select__option-checkbox"
+        />
+      </template>
+      <template #clearicon>
+        <wt-icon-btn 
+          v-if="showClear && model"  
+          icon="close" 
+          @click="clearValue"
+        />
+      </template>
+      <template #dropdownicon>
+        <wt-icon :icon="isDropdownOpen ? 'arrow-up' : 'arrow-down'" />
+      </template>
+      <template #loadingicon>
+        <wt-loader :size="ComponentSize.SM" />
+      </template>
+      <template #chip="{ value, removeCallback }">
+        <wt-chip
+          removable
+          :color="ChipColor.SECONDARY"
+          @remove="removeCallback($event)"
+        > 
+          {{ getOptionLabel(value) }}
+        </wt-chip>
+      </template>
+    </p-multi-select>
+    <wt-message
+      v-if="isValidation && validationText"
+      :color="validationTextColor"
+      :variant="MessageVariant.SIMPLE"
+      :size="ComponentSize.SM"
+    >
+      {{ validationText }}
+    </wt-message>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SelectProps } from 'primevue';
+import { computed, onMounted, toRefs, useSlots, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ChipColor, ComponentSize, MessageVariant } from '../../enums';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
+import { useSelect } from '../_internals/composables/useSelect/useSelect';
+import { toArray } from '../_internals/composables/useSelect/useSelectUtils';
+
+interface Props extends SelectProps {
+	label?: string;
+	placeholder?: string;
+	required?: boolean;
+	disabled?: boolean;
+	/**
+	 * true disables all options but keeps dropdown visible
+	 */
+	disabledOptions?: boolean;
+	/**
+	 * false disables options search
+	 */
+	filterable?: boolean;
+	/**
+	 * true shows the clear button
+	 */
+	showClear?: boolean;
+	options?: unknown[];
+	optionLabel?: string;
+	optionValue?: string;
+	/**
+	 * A property to uniquely identify an option.
+	 */
+	dataKey?: string;
+	/**
+	 * Function that returns filtered options for server-side search
+	 */
+	searchMethod?: () => void;
+	/**
+	 * true allows adding custom values through the filter input
+	 */
+	allowCustomValues?: boolean;
+	/**
+	 * true emits custom values through the filter input instead of adding them automatically
+	 */
+	manualCustomValues?: boolean;
+	chipsView?: boolean;
+	labelProps?: object;
+	v?: Record<string, unknown>;
+	regleValidation?: RegleFieldStatus<string>;
+	customValidators?: unknown[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	filterable: true,
+	showClear: true,
+	options: () => [],
+	optionLabel: 'label',
+	dataKey: 'id',
+	labelProps: () => ({}),
+	customValidators: () => [],
+});
+
+const model = defineModel({
+	default: [],
+	get(value) {
+		return toArray(value);
+	},
+});
+
+const { t } = useI18n();
+
+const MAX_SELECTED_LABELS = 3;
+
+const selectId = `select-${Math.random().toString(36).slice(2, 11)}`;
+
+const filterInput = useTemplateRef('filterInput');
+const selectRef = useTemplateRef('selectRef');
+
+const emit = defineEmits<{
+	'add:custom-value': [
+		value: string,
+	];
+	reset: [];
+}>();
+
+const {
+	isLoading,
+	isDropdownOpen,
+	filterText,
+	filteredOptions,
+	getOptionLabel,
+	fetchOptions,
+	onDropdownBeforeShow,
+	onDropdownBeforeHide,
+	onDropdownShow,
+	onDropdownHide,
+	filterOptions,
+	onInputKeydown,
+	clearValue,
+} = useSelect({
+	selected: model,
+	options: computed(() => props.options),
+	optionLabel: computed(() => props.optionLabel),
+	optionValue: computed(() => props.optionValue),
+	dataKey: computed(() => props.dataKey),
+	allowCustomValues: computed(() => props.allowCustomValues),
+	manualCustomValues: computed(() => props.manualCustomValues),
+	filterInput,
+	selectRef,
+	searchMethod: computed(() => props.searchMethod),
+	selectId: computed(() => selectId),
+	isSingle: false,
+	emit,
+});
+
+const slots = useSlots();
+
+const { v, customValidators, regleValidation } = toRefs(props);
+
+const { isValidation, invalid, validationText, validationTextColor } =
+	useValidation({
+		v,
+		customValidators,
+		regleValidation,
+	});
+
+const hasLabel = computed(() => {
+	return props.label || slots.label;
+});
+
+const requiredLabel = computed(() => {
+	return props.required ? `${props.label}*` : props.label;
+});
+
+onMounted(() => {
+	if (props.searchMethod) fetchOptions();
+});
+</script>
+
+<style scoped>
+.wt-multi-select {
+  width: 100%;
+  min-width: 0;
+}
+
+.wt-multi-select__option-label {
+  user-select: none;
+}
+
+.wt-multi-select__option-checkbox {
+  pointer-events: none;
+}
+</style>

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

@@ -60,10 +60,9 @@ import {
 	useSlots,
 	useTemplateRef,
 } from 'vue';
-
-import { useInputControl } from '../../composables';
 import { ComponentSize, MessageColor, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import { useInputControl } from '../_internals/composables';
 
 interface WtPasswordProps extends /* @vue-ignore */ PasswordProps {
 	label?: string;

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

@@ -0,0 +1,229 @@
+<template>
+  <div class="wt-single-select">
+    <wt-label 
+      v-if="hasLabel" 
+      :disabled="disabled" 
+      :invalid="invalid" 
+      class="wt-select__label" 
+      v-bind="labelProps">
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">
+        {{ requiredLabel }}
+      </slot>
+    </wt-label>
+    <p-select
+      ref="selectRef"
+      v-model="model"
+      fluid
+      input-class="typo-body-1"
+      :invalid="invalid"
+      :id="selectId"
+      :show-clear="showClear"
+      :disabled="disabled"
+      :placeholder="placeholder || label"
+      :option-disabled="() => disabledOptions"
+      :options="filteredOptions"
+      :option-label="(option) => getOptionLabel(option)"
+      :option-value="optionValue"
+      :loading="isLoading"
+      :data-key="dataKey"
+      v-bind="$attrs"
+      @before-show="onDropdownBeforeShow"
+      @before-hide="onDropdownBeforeHide"
+      @show="onDropdownShow"
+      @hide="onDropdownHide"
+    >
+      <template #header>
+        <wt-input-text
+          v-if="filterable"
+          ref="filterInput"
+          :model-value="filterText"
+          @update:model-value="filterOptions($event)"
+          @keydown.enter.stop="onInputKeydown"
+        >
+          <template #suffix>
+            <wt-icon v-if="allowCustomValues && filterText" icon="select-custom-value-enter" />
+            <wt-icon icon="search" />
+          </template>
+        </wt-input-text>
+      </template>
+      <template v-if="model" #value="{ value, placeholder }">
+        <slot name="value" v-bind="{ value, getOptionLabel, placeholder }">
+          <span
+            v-tooltip="getOptionLabel(value)"
+          >
+            {{ getOptionLabel(value) || placeholder }}
+          </span>
+        </slot>
+      </template>
+      <template #option="{ option }">
+        <slot name="option" v-bind="{ option, getOptionLabel }">
+          <span
+            class="wt-single-select__option-label"
+            v-tooltip="getOptionLabel(option)"
+          >
+            {{ getOptionLabel(option) }}
+          </span>
+        </slot>
+      </template>
+      <template #clearicon>
+        <wt-icon-btn 
+          v-if="showClear && model"  
+          icon="close" 
+          @click="clearValue"
+        />
+      </template>
+      <template #dropdownicon>
+        <wt-icon :icon="isDropdownOpen ? 'arrow-up' : 'arrow-down'" />
+      </template>
+      <template #loadingicon>
+        <wt-loader :size="ComponentSize.SM" />
+      </template>
+    </p-select>
+    <wt-message
+      v-if="isValidation && validationText"
+      :color="validationTextColor"
+      :variant="MessageVariant.SIMPLE"
+      :size="ComponentSize.SM"
+    >
+      {{ validationText }}
+    </wt-message>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SelectProps } from 'primevue';
+import { computed, onMounted, toRefs, useSlots, useTemplateRef } from 'vue';
+import { ComponentSize, MessageColor, MessageVariant } from '../../enums';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
+import { useSelect } from '../_internals/composables/useSelect/useSelect';
+
+interface Props extends SelectProps {
+	label?: string;
+	placeholder?: string;
+	required?: boolean;
+	disabled?: boolean;
+	/**
+	 * true disables all options but keeps dropdown visible
+	 */
+	disabledOptions?: boolean;
+	/**
+	 * false disables options search
+	 */
+	filterable?: boolean;
+	/**
+	 * true shows the clear button
+	 */
+	showClear?: boolean;
+	options?: unknown[];
+	optionLabel?: string;
+	optionValue?: string;
+	/**
+	 * A property to uniquely identify an option.
+	 */
+	dataKey?: string;
+	/**
+	 * Function that returns filtered options for server-side search
+	 */
+	searchMethod?: () => void;
+	/**
+	 * true allows adding custom values through the filter input
+	 */
+	allowCustomValues?: boolean;
+	labelProps?: object;
+	v?: Record<string, unknown>;
+	regleValidation?: RegleFieldStatus<string>;
+	customValidators?: unknown[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	filterable: true,
+	showClear: true,
+	options: () => [],
+	optionLabel: 'label',
+	dataKey: 'id',
+	labelProps: () => ({}),
+	customValidators: () => [],
+});
+
+const model = defineModel<string>({
+	default: '',
+	get: (value) => {
+		if (value == null) return '';
+		if (typeof value !== 'object') return value;
+		return Object.keys(value).length > 0 ? value : '';
+	},
+});
+
+const emit = defineEmits<{
+	reset: [];
+}>();
+
+const selectId = `select-${Math.random().toString(36).slice(2, 11)}`;
+
+const filterInput = useTemplateRef('filterInput');
+const selectRef = useTemplateRef('selectRef');
+
+const {
+	isLoading,
+	isDropdownOpen,
+	filterText,
+	filteredOptions,
+	getOptionLabel,
+	fetchOptions,
+	onDropdownBeforeShow,
+	onDropdownBeforeHide,
+	onDropdownShow,
+	onDropdownHide,
+	filterOptions,
+	onInputKeydown,
+	clearValue,
+} = useSelect({
+	selected: model,
+	options: computed(() => props.options),
+	optionLabel: computed(() => props.optionLabel),
+	optionValue: computed(() => props.optionValue),
+	dataKey: computed(() => props.dataKey),
+	allowCustomValues: computed(() => props.allowCustomValues),
+	filterInput,
+	selectRef,
+	searchMethod: computed(() => props.searchMethod),
+	selectId: computed(() => selectId),
+	isSingle: true,
+	emit,
+});
+
+const slots = useSlots();
+
+const { v, customValidators, regleValidation } = toRefs(props);
+
+const { isValidation, invalid, validationText, validationTextColor } =
+	useValidation({
+		v,
+		customValidators,
+		regleValidation,
+	});
+
+const hasLabel = computed(() => {
+	return props.label || slots.label;
+});
+
+const requiredLabel = computed(() => {
+	return props.required ? `${props.label}*` : props.label;
+});
+
+onMounted(() => {
+	if (props.searchMethod) fetchOptions();
+});
+</script>
+
+<style scoped>
+.wt-single-select {
+  width: 100%;
+  min-width: 0;
+}
+
+.wt-single-select__option-label {
+  user-select: none;
+}
+</style>

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

@@ -228,9 +228,8 @@ import {
 	useTemplateRef,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
-
-import { useTableColumnDrag } from '../../composables';
 import { getNextSortOrder } from '../../scripts/sortQueryAdapters.js';
+import { useTableColumnDrag } from '../_internals/composables';
 import type { WtTableHeader } from './types/WtTable';
 
 /**

package/src/components/wt-tree-table/wt-tree-table.vue

@@ -100,9 +100,8 @@
   lang="ts"
 >
 import { computed, toRef } from 'vue';
-
-import { useWtTable } from '../../composables/useWtTable/useWtTable';
 import { getNextSortOrder } from '../../scripts/sortQueryAdapters';
+import { useWtTable } from '../_internals/composables/useWtTable/useWtTable';
 import WtCheckbox from '../wt-checkbox/wt-checkbox.vue';
 import type { WtTableHeader } from '../wt-table/types/WtTable.d.ts';
 import WtTreeTableRow from '../wt-tree-table-row/wt-tree-table-row.vue';

package/src/composables/index.ts

@@ -4,11 +4,5 @@ export * from './useCard/useCardComponent';
 export * from './useCard/useCardTabs';
 export * from './useClose/useClose';
 export * from './useDestroyableSortable/useDestroyableSortable';
-export * from './useExpansion/useExpansion';
-export * from './useGalleriaFullscreen/useGalleriaFullscreen';
-export * from './useGalleriaMaskClick/useGalleriaMaskClick';
-export * from './useInputControl/useInputControl';
 export * from './useRepresentableAgentPauseCause/useRepresentableAgentPauseCause';
-export * from './useTableColumnDrag/useTableColumnDrag';
 export * from './useValidate/useValidate';
-export * from './useWtTable/useWtTable';

package/src/locale/en/en.js

@@ -845,6 +845,9 @@ export default deepmerge(
 					},
 				},
 			},
+			select: {
+				selectedItemsLabel: 'items selected',
+			},
 		},
 		systemNotifications: {
 			success: {

package/src/locale/es/es.js

@@ -832,6 +832,9 @@ export default {
 			},
 		},
 	},
+	select: {
+		selectedItemsLabel: 'elementos seleccionados',
+	},
 	systemNotifications: {
 		success: {
 			update: ({ named }) =>

package/src/locale/kz/kz.js

@@ -835,6 +835,9 @@ export default {
 			},
 		},
 	},
+	select: {
+		selectedItemsLabel: 'элемент таңдалды',
+	},
 	systemNotifications: {
 		success: {
 			update: ({ named }) => `${named('entity').toLowerCase()} жаңартылды`,

package/src/locale/pl/pl.js

@@ -834,6 +834,9 @@ export default {
 			},
 		},
 	},
+	select: {
+		selectedItemsLabel: 'elementów wybranych',
+	},
 	systemNotifications: {
 		success: {
 			update: ({ named }) =>

package/src/locale/ro/ro.js

@@ -839,6 +839,9 @@ export default {
 			},
 		},
 	},
+	select: {
+		selectedItemsLabel: 'elemente selectate',
+	},
 	systemNotifications: {
 		success: {
 			update: ({ named }) =>

package/src/locale/ru/ru.js

@@ -830,6 +830,9 @@ export default {
 			},
 		},
 	},
+	select: {
+		selectedItemsLabel: 'элементов выбрано',
+	},
 	systemNotifications: {
 		success: {
 			update: ({ named }) => `${named('entity')} был обновлён`,

package/src/locale/uk/uk.js

@@ -829,6 +829,9 @@ export default {
 			},
 		},
 	},
+	select: {
+		selectedItemsLabel: 'елементів вибрано',
+	},
 	systemNotifications: {
 		success: {
 			update: ({ named }) => `${named('entity')} було оновлено`,

package/src/locale/uz/uz.js

@@ -838,6 +838,9 @@ export default {
 			},
 		},
 	},
+	select: {
+		selectedItemsLabel: 'ta element tanlandi',
+	},
 	systemNotifications: {
 		success: {
 			update: ({ named }) => `${named('entity').toLowerCase()} yangilandi`,

package/src/locale/vi/vi.js

@@ -837,6 +837,9 @@ export default {
 			},
 		},
 	},
+	select: {
+		selectedItemsLabel: 'mục đã chọn',
+	},
 	systemNotifications: {
 		success: {
 			update: ({ named }) =>

package/src/plugins/primevue/primevue.plugin.js

@@ -17,9 +17,11 @@ import PInputNumber from 'primevue/inputnumber';
 import PInputText from 'primevue/inputtext';
 import PMenubar from 'primevue/menubar';
 import PMessage from 'primevue/message';
+import PMultiSelect from 'primevue/multiselect';
 import PPassword from 'primevue/password';
 import PPopover from 'primevue/popover';
 import PRadio from 'primevue/radiobutton';
+import PSelect from 'primevue/select';
 import PSlider from 'primevue/slider';
 import PTextarea from 'primevue/textarea';
 import PToggleSwitch from 'primevue/toggleswitch';
@@ -80,6 +82,8 @@ const initPrimevue = (app) => {
 		changeComponentCompatMode(PInputGroupAddon),
 	);
 	app.component('PMessage', changeComponentCompatMode(PMessage));
+	app.component('PMultiSelect', changeComponentCompatMode(PMultiSelect));
+	app.component('PSelect', changeComponentCompatMode(PSelect));
 
 	app.directive('tooltip', Tooltip);
 };

package/src/plugins/primevue/theme/components/checkbox/checkbox.js

@@ -6,7 +6,7 @@ const checkbox = {
 
 	css: ({ dt }) => `
         .p-checkbox {
-          width: ${dt('checkbox.root.wrapperWidth')};
+          min-width: ${dt('checkbox.root.wrapperWidth')};
           height: ${dt('checkbox.root.wrapperHeight')};
           align-items: center;
           justify-content: center;

package/src/plugins/primevue/theme/components/components.js

@@ -13,9 +13,11 @@ import inputNumber from './input-number/input-number.js';
 import inputText from './input-text/input-text.js';
 import menubar from './menubar/menubar.js';
 import message from './message/message.js';
+import multiSelect from './multi-select/multi-select.js';
 import password from './password/password.js';
 import popover from './popover/popover.js';
 import radio from './radio/radio.js';
+import singleSelect from './single-select/single-select.js';
 import slider from './slider/slider.js';
 import switcher from './switcher/switcher.js';
 import table from './table/table.js';
@@ -48,6 +50,8 @@ const components = {
 	datatable: table,
 	toolbar,
 	galleria,
+	multiselect: multiSelect,
+	select: singleSelect,
 };
 
 export default components;