plugin-ui-for-kzt 0.0.22 → 0.0.23

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/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]);

package/src/components/BaseUpload/CropModal.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="crop-modal">
+    <div class="crop-modal__container">
+      <div class="crop-modal__body">
+        <div class="crop-modal__cropper-container">
+          <Cropper
+              ref="cropperRef"
+              class="crop-modal__cropper"
+              :src="modalProps.imageUrl"
+              :stencil-props="{
+              aspectRatio: NaN,
+              movable: true,
+              resizable: true,
+            }"
+              :resize-image="{
+              adjustStencil: false
+            }"
+          />
+        </div>
+      </div>
+
+      <div class="crop-modal__footer">
+        <base-button
+            color="secondary"
+            size="small"
+            @click="handleCancel"
+            class="crop-modal__button"
+        >
+          {{ modalProps.cancelText || 'Отменить' }}
+        </base-button>
+
+        <base-button
+            color="primary"
+            size="small"
+            @click="handleConfirm"
+            class="crop-modal__button"
+        >
+          {{ modalProps.confirmText || 'Применить' }}
+        </base-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import {Cropper} from 'vue-advanced-cropper';
+import 'vue-advanced-cropper/dist/style.css';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import {useModal} from '../../composables/useModal';
+
+interface CropModalProps {
+  modalProps: {
+    imageUrl: string;
+    fileName: string;
+    onConfirm: (croppedFile: File) => void;
+    onCancel: () => void;
+    cancelText?: string;
+    confirmText?: string;
+  };
+}
+
+const props = defineProps<CropModalProps>();
+const modal = useModal();
+
+const cropperRef = ref();
+
+const handleCancel = () => {
+  props.modalProps.onCancel();
+  modal.close('crop-modal');
+};
+
+const handleConfirm = () => {
+  if (!cropperRef.value) return;
+
+  const {canvas} = cropperRef.value.getResult();
+
+  if (canvas) {
+    canvas.toBlob((blob: Blob | null) => {
+      if (blob) {
+        const croppedFile = new File([blob], props.modalProps.fileName, {
+          type: 'image/jpeg',
+          lastModified: Date.now(),
+        });
+
+        props.modalProps.onConfirm(croppedFile);
+        modal.close('crop-modal');
+      }
+    }, 'image/jpeg', 0.9);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.crop-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 588px;
+  max-height: 776px;
+
+  @media #{$mobile-max-576} {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  &__container {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  &__body {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__cropper-container {
+    height: 500px;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    @media #{$mobile-max-375} {
+      overflow: unset;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    gap: var(--spacing-xl);
+    justify-content: space-between;
+    padding: var(--spacing-xl);
+    background-color: var(--primary-black-white);
+
+    @media #{$mobile-max-576} {
+      flex-direction: column;
+      justify-content: center;
+      gap: var(--spacing-l);
+    }
+  }
+
+  &__button {
+    min-width: 258px;
+
+    @media #{$mobile-landscape} {
+      min-width: unset;
+      width: 100%;
+    }
+  }
+}
+
+::v-deep(.vue-advanced-cropper__background) {
+  background: rgba(0, 0, 0, 0.3);
+  width: 100%;
+}
+
+::v-deep(.vue-advanced-cropper__foreground) {
+  border-color: var(--primary-blue);
+  background: rgba(0, 0, 0, 0.3);
+}
+
+::v-deep(.vue-simple-handler) {
+  background: var(--primary-blue);
+  border-color: white;
+}
+
+::v-deep(.vue-simple-handler:hover) {
+  background: var(--primary-blue-deep);
+}
+
+::v-deep(.vue-simple-line) {
+  border-color: var(--primary-blue);
+}
+</style>
+
+<style lang="scss">
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-modal:has(.crop-modal) {
+  @media screen and (max-width: 375px) {
+    max-height: unset !important;
+    height: 100vh !important;
+  }
+}
+
+.base-modal__content:has(.crop-modal) {
+  width: 100% !important;
+
+  @media screen and (max-width: 375px) {
+    overflow-y: unset !important;
+  }
+}
+
+.base-modal__wrapper:has(.crop-modal) {
+  padding: 0 !important;
+
+  @media #{$mobile-max-767} {
+    padding: 0 !important;
+  }
+
+  @media screen and (max-width: 375px) {
+    justify-content: start !important;
+  }
+}
+</style>

package/src/index.ts

@@ -36,6 +36,7 @@ import BaseBadge from "./components/BaseBadge/BaseBadge.vue";
 import BaseTag from "./components/BaseTag/BaseTag.vue";
 import BaseBadgeGroup from "./components/BaseBadge/BaseBadgeGroup.vue";
 import BaseField from "./components/BaseField/BaseField.vue";
+import BaseTabs from "./components/BaseTabs/BaseTabs.vue";
 
 const components = {
   BaseModal,
@@ -69,7 +70,8 @@ const components = {
   BaseChips,
   BaseSwiper,
   BaseUpload,
-  BaseField
+  BaseField,
+  BaseTabs
 };
 
 // Функция для загрузки sprite.svg
@@ -156,5 +158,6 @@ export {
   BaseChips,
   BaseSwiper,
   BaseUpload,
-  BaseField
+  BaseField,
+  BaseTabs
 };

package/src/types/tab.d.ts

@@ -0,0 +1,17 @@
+import type { ICoreSize } from './utils';
+
+type IconComponent = Component | (new () => Component) | (() => Promise<{ default: Component }>);
+
+interface ITab {
+    title: string;
+    id: number;
+    icon?: IconComponent;
+    disabled?: boolean
+}
+
+interface ITabs {
+    tabs: ITab[];
+    modelValue: number,
+}
+
+export type TTabProps = ICoreSize & ITabs

package/src/types/uploadedFile.d.ts

@@ -4,10 +4,17 @@ export interface UploadedFile {
     file: File;
 }
 
+export interface CropTexts {
+    cancel?: string;
+    confirm?: string;
+}
+
 export interface IpropsUpload {
     acceptedFormats: string[]; // Фильтр по типу файлов (например, "image/*" для изображений)
     multiple?: boolean; // Разрешить множественный выбор файлов
     maxFileSize?: number; // Максимальный размер файла в байтах
+    enableCrop?: boolean; // Включить функциональность кропа для изображений
+    cropTexts?: CropTexts; // Тексты для кнопок в модальном окне кропа
     onUpload?: (files: UploadedFile[]) => void; // Callback при загрузке файлов
     onError?: (error: string) => void; // Callback при ошибке загрузки
 }