plugin-ui-for-kzt 0.0.18 → 0.0.19

package/example/App.vue

@@ -3,29 +3,14 @@
     <h1>Plugin UI KZT - Компоненты</h1>
     <p>Ниже представлены все компоненты библиотеки с примерами их использования.</p>
     <section>
-      <h2>BaseTag.vue</h2>
-      <div style="display: flex;
-    gap: 8px;
-    align-items: center;">
-        <base-tag size="extra-small" text="base tag" />
-        <base-tag size="small" color="secondary" text="base tag secondary" />
-        <base-tag 
-        text="base tag"
-        size="medium" 
-        closable
-        @close="console.log('Tag closed')"
-        />
-        <base-tag 
-        text="base tag" 
+     <base-site-input
+        id="phone-input"
+        v-model="phoneNumber"
         size="large"
-        addingTag
-        @addTag="console.log('New tag added:')"
-        />
-        <base-tag 
-        isHasAddTag
-        @updateInput="console.log(' tag added:', $event)"
-        />
-      </div>
+        placeholder="Введите номер телефона"
+        :error="phoneError"
+        hint="Номер телефона должен быть не менее 5 символов"
+      />
     </section>
     <section>
       <h2>BaseBadgeGroup.vue</h2>
@@ -141,11 +126,23 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useModal } from '../src/composables/useModal';
 import MyCustomModal from './MyCustomModal.vue';
 
-const accept = ['image/*']
+const accept = ['.jpg', '.pdf']
+const phoneNumber = ref('');
+const phoneError = ref('');
+watch(phoneNumber, (newValue) => {
+  console.log('Новый номер телефона:', newValue.length);
+  if (newValue.length > 17) {
+    console.log('Номер телефона должен быть не менее 5 символов');
+    phoneError.value = 'Некорректный номер телефона';
+  } else {
+    console.log('Номер телефона корректен');
+    phoneError.value = '';
+  }
+});
 
 const modal = useModal();
 

package/package.json

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

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>
@@ -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);
@@ -299,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;
+                }
             }
         }
 

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classList">
         <div class="base-site-input__wrapper">
-        <div class="base-site-input__url-wrapper">
+        <div :class="{ '--is-error' : urlError }" class="base-site-input__url-wrapper">
             <span class="base-site-input__url">
                 https://
             </span>
@@ -22,6 +22,7 @@
 import { computed, ref, watch } from 'vue';
 import BaseInput from '../BaseInput/BaseInput.vue';
 import { useKitSize } from '../../composables/kit/size'
+import { useKitState } from '../../composables/kit/state';
 import type { ICorePropsBaseSiteInput } from '../../types/input'
 
 const props = withDefaults(defineProps<ICorePropsBaseSiteInput>(),{
@@ -36,10 +37,15 @@ const emit = defineEmits<{
 
 const urlError = ref('');
 const { sizeClassList } = useKitSize(props);
+const { stateClassList } = useKitState(props);
 
 const classList = computed(() => [
     sizeClassList.value,
+    stateClassList.value,
     'base-site-input',
+    {
+        '--is-has-hint': !!props.hint,
+    }
 ]);
 
 const normalizedValue = computed(() => {
@@ -108,12 +114,24 @@ watch(modelValue, (value) => {
     }
 
     &.--small-size {
+        &.--is-has-hint, &.--is-error {
+            #{$input} {
+                &__url-wrapper {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+
         #{$input} {
             &__url-wrapper{
                 height: 40px;
                 font: var(--typography-text-m-regular);
                 border-top-left-radius: var(--corner-radius-s);
                 border-bottom-left-radius: var(--corner-radius-s);
+
+                &.--is-error {
+                    margin-bottom: 26px;
+                }
             }
 
             &__url {
@@ -128,12 +146,24 @@ watch(modelValue, (value) => {
     }
 
     &.--medium-size {
+        &.--is-has-hint, &.--is-error {
+            #{$input} {
+                &__url-wrapper {
+                    margin-bottom: 26px;
+                }
+            }
+        }
+
         #{$input} {
             &__url-wrapper{
                 height: 48px;
                 font: var(--typography-text-m-regular);
                 border-top-left-radius: var(--corner-radius-m);
                 border-bottom-left-radius: var(--corner-radius-m);
+
+                &.--is-error {
+                    margin-bottom: 26px;
+                }
             }
 
             &__url {
@@ -148,12 +178,24 @@ watch(modelValue, (value) => {
     }
 
     &.--large-size {
+        &.--is-has-hint, &.--is-error {
+            #{$input} {
+                &__url-wrapper {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+
         #{$input} {
             &__url-wrapper{
                 height: 56px;
                 font: var(--typography-text-l-regular);
                 border-top-left-radius: var(--corner-radius-m);
                 border-bottom-left-radius: var(--corner-radius-m);
+
+                &.--is-error {
+                    margin-bottom: 30px;
+                }
             }
 
             &__url {

package/src/components/BaseUpload/BaseUpload.vue

@@ -152,7 +152,7 @@ const handleFileUpload = (event: Event) => {
     Array.from(files).forEach((file) => {
       const fileExtension = `.${file.name.split('.').pop()?.toLowerCase() || ''}`;
       if (!props.acceptedFormats.includes(fileExtension)) {
-        errorMessage.value = `Недопустимый формат файла: ${file.name}. Допустимы: ${props.acceptedFormats.join(', ')}.`;
+        errorMessage.value = `Недопустимый формат файла: ${file.name}. Допустимый: ${props.acceptedFormats.join(', ')}.`;
         return;
       }
 

package/src/composables/kit/state.ts

@@ -11,6 +11,7 @@ export function useKitState(props: ICoreState) {
       '--is-error': props.error,
       '--is-loading': props.loading,
       '--is-disabled': props.disabled,
+      '--is-has-hint': props.hint,
     },
   ]);
 

package/src/types/utils.d.ts

@@ -28,6 +28,7 @@ export interface ICoreState {
   required?: boolean
   error?: Nullable<string | number | boolean> | undefined
   loading?: boolean
+  hint?: Nullable<string | number | boolean> | undefined
 }
 
 export interface ICoreStyle {

package/webpack.config.js

@@ -97,7 +97,7 @@ module.exports = (env, argv) => {
     devServer: {
       static: path.join(__dirname, "example"),
       compress: true,
-      port: 9000,
+      port: 9001,
       hot: false,
       liveReload: true,
       open: true,