plugin-ui-for-kzt 0.0.21 → 0.0.23

package/src/components/BaseSelect/BaseSelect.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="base-select" :class="[classList]">
     <div class="base-select__wrapper">
-      <label v-if="label" :for="id" class="base-select__label">{{ label }}</label>
-
       <base-dropdown
         v-model="dropdownVisible"
         transition-name="top"
@@ -17,7 +15,7 @@
           >
             <slot
               name="header"
-              :value="actualOption"
+              :value="actualOption ? [actualOption] : undefined"
             >
               <div v-if="$slots.headerIcon" class="base-select__header_prefix_icon">
                 <slot name="headerIcon" />
@@ -63,7 +61,7 @@
               key-field="id"
               class="base-select__list"
             >
-            <template #default="{ item, index, active } : SlotProps">
+            <template #default="{ item, index, active } : ISelectSlotProps">
               <dynamic-scroller-item
                   :item="item"
                   :active="active"
@@ -90,10 +88,6 @@
           </div>
         </template>
       </base-dropdown>
-
-      <div v-if="(error && typeof error === 'string') || hint" class="base-select__hint">
-        {{ error || hint }}
-      </div>
     </div>
   </div>
 </template>
@@ -102,20 +96,13 @@
 import { computed, ref, watch } from 'vue';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
-import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps } from '../../types/input';
+import type { ICoreSelectProps, TSelectValue, ICoreSelectBaseProps, ICoreSelectOption, ISelectSlotProps } from '../../types/input';
 import BaseDropdown from '../BaseDropdown/BaseDropdown.vue';
 import BaseOpenedListItem from '../BaseOpenedListItem/BaseOpenedListItem.vue';
 import { useKitSize } from '../../composables/kit/size';
 import { useKitState } from '../../composables/kit/state';
 import { useKitStyle } from '../../composables/kit/style';
 
-// Определяем тип для slotProps
-interface SlotProps {
-  item: ICoreSelectBaseProps;
-  index: number;
-  active: boolean;
-}
-
 const props = withDefaults(defineProps<ICoreSelectProps & {
   modelValue?: TSelectValue
 }>(), {
@@ -130,11 +117,11 @@ const emit = defineEmits<{
 
 const actualValue = ref<TSelectValue>(props.modelValue ?? '');
 const actualOption = computed(() =>
-  props.options?.find((item: ICoreSelectBaseProps) => item.id === actualValue.value) || null
+  props.options?.find((item: ICoreSelectOption) => item?.id === actualValue.value) || null
 );
 
 watch(() => props.modelValue, (val) => {
-  actualValue.value = val;
+  actualValue.value = val ?? '';
 }, { immediate: true });
 
 function handleInput(value: TSelectValue) {
@@ -152,7 +139,7 @@ const { styleClassList } = useKitStyle(props);
 const listItemAttrs = computed(() => (item: ICoreSelectBaseProps) => ({
   icon: item.icon,
   active: actualValue.value === item.id,
-  title: item.name || item.label || '',
+  title: item.name || '',
   style: item.style,
   disabled: item.disabled,
   class: 'base-select__item',
@@ -170,8 +157,10 @@ const classList = computed(() => [
 ]);
 
 defineSlots<{
-  default(props: SlotProps): any;
+  default(props: ISelectSlotProps): any;
   iconItem(props: { item: ICoreSelectBaseProps }): any;
+  header(props: { value: ICoreSelectProps['options'] }): any;
+  headerIcon(): any;
 }>();
 </script>
 
@@ -205,14 +194,6 @@ defineSlots<{
   }
 
   &.--is-error {
-    #{$select}__hint {
-      color: var(--error-red);
-    }
-
-    #{$select}__label {
-      border-color: var(--error-red-light-01);
-    }
-
     #{$select}__arrow > * {
       color: var(--error-red);
     }
@@ -276,14 +257,6 @@ defineSlots<{
 
   &.--small-size {
     #{$select} {
-      &__label {
-        font: var(--typography-text-s-medium);
-      }
-
-      &__hint {
-        font: var(--typography-text-s-regular);
-      }
-
       &__header_value {
         font: var(--typography-text-m-regular);
       }
@@ -307,14 +280,6 @@ defineSlots<{
 
   &.--medium-size {
     #{$select} {
-      &__label {
-        font: var(--typography-text-s-medium);
-      }
-
-      &__hint {
-        font: var(--typography-text-s-regular);
-      }
-
       &__header_value {
         font: var(--typography-text-m-regular);
       }
@@ -333,14 +298,6 @@ defineSlots<{
 
   &.--large-size {
     #{$select} {
-      &__label {
-        font: var(--typography-text-m-medium);
-      }
-
-      &__hint {
-        font: var(--typography-text-m-regular);
-      }
-
       &__header_value {
         font: var(--typography-text-l-regular);
       }

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classList">
         <div class="base-site-input__wrapper">
-        <div :class="{ '--is-error' : urlError }" class="base-site-input__url-wrapper">
+        <div class="base-site-input__url-wrapper">
             <span class="base-site-input__url">
                 https://
             </span>
@@ -9,9 +9,10 @@
             <base-input 
                 v-bind="{...$props, ...$attrs}"
                 v-model="modelValue"
-                id="url"
+                :id="id"
                 type="url"
                 :error="urlError || props.error"
+                class="base-site-input__input"
                 @update:modelValue="onUpdateModelValue"
             />
         </div>
@@ -22,30 +23,24 @@
 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>(),{
     size: 'medium',
     modelValue: '',
-    error: '',
+    focusable: true,
 })
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
 
-const urlError = ref('');
+const urlError = ref<string>('');
 const { sizeClassList } = useKitSize(props);
-const { stateClassList } = useKitState(props);
 
 const classList = computed(() => [
     sizeClassList.value,
-    stateClassList.value,
-    'base-site-input',
-    {
-        '--is-has-hint': !!props.hint,
-    }
+    'base-site-input'
 ]);
 
 const normalizedValue = computed(() => {
@@ -82,7 +77,7 @@ watch(modelValue, (value) => {
 .base-site-input {
     $input: &;
 
-    width: fit-content;
+    width: 100%;
 
     &__wrapper {
         display: flex;
@@ -97,6 +92,10 @@ watch(modelValue, (value) => {
         }
     }
 
+    &__input {
+        flex-grow: 1;
+    }
+
     &__url {
         color: var(--primary-text-tertiary);
     }
@@ -114,99 +113,48 @@ 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 {
                 padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-2l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-75px);
-        }
     }
 
     &.--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 {
                 padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-2l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-75px);
-        }
     }
 
     &.--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 {
                 padding: var(--spacing-2l) var(--spacing-m) var(--spacing-2l) var(--spacing-l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-83px);
-        }
     }
 }
 </style>

package/src/components/BaseTabs/BaseTabs.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="base-tabs" :class="classList">
+    <div class="base-tabs__header">
+      <base-button
+        v-for="tab in tabs"
+        :key="tab.id"
+        size="custom"
+        color="custom"
+        class="base-tabs__tab"
+        :class="{ 'base-tabs__tab--active': activeTab === tab.id }"
+        @click="selectTab(tab.id)"
+        :disabled="tab.disabled"
+      >
+        <div v-if="tab.icon" class="base-tab__icon">
+          <component :is="tab.icon" />
+        </div>
+        <span>{{ tab.title }}</span>
+      </base-button>
+    </div>
+    <div class="base-tabs__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import type { TTabProps } from '../../types/tab.d';
+import BaseButton from '../BaseButton/BaseButton.vue';
+
+const props = withDefaults(defineProps<TTabProps>(), {
+  size: 'medium',
+  modelValue: 0,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const activeTab = ref(props.modelValue);
+
+watch(() => props.modelValue, (newValue) => {
+  activeTab.value = newValue;
+});
+
+const selectTab = (id: number) => {
+  if (!props.tabs[id]?.disabled) {
+    activeTab.value = id;
+    emit('update:modelValue', id);
+  }
+};
+
+const classList = computed(() => [`base-tabs--${props.size}`]);
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-tabs {
+  width: 100%;
+
+  &__header {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    z-index: 1;
+
+    &::before {
+      content: '';
+      width: 100%;
+      border-bottom: 1px solid var(--primary-black-200);
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
+  &__tab {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-m) var(--spacing-l);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--primary-black-700);
+    transition: color 0.2s ease, border-color 0.2s ease;
+    white-space: nowrap;
+    position: relative;
+
+    @include hover {
+      & {
+        color: var(--primary-black);
+      }
+    }
+
+    @include pressed {
+      color: var(--primary-black);
+    }
+
+    @include is-disabled-state {
+      color: var(--primary-black-400);
+    }
+
+    &--active {
+      color: var(--primary-blue);
+      border-bottom: 2px solid var(--primary-blue);
+      z-index: 2;
+
+      @include hover {
+        & {
+          color: var(--primary-blue-700);
+          border-color: transparent;
+        }
+      }
+
+      @include pressed {
+        color: var(--primary-blue-deep);
+        border-color: transparent;
+      }
+    }
+
+    .base-tab__icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  // Размеры
+  &--extra-small {
+    .base-tabs__header {
+      gap: var(--spacing-l);
+    }
+
+    .base-tabs__tab {
+      height: 38px;
+      padding: var(--spacing-s) var(--spacing-m);
+      font: var(--typography-text-s-medium);
+      gap: var(--spacing-s);
+
+      &--active {
+        font: var(--typography-text-s-semibold);
+      }
+
+      .base-tab__icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  &--small {
+    .base-tabs__header {
+      gap: var(--spacing-xl);
+    }
+
+    .base-tabs__tab {
+      height: 48px;
+      padding: var(--spacing-m) var(--spacing-l);
+      font: var(--typography-text-m-medium);
+      gap: var(--spacing-m);
+
+      &--active {
+        font: var(--typography-text-m-semibold);
+      }
+
+      .base-tab__icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &--medium {
+    .base-tabs__header {
+      gap: var(--spacing-xl);
+    }
+
+    .base-tabs__tab {
+      height: 56px;
+      padding: var(--spacing-l) var(--spacing-xl);
+      font: var(--typography-text-l-medium);
+      gap: var(--spacing-m);
+
+      &--active {
+        font: var(--typography-text-l-semibold);
+      }
+
+      .base-tab__icon {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+}
+</style>

package/src/components/BaseTextarea/BaseTextarea.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="base-textarea" :class="classList">
-    <label class="base-textarea__label" :for="id">
-      <span v-if="label" class="base-textarea__label-text">{{ label }}</span>
-
+    <div class="base-textarea__wrapper">
       <div class="base-textarea__wrapper">
         <textarea
           :id="id"
@@ -17,11 +15,7 @@
           {{ modelValue.length }}/{{ maxLength }}
         </span>
       </div>
-
-      <div v-if="(error && typeof error === 'string') || hint" class="base-textarea__hint">
-        {{ error || hint }}
-      </div>
-    </label>
+    </div>
   </div>
 </template>
 
@@ -34,8 +28,6 @@ import { useKitSize } from '../../composables/kit/size';
 const props = withDefaults(defineProps<ICoreTextareaProps & { maxLength?: number }>(), {
   modelValue: '',
   placeholder: '' as string,
-  error: '',
-  hint: '',
   size: 'medium',
 });
 
@@ -73,11 +65,6 @@ function handleInput(event: Event) {
     resize: none;
   }
 
-  &__hint {
-    align-self: flex-start;
-    font: var(--typography-text-s-regular);
-  }
-
   &__wrapper {
     display: flex;
     position: relative;
@@ -113,10 +100,6 @@ function handleInput(event: Event) {
         color: var(--primary-text-tertiary);
         background: var(--primary-black-100);
       }
-
-      #{$textarea}__hint {
-        color: var(--primary-text-secondary);
-      }
     }
   }
 
@@ -126,7 +109,7 @@ function handleInput(event: Event) {
     color: var(--primary-text-quaternary);
   }
 
-  &__label {
+  &__wrapper {
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -135,17 +118,7 @@ function handleInput(event: Event) {
     height: 100%;
   }
 
-  &__label-text {
-    align-self: flex-start;
-    font: var(--typography-text-s-medium);
-    color: var(--primary-text-primary);
-  }
-
   &.--is-error {
-    #{$textarea}__hint {
-      color: var(--error-red);
-    }
-
     #{$textarea}__field {
       border-color: var(--error-red-light-01);
 

package/src/components/BaseUpload/BaseUpload.vue

@@ -111,10 +111,12 @@ import BaseIcon from '../BaseIcon/BaseIcon.vue';
 import { useModal } from '../../composables/useModal';
 import type { UploadedFile, IpropsUpload } from '../../types/uploadedFile.d';
 import ImageModal from './ImageModal.vue';
+import CropModal from './CropModal.vue';
 
 const props = withDefaults(defineProps<IpropsUpload>(), {
   multiple: true,
   maxFileSize: 25 * 1024 * 1024, // 25 MB в байтах
+  enableCrop: false,
 });
 
 const emit = defineEmits(['update:files']);
@@ -141,6 +143,11 @@ const triggerFileInput = () => {
   fileInput.value?.click();
 };
 
+const isImageFile = (file: File) => {
+  const fileExtension = `.${file.name.split('.').pop()?.toLowerCase() || ''}`;
+  return mediaExtensions.includes(fileExtension);
+};
+
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement;
   const files = target.files;
@@ -161,7 +168,11 @@ const handleFileUpload = (event: Event) => {
         return;
       }
 
-      uploadedFiles.value.push({ name: file.name, size: file.size, file });
+      if (props.enableCrop && isImageFile(file)) {
+        openCropModal(file);
+      } else {
+        uploadedFiles.value.push({ name: file.name, size: file.size, file });
+      }
     });
 
     isUploading.value = false;
@@ -169,6 +180,29 @@ const handleFileUpload = (event: Event) => {
   }
 };
 
+const openCropModal = (file: File) => {
+  const imageUrl = URL.createObjectURL(file);
+  
+  modal.open('crop-modal', {
+    closable: false,
+    imageUrl,
+    fileName: file.name,
+    cancelText: props.cropTexts?.cancel,
+    confirmText: props.cropTexts?.confirm,
+    onConfirm: (croppedFile: File) => {
+      uploadedFiles.value.push({
+        name: croppedFile.name, 
+        size: croppedFile.size, 
+        file: croppedFile 
+      });
+      URL.revokeObjectURL(imageUrl);
+    },
+    onCancel: () => {
+      URL.revokeObjectURL(imageUrl);
+    }
+  }, CropModal);
+};
+
 const removeFile = (index: number, isMedia: boolean) => {
   const files = isMedia ? mediaFiles.value : otherFiles.value;
   const globalIndex = uploadedFiles.value.indexOf(files[index]);