plugin-ui-for-kzt 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/BaseDropdown/BaseDropdown.vue

@@ -126,6 +126,7 @@ const classList = computed(() => [
   @import '../../styles/root';
 
 .dropdown {
+  height: 100%;
     &__wrapper {
         position: relative;
         width: 100%;
@@ -135,6 +136,7 @@ const classList = computed(() => [
     &__top {
         cursor: pointer;
         outline: none;
+      height: 100%;
     }
 
     &__dropdown {

package/src/components/BaseField/BaseField.vue

@@ -1,21 +1,21 @@
 <template>
-    <div class="base-field" :class="classList">
-        <label class="base-field__label" :for="id">
-            <span v-if="label" class="base-field__label-text">{{ label }}</span>
-            <div class="base-field__wrapper" :class="{ 'base-field__wrapper--focusable': focusable}" :tabindex="tabIndex">
-                <slot :data="componentAttrs" />
-            </div>
-            <transition name="error">
-                <div 
-                    v-if="(error && typeof error === 'string') || hint" 
-                    class="base-field__hint"
-                    aria-live="polite"
-                >
-                    {{ error || hint }}
-                </div>
-            </transition>
-        </label>
-    </div>
+  <div class="base-field" :class="classList">
+    <label class="base-field__label" :for="id">
+      <span v-if="label" class="base-field__label-text">{{ label }}</span>
+      <div class="base-field__wrapper" :class="{ 'base-field__wrapper--focusable': focusable}" :tabindex="tabIndex">
+        <slot :data="componentAttrs"/>
+      </div>
+      <transition name="error">
+        <div
+            v-if="(error && typeof error === 'string') || hint"
+            class="base-field__hint"
+            aria-live="polite"
+        >
+          {{ error || hint }}
+        </div>
+      </transition>
+    </label>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -26,43 +26,43 @@ import { useKitState } from '../../composables/kit/state';
 import type { TFieldProps } from '../../types/field';
 
 interface IDefaultSlotProps {
-    id: string;
-    error?: string;
-    size?: string;
-    focusable?: boolean;
+  id: string;
+  error?: string;
+  size?: string;
+  focusable?: boolean;
 }
 
-const props = withDefaults(defineProps<TFieldProps>(), {
-    size: 'medium',
-    id: '',
-    label: '',
-    hint: '',
-    error: '',
-    focusable: true,
-    tabIndex: 0,
-});
+const props = withDefaults( defineProps<TFieldProps>(), {
+  size: 'medium',
+  id: '',
+  label: '',
+  hint: '',
+  error: '',
+  focusable: true,
+  tabIndex: 0,
+} );
 
 defineEmits<{
-    (event: 'update:modelValue', value: string): void;
-    (event: 'error', value: string): void;
+  ( event: 'update:modelValue', value: string ): void;
+  ( event: 'error', value: string ): void;
 }>();
 
 const attrs = useAttrs();
-const { stateAttrs } = useKitState(props);
-const { sizeClassList } = useKitSize(props);
-
-const componentAttrs = computed<IDefaultSlotProps>(() => ({
-    ...(attrs || {}),
-    ...(stateAttrs.value || {}),
-    id: props.id,
-    error: props.error,
-    size: props.size,
-}));
-
-const classList = computed(() => [
-    ...sizeClassList.value,
-    { '--is-error': props.error && typeof props.error === 'string' },
-]);
+const { stateAttrs } = useKitState( props );
+const { sizeClassList } = useKitSize( props );
+
+const componentAttrs = computed<IDefaultSlotProps>( () => ({
+  ...(attrs || {}),
+  ...(stateAttrs.value || {}),
+  id: props.id,
+  error: props.error,
+  size: props.size,
+}) );
+
+const classList = computed( () => [
+  ...sizeClassList.value,
+  { '--is-error': props.error && typeof props.error === 'string' },
+] );
 </script>
 
 <style scoped lang="scss">
@@ -70,115 +70,117 @@ const classList = computed(() => [
 @import '../../styles/root';
 
 .base-field {
+  width: 100%;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    transition: all var(--transition);
+
+    &--focusable {
+      @include focused {
+        border: 1px solid var(--primary-blue-500);
+        outline: 4px solid var(--effects-primary-focus);
+      }
+    }
+  }
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
     width: 100%;
+    height: 100%;
+  }
 
-    &__wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        position: relative;
-        transition: all var(--transition);
-
-        &--focusable {
-            @include focused {
-                border: 1px solid var(--primary-blue-500);
-                outline: 4px solid var(--effects-primary-focus);
-            }
+  &__label-text {
+    color: var(--primary-text-primary);
+  }
+
+  &__hint {
+    color: var(--primary-text-secondary);
+    overflow: hidden;
+    max-height: 100px;
+    transition: all 0.3s ease;
+  }
+
+  &.--is-error {
+    .base-field__wrapper {
+      &--focusable {
+        @include focused {
+          border: none;
+          outline: 4px solid var(--effects-error-focus);
         }
+      }
     }
 
-    &__label {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        width: 100%;
+    .base-field__hint {
+      color: var(--error-red);
     }
+  }
 
-    &__label-text {
-        color: var(--primary-text-primary);
+  &.--small-size {
+    .base-field__wrapper {
+      border-radius: 10px;
     }
 
-    &__hint {
-        color: var(--primary-text-secondary);
-        overflow: hidden;
-        max-height: 100px;
-        transition: all 0.3s ease;
+    .base-field__label-text {
+      font: var(--typography-text-s-medium);
     }
 
-    &.--is-error {
-        .base-field__wrapper {
-            &--focusable {
-                @include focused {
-                    border: none;
-                    outline: 4px solid var(--effects-error-focus);
-                }
-            }
-        }
-
-        .base-field__hint {
-            color: var(--error-red);
-        }
+    .base-field__hint {
+      font: var(--typography-text-s-regular);
     }
+  }
 
-    &.--small-size {
-        .base-field__wrapper {
-            border-radius: 10px;
-        }
-
-        .base-field__label-text {
-            font: var(--typography-text-s-medium);
-        }
-
-        .base-field__hint {
-            font: var(--typography-text-s-regular);
-        }
+  &.--medium-size {
+    .base-field__wrapper {
+      border-radius: 12px;
+      height: 100%;
     }
 
-    &.--medium-size {
-        .base-field__wrapper {
-            border-radius: 12px;
-        }
-
-        .base-field__label-text {
-            font: var(--typography-text-s-medium);
-        }
+    .base-field__label-text {
+      font: var(--typography-text-s-medium);
+    }
 
-        .base-field__hint {
-            font: var(--typography-text-s-regular);
-        }
+    .base-field__hint {
+      font: var(--typography-text-s-regular);
     }
+  }
 
-    &.--large-size {
-        .base-field__wrapper {
-            border-radius: 12px;
-        }
+  &.--large-size {
+    .base-field__wrapper {
+      border-radius: 12px;
+    }
 
-        .base-field__label-text {
-            font: var(--typography-text-m-medium);
-        }
+    .base-field__label-text {
+      font: var(--typography-text-m-medium);
+    }
 
-        .base-field__hint {
-            font: var(--typography-text-m-regular);
-        }
+    .base-field__hint {
+      font: var(--typography-text-m-regular);
     }
+  }
 }
 
 .error-enter-active,
 .error-leave-active {
-    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
+  transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
 }
 
 .error-enter-from,
 .error-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-    max-height: 0;
+  opacity: 0;
+  transform: translateY(10px);
+  max-height: 0;
 }
 
 .error-enter-to,
 .error-leave-from {
-    opacity: 1;
-    transform: translateY(0);
-    max-height: 100px;
+  opacity: 1;
+  transform: translateY(0);
+  max-height: 100px;
 }
 </style>

package/src/components/BaseSelect/BaseSelect.vue

@@ -303,7 +303,7 @@ defineSlots<{
   $select: &;
 
   min-width: 320px;
-
+  height: 100%;
   .dropdown {
     &.--is-opened {
       #{$select} {
@@ -450,6 +450,7 @@ defineSlots<{
 
       &__input {
         border-radius: var(--corner-radius-m);
+        height: 100%;
       }
 
       &__header {