plugin-ui-for-kzt 0.0.17 → 0.0.19

package/src/components/BaseButton/BaseButton.vue

@@ -159,10 +159,6 @@ const classList = computed(() => [
         color: var(--primary-black-white);
         background: var(--primary-blue);
 
-        i,svg {
-            color: var(--primary-black-white) !important;
-        }
-
         @include hover {
             background: var(--primary-blue-800);
         }
@@ -180,10 +176,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--primary-blue-100);
             background: var(--primary-blue-300);
-
-            i,svg {
-                color: var(--primary-blue-100) !important;
-            }
         }
     }
 
@@ -191,10 +183,6 @@ const classList = computed(() => [
         color: var(--primary-black-800);
         background: var(--primary-black-200);
 
-        i,svg {
-            color: var(--primary-black-800) !important;
-        }
-
         @include hover {
             color: var(--primary-black-900);
             background: var(--primary-black-300);
@@ -213,10 +201,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--primary-black-400);
             background: var(--primary-black-100);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -225,18 +209,10 @@ const classList = computed(() => [
         background: transparent;
         border: 1px solid var(--primary-black-400);
 
-        i,svg {
-            color: var(--primary-black-600) !important;
-        }
-
         @include hover {
             color: var(--primary-black-700);
             text-decoration: none;
             border: 1px solid var(--primary-black-500);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include pressed {
@@ -254,10 +230,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--primary-black-400);
             border: 1px solid var(--primary-black-300);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -266,18 +238,10 @@ const classList = computed(() => [
         background: transparent;
         border: 1px solid var(--primary-blue);
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--primary-blue-800);
             text-decoration: none;
             border: 1px solid var(--primary-blue-800);
-
-            i,svg {
-                color: var(--primary-blue-800) !important;
-            }
         }
 
         @include pressed {
@@ -294,10 +258,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--primary-black-400);
             border: 1px solid var(--primary-black-300);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -305,17 +265,9 @@ const classList = computed(() => [
         color: var(--primary-black-600);
         background: transparent;
 
-        i,svg {
-            color: var(--primary-black-600) !important;
-        }
-
         @include hover {
             color: var(--primary-black-700);
             background: var(--primary-black-100);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include pressed {
@@ -332,10 +284,6 @@ const classList = computed(() => [
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -343,18 +291,10 @@ const classList = computed(() => [
         color: var(--primary-blue);
         background: transparent;
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--primary-blue-900);
             text-decoration: none;
             background: var(--primary-blue-100);
-
-            i,svg {
-                color: var(--primary-blue-900) !important;
-            }
         }
 
         @include pressed {
@@ -371,10 +311,6 @@ const classList = computed(() => [
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -384,24 +320,12 @@ const classList = computed(() => [
         background: transparent;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--primary-blue) !important;
-        }
-
         @include hover {
             color: var(--secondary-text-link-hover);
-
-            i,svg {
-                color: var(--primary-blue-700) !important;
-            }
         }
 
         @include pressed {
             color: var(--secondary-text-link-pressed);
-
-            i,svg {
-                color: var(--primary-blue-700) !important;
-            }
         }
 
         @include focused {
@@ -413,10 +337,6 @@ const classList = computed(() => [
 
         @include is-disabled-state {
             color: var(--secondary-text-link-disabled);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -426,24 +346,12 @@ const classList = computed(() => [
         background: transparent;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--error-red) !important;
-        }
-
         @include hover {
             color: var(--error-red-light-01);
-
-            i,svg {
-                color: var(--error-red-light-01) !important;
-            }
         }
 
         @include pressed {
             color: var(--error-red-deep);
-
-            i,svg {
-                color: var(--error-red-deep) !important;
-            }
         }
 
         @include focused {
@@ -455,10 +363,6 @@ const classList = computed(() => [
 
         @include is-disabled-state {
             color: var(--primary-black-400);
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 
@@ -468,24 +372,12 @@ const classList = computed(() => [
         text-decoration: underline;
         padding: var(--corner-radius-xxs);
 
-        i,svg {
-            color: var(--primary-black) !important;
-        }
-
         @include hover {
             color: var(--secondary-text-gray-link-hover);
-
-            i,svg {
-                color: var(--primary-black-500) !important;
-            }
         }
 
         @include pressed {
             color: var(--secondary-text-gray-link-pressed);
-
-            i,svg {
-                color: var(--primary-black-700) !important;
-            }
         }
 
         @include focused {
@@ -498,10 +390,6 @@ const classList = computed(() => [
         @include is-disabled-state {
             color: var(--secondary-text-gray-link-disabled);
             border-bottom: none;
-
-            i,svg {
-                color: var(--primary-black-400) !important;
-            }
         }
     }
 }

package/src/components/BaseInput/BaseInput.vue

@@ -24,9 +24,11 @@
         </div>
       </div>
 
-      <div v-if="(error && typeof error === 'string') || hint" class="base-input__hint">
-        {{ error || hint }}
-      </div>
+      <transition name="error">
+        <div v-if="(error && typeof error === 'string') || hint" class="base-input__hint">
+          {{ error || hint }}
+        </div>
+      </transition>
     </label>
     </div>
 </template>
@@ -83,7 +85,7 @@ function handleInput(event: Event) {
 @import '../../styles/root';
 
   .base-input {
-    width: max-content;
+    width: 100%;
     $input: &;
 
     &__wrapper {
@@ -91,12 +93,12 @@ function handleInput(event: Event) {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      width: fit-content;
+      width: 100%;
     }
 
     &__field {
       flex: 1;
-      width: auto;
+      width: 100%;
       height: 100%;
       color: var(--primary-text-primary);
       background: var(--bg-light);
@@ -132,6 +134,10 @@ function handleInput(event: Event) {
       color: var(--primary-black-500);
     }
 
+    &__hint {
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+
     @include is-disabled-state {
       #{$input}__icon--right {
         color: var(--primary-black-400);
@@ -152,6 +158,7 @@ function handleInput(event: Event) {
       display: flex;
       flex-direction: column;
       gap: 6px;
+      width: 100%;
     }
 
     &__label-text {
@@ -298,4 +305,15 @@ function handleInput(event: Event) {
       }
     }
   }
+  .error-enter-active,
+  .error-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .error-enter-from,
+  .error-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+    max-height: 0;
+  }
 </style>

package/src/components/BaseInputCurrency/BaseInputCurrency.vue

@@ -1,32 +1,31 @@
 <template>
-<div :class="classList">
-    <div class="base-input-currency__wrapper">
-    <div class="base-input-currency__input-container">
-        <span class="base-input-currency__symbol">{{ selectedOption.symbol }}</span>
-        <base-input
-        id="input-currency"
-        type="text"
-        :modelValue="modelValue"
-        v-bind="componentAttrs"
-        v-maska
-        :data-maska="selectedOption.mask"
-        :size="size"
-        :placeholder="placeholder || '0.00'"
-        class="base-input-currency__input"
-        @update:modelValue="handleInput"
-        ></base-input>
+    <div :class="classList">
+        <div class="base-input-currency__wrapper">
+            <div class="base-input-currency__input-container">
+                <span class="base-input-currency__symbol">{{ selectedOption.symbol }}</span>
+                <base-input
+                    id="input-currency"
+                    type="text"
+                    :modelValue="modelValue"
+                    v-bind="componentAttrs"
+                    v-maska
+                    :data-maska="selectedOption.mask"
+                    :size="size"
+                    :placeholder="placeholder || '0.00'"
+                    class="base-input-currency__input"
+                    @update:modelValue="handleInput"
+                ></base-input>
+            </div>
+            <base-select
+                id="select-currency"
+                v-model="selectedOptionId"
+                :options="optionsCurrency"
+                :size="size"
+                :error="error"
+                class="base-input-currency__select"
+            />
+        </div>
     </div>
-    <base-select
-        id="select-currency"
-        v-model="selectedOptionId"
-        :options="optionsCurrency"
-        :size="size"
-        :error="error"
-        class="base-input-currency__select"
-    >
-    </base-select>
-    </div>
-</div>
 </template>
 
 <script setup lang="ts">
@@ -39,21 +38,21 @@ import { useKitSize } from '../../composables/kit/size';
 import type { ICoreInputProps } from '../../types/input';
 
 const props = withDefaults(defineProps<ICoreInputProps>(), {
-size: 'medium',
-type: 'text',
-modelValue: '',
-placeholder: '0.00',
-error: '',
-hint: '',
+    size: 'medium',
+    type: 'text',
+    modelValue: '',
+    placeholder: '0.00',
+    error: '',
+    hint: '',
 });
 
 const emit: (event: 'update:modelValue', value: string) => void = defineEmits();
 
 const optionsCurrency = ref([
-{ id: '1', name: 'KZT', value: 'kzt', mask: '# ##0.##', symbol: '₸' },
-{ id: '2', name: 'RUB', value: 'rub', mask: '# ##0.##', symbol: '₽' },
-{ id: '3', name: 'KGS', value: 'kgs', mask: '# ##0.##', symbol: '⃀' },
-{ id: '4', name: 'UZS', value: 'uzs', mask: '# ##0.##', symbol: 'сў' },
+    { id: '1', name: 'KZT', value: 'kzt', mask: '# ##0.##', symbol: '₸' },
+    { id: '2', name: 'RUB', value: 'rub', mask: '# ##0.##', symbol: '₽' },
+    { id: '3', name: 'KGS', value: 'kgs', mask: '# ##0.##', symbol: '⃀' },
+    { id: '4', name: 'UZS', value: 'uzs', mask: '# ##0.##', symbol: 'сў' },
 ]);
 
 const selectedOption = ref(optionsCurrency.value[0]);
@@ -61,10 +60,10 @@ const selectedOption = ref(optionsCurrency.value[0]);
 const selectedOptionId = ref(selectedOption.value.id);
 
 watch(selectedOptionId, (newId) => {
-const newOption = optionsCurrency.value.find((option) => option.id === newId);
-if (newOption) {
-    selectedOption.value = newOption;
-}
+    const newOption = optionsCurrency.value.find((option) => option.id === newId);
+    if (newOption) {
+        selectedOption.value = newOption;
+    }
 });
 
 const { stateClassList, stateAttrs } = useKitState(props);
@@ -72,27 +71,30 @@ const { sizeClassList } = useKitSize(props);
 const attrs = useAttrs();
 
 const componentAttrs = computed(() => ({
-...attrs,
-...stateAttrs.value,
-label: props.label,
-error: props.error,
-hint: props.hint,
-placeholder: props.placeholder,
+    ...attrs,
+    ...stateAttrs.value,
+    label: props.label,
+    error: props.error,
+    hint: props.hint,
+    placeholder: props.placeholder,
 }));
 
 const classList = computed(() => [
-stateClassList.value,
-sizeClassList.value,
-'base-input-currency',
+    stateClassList.value,
+    sizeClassList.value,
+    'base-input-currency',
+    {
+        '--is-has-hint': !!props.hint,
+    }
 ]);
 
 const modelValue = computed({
-get: () => props.modelValue,
-set: (value) => emit('update:modelValue', value),
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value),
 });
 
 const handleInput = (value: string) => {
-emit('update:modelValue', value);
+    emit('update:modelValue', value);
 };
 </script>
 
@@ -151,13 +153,26 @@ width: 100%;
 }
 
 &.--small-size {
+    &.--is-has-hint {
+        #{$input} {
+            &__select {
+                margin-bottom: 26px;
+            }
+        }
+    }
+
     #{$input} {
         :deep(.base-select) {
             width: 71px;
         }
+
         &__symbol {
             font-size: var(--typography-text-s-regular);
         }
+
+        &.--is-error {
+            margin-bottom: 26px;
+        }
     }
 
     :deep(.base-input__field) {
@@ -166,13 +181,26 @@ width: 100%;
 }
 
 &.--medium-size {
+    &.--is-has-hint {
+        #{$input} {
+            &__select {
+                margin-bottom: 26px;
+            }
+        }
+    }
+
     #{$input} {
         :deep(.base-select) {
             width: 75px;
         }
+
         &__symbol {
             font-size: var(--typography-text-m-regular);
         }
+
+        &.--is-error {
+            margin-bottom: 26px;
+        }
     }
 
     :deep(.base-input__field) {
@@ -181,13 +209,26 @@ width: 100%;
 }
 
 &.--large-size {
+    &.--is-has-hint {
+        #{$input} {
+            &__select {
+                margin-bottom: 30px;
+            }
+        }
+    }
+
     #{$input} {
         :deep(.base-select) {
             width: 87px;
         }
+
         &__symbol {
             font-size: var(--typography-text-l-regular);
         }
+
+        &.--is-error {
+            margin-bottom: 30px;
+        }
     }
 
     :deep(.base-input__field) {

package/src/components/BaseInputPhone/BaseInputPhone.vue

@@ -90,6 +90,9 @@ const classList = computed(() => [
     stateClassList.value,
     sizeClassList.value,
     'base-input-phone',
+    {
+        '--is-has-hint': !!props.hint,
+    }
 ]);
 
 const modelValue = computed({
@@ -140,10 +143,24 @@ const handleInput = (value: string) => {
     }
 
     &.--small-size {
+        &.--is-has-hint {
+            #{$input} {
+                &__select {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+
         #{$input} {
             :deep(.base-select) {
                 width: 71px;
             }
+
+            &__select {
+                &.--is-error {
+                    margin-bottom: 26px;
+                }
+            }
         }
         :deep(.base-input__label-text), 
         :deep(.base-input__hint) {
@@ -152,9 +169,21 @@ const handleInput = (value: string) => {
     }
 
     &.--medium-size {
+        &.--is-has-hint {
+            #{$input} {
+                &__select {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+
         #{$input} {
             &__select {
                 width: 75px;
+
+                &.--is-error {
+                    margin-bottom: 26px;
+                }
             }
         }
 
@@ -165,9 +194,21 @@ const handleInput = (value: string) => {
     }
 
     &.--large-size {
+        &.--is-has-hint {
+            #{$input} {
+                &__select {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+
         #{$input} {
             &__select {
                 width: 87px;
+
+                &.--is-error {
+                    margin-bottom: 30px;
+                }
             }
         }