@webitel/ui-sdk 0.9.41 → 0.9.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.41",
+  "version": "0.9.45",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -39,7 +39,7 @@ export default {
 
 <style lang="scss" scoped>
 .wt-context-menu {
-  @extend %typo-body-sm;
+  @extend %typo-body-md;
   min-width: var(--context-menu-min-width);
   max-width: var(--context-menu-max-width);
   background-color: var(--context-menu-background-color);

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

@@ -25,6 +25,7 @@
         :class="{
           'wt-input--is-password': isPassword,
         }"
+        ref="wt-input"
         :value="value"
         :type="inputType"
         :placeholder="placeholder || label"
@@ -33,20 +34,28 @@
         :max="numberMax"
         v-on="listeners"
       >
-      <slot
-        v-if="isPassword"
-        name="show-password"
-        v-bind="{
+      <div
+        class="wt-input__after-wrapper"
+        ref="after-wrapper"
+      >
+        <slot
+          name="after-input"
+        ></slot>
+        <slot
+          v-if="isPassword"
+          name="show-password"
+          v-bind="{
           isPasswordVisible,
           switchVisibilityPassword,
         }"
-      >
-        <wt-icon-btn
-          class="wt-input__password-button"
-          :icon="showPasswordIcon"
-          @click.native="switchVisibilityPassword"
-        ></wt-icon-btn>
-      </slot>
+        >
+          <wt-icon-btn
+            class="wt-input__password-button"
+            :icon="showPasswordIcon"
+            @click.native="switchVisibilityPassword"
+          ></wt-icon-btn>
+        </slot>
+      </div>
     </div>
     <wt-input-info
       v-if="isValidation"
@@ -57,9 +66,9 @@
 </template>
 
 <script>
-  import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../../mixins/validationMixin/validationMixin';
 
-  export default {
+export default {
     name: 'wt-input',
     mixins: [validationMixin],
     props: {
@@ -207,8 +216,19 @@
         this.isPasswordVisible = !this.isPasswordVisible;
         this.inputType = this.isPasswordVisible ? 'text' : 'password';
       },
+
+      updateInputPaddings() {
+        const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
+        const inputEl = this.$refs['wt-input'];
+        const defaultInputPadding = parseInt(getComputedStyle(document.documentElement)
+          .getPropertyValue('--input-padding'), 10);
+        inputEl.style.paddingRight = `${defaultInputPadding + afterWrapperWidth + defaultInputPadding}px`;
+      },
     },
-  };
+    mounted() {
+      this.updateInputPaddings();
+    },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -298,19 +318,24 @@
     }
   }
 
-  .wt-input__password-button {
+  .wt-input__after-wrapper {
+    display: flex;
+    gap: var(--input-after-wrapper-gap);
+    align-items: center;
     position: absolute;
     top: 50%;
     right: var(--input-icon-margin);
     transform: translateY(-50%);
 
-    .wt-input--disabled & ::v-deep .wt-icon__icon {
-      fill: var(--icon-color-disabled);
-    }
+    .wt-input__password-button {
+      .wt-input--disabled & ::v-deep .wt-icon__icon {
+        fill: var(--icon-color-disabled);
+      }
 
-    .wt-input:hover & ::v-deep .wt-icon__icon,
-    .wt-input:focus-within & ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
+      .wt-input:hover & ::v-deep .wt-icon__icon,
+      .wt-input:focus-within & ::v-deep .wt-icon__icon {
+        fill: var(--icon-color--hover);
+      }
     }
   }
 </style>

package/src/css/components/molecules/wt-input/_variables.scss

@@ -3,4 +3,6 @@
   --input-padding: 9px;
   --input-border: 1px solid;
   --input-icon-margin: 10px;
+
+  --input-after-wrapper-gap: var(--spacing--xs);
 }

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -1,6 +1,6 @@
 <template>
   <wt-select
-    :value="filterSchema.value"
+    :value="value"
     :options="localizedOptions"
     :label="$t(filterSchema.locale.label)"
     :track-by="filterSchema.storedProp"

package/src/modules/QueryFilters/mixins/enumFilterMixin.js

@@ -33,11 +33,11 @@ export default {
     restoreValue(value) {
       let newValue;
       if (Array.isArray(value)) {
-        newValue = this.options
+        newValue = this.localizedOptions
           .filter((option) => value
             .some((value) => value === option[this.storedProp]));
       } else {
-        newValue = this.options
+        newValue = this.localizedOptions
           .find((option) => value === option[this.storedProp]);
       }
       this.setValue({ filter: this.filterQuery, value: newValue });