@webitel/ui-sdk 26.6.27 → 26.6.29

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

@@ -21,13 +21,13 @@
       :invalid="invalid"
       :id="selectId"
       :show-clear="showClear"
+      :focus-on-hover="false"
       :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"
@@ -46,7 +46,9 @@
         <wt-input-text
           v-if="filterable"
           ref="filterInput"
+          class="wt-multi-select__input"
           :model-value="filterText"
+          :size="ComponentSize.SM"
           @update:model-value="filterOptions($event)"
           @keydown.enter.stop="onInputKeydown"
         >
@@ -92,6 +94,11 @@
           {{ getOptionLabel(value) }}
         </wt-chip>
       </template>
+      <template #footer v-if="showFooterLoader">
+        <div class="wt-multi-select__footer">
+          <wt-loader :size="ComponentSize.SM" />
+        </div>
+      </template>
     </p-multi-select>
     <wt-message
       v-if="isValidation && validationText"
@@ -190,7 +197,7 @@ const emit = defineEmits<{
 }>();
 
 const {
-	isLoading,
+	showFooterLoader,
 	isDropdownOpen,
 	filterText,
 	filteredOptions,
@@ -256,4 +263,20 @@ onMounted(() => {
 .wt-multi-select__option-checkbox {
   pointer-events: none;
 }
+
+.wt-multi-select__input {
+  padding: var(--spacing-xs);
+}
+
+.wt-multi-select__footer {
+  position: absolute;
+  width: 100%;
+  transform: translateY(-100%);
+  background: var(--p-multiselect-overlay-background);
+  border-bottom-left-radius: var(--p-multiselect-overlay-border-radius);
+  border-bottom-right-radius: var(--p-multiselect-overlay-border-radius);
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-xs) 0;
+}
 </style>

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

@@ -19,13 +19,13 @@
       :invalid="invalid"
       :id="selectId"
       :show-clear="showClear"
+      :focus-on-hover="false"
       :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"
@@ -37,7 +37,9 @@
         <wt-input-text
           v-if="filterable"
           ref="filterInput"
+          class="wt-single-select__input"
           :model-value="filterText"
+          :size="ComponentSize.SM"
           @update:model-value="filterOptions($event)"
           @keydown.enter.stop="onInputKeydown"
         >
@@ -79,6 +81,11 @@
       <template #loadingicon>
         <wt-loader :size="ComponentSize.SM" />
       </template>
+      <template #footer v-if="showFooterLoader">
+        <div class="wt-single-select__footer">
+          <wt-loader :size="ComponentSize.SM" />
+        </div>
+      </template>
     </p-select>
     <wt-message
       v-if="isValidation && validationText"
@@ -165,7 +172,7 @@ const filterInput = useTemplateRef('filterInput');
 const selectRef = useTemplateRef('selectRef');
 
 const {
-	isLoading,
+	showFooterLoader,
 	isDropdownOpen,
 	filterText,
 	filteredOptions,
@@ -226,4 +233,20 @@ onMounted(() => {
 .wt-single-select__option-label {
   user-select: none;
 }
+
+.wt-single-select__input {
+  padding: var(--spacing-xs);
+}
+
+.wt-single-select__footer {
+  position: absolute;
+  width: 100%;
+  transform: translateY(-100%);
+  background: var(--p-select-overlay-background);
+  border-bottom-left-radius: var(--p-select-overlay-border-radius);
+  border-bottom-right-radius: var(--p-select-overlay-border-radius);
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-xs) 0;
+}
 </style>

package/src/plugins/primevue/theme/components/input-group/input-group.js

@@ -27,13 +27,37 @@ const inputGroup = {
                   box-shadow ${dt('inputtext.transition.duration')};
     }
 
+    .p-inputgroup:has(.p-inputtext-sm) .p-inputgroupaddon {
+      font-size: var(--p-inputtext-sm-font-size);
+      padding-top: var(--p-inputtext-sm-padding-y);
+      padding-bottom: var(--p-inputtext-sm-padding-y);
+      padding-left: var(--p-inputtext-sm-padding-x);
+      padding-right: var(--p-inputtext-sm-padding-x);
+    }
+
+    .p-inputgroup:has(.p-inputtext-lg) .p-inputgroupaddon {
+      font-size: var(--p-inputtext-lg-font-size);
+      padding-top: var(--p-inputtext-lg-padding-y);
+      padding-bottom: var(--p-inputtext-lg-padding-y);
+      padding-left: var(--p-inputtext-lg-padding-x);
+      padding-right: var(--p-inputtext-lg-padding-x);
+    }
+
     .p-inputtext ~ .p-inputgroupaddon,
-    *:has(.p-inputtext) ~ .p-inputgroupaddon {
+    *:has(.p-inputtext) ~ .p-inputgroupaddon,
+    .p-inputgroup:has(.p-inputtext-sm) .p-inputtext ~ .p-inputgroupaddon,
+    .p-inputgroup:has(.p-inputtext-sm) *:has(.p-inputtext) ~ .p-inputgroupaddon,
+    .p-inputgroup:has(.p-inputtext-lg) .p-inputtext ~ .p-inputgroupaddon,
+    .p-inputgroup:has(.p-inputtext-lg) *:has(.p-inputtext) ~ .p-inputgroupaddon {
       padding-left: 0;
     }
 
     .p-inputgroupaddon:has(~ .p-inputtext),
-    .p-inputgroupaddon:has(~ * .p-inputtext) {
+    .p-inputgroupaddon:has(~ * .p-inputtext),
+    .p-inputgroup:has(.p-inputtext-sm) .p-inputgroupaddon:has(~ .p-inputtext),
+    .p-inputgroup:has(.p-inputtext-sm) .p-inputgroupaddon:has(~ * .p-inputtext),
+    .p-inputgroup:has(.p-inputtext-lg) .p-inputgroupaddon:has(~ .p-inputtext),
+    .p-inputgroup:has(.p-inputtext-lg) .p-inputgroupaddon:has(~ * .p-inputtext) {
       padding-right: 0;
     }
 

package/types/components/_internals/composables/useSelect/useSelect.d.ts

@@ -14,6 +14,7 @@ export declare const useSelect: ({ selected, options, optionLabel, optionValue,
     emit?: () => void;
 }) => {
     isLoading: import("vue").Ref<boolean, boolean>;
+    showFooterLoader: import("vue").Ref<boolean, boolean>;
     isDropdownOpen: import("vue").Ref<boolean, boolean>;
     filterText: import("vue").Ref<string, string>;
     filteredOptions: import("vue").Ref<any, any>;

package/types/components/_internals/composables/useSelect/useSelectLoader.d.ts

@@ -0,0 +1,4 @@
+import { type Ref } from 'vue';
+export declare const useSelectLoader: (isLoading: Ref<boolean>) => {
+    showFooterLoader: Ref<boolean, boolean>;
+};

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

@@ -4,6 +4,7 @@ interface WtInputTextProps extends /* @vue-ignore */ InputTextProps {
     label?: string;
     labelProps?: Record<string, unknown>;
     type?: string;
+    size?: string | null;
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
@@ -39,6 +40,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     label: string;
     disabled: boolean;
+    size: string | null;
     placeholder: string;
     customValidators: unknown[];
     v: Record<string, unknown>;