@rynt/sdk 0.9.53

package/src/shared/ui/form/ImageEditor.vue

@@ -0,0 +1,598 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      class="block text-muted-foreground mb-1.5 text-sm font-medium"
+      >{{ label }}</label
+    >
+
+    <!-- Превью изображения -->
+    <div
+      class="relative bg-surface-overlay border border-border overflow-hidden transition-colors"
+      :class="[
+        previewClasses,
+        isDragging && 'border-primary',
+        (isUploading || disabled) && 'opacity-50',
+      ]"
+      @click="handleClick"
+      @dragover.prevent="isDragging = true"
+      @dragleave.prevent="isDragging = false"
+      @drop.prevent="handleDrop"
+    >
+      <input
+        ref="fileInput"
+        type="file"
+        accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
+        class="hidden"
+        @change="handleFileSelect"
+        :disabled="isUploading || disabled"
+      />
+
+      <!-- Изображение или пустое состояние -->
+      <div v-if="modelValue && !isUploading" class="relative w-full h-full">
+        <img
+          :src="getPreviewUrl(modelValue)"
+          alt="Preview"
+          class="w-full h-full object-cover"
+        />
+
+        <!-- Overlay с кнопками (в square — только иконки) -->
+        <div
+          class="absolute inset-0 bg-black/45 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center gap-2"
+        >
+          <button
+            @click.stop="handleClick"
+            :class="[
+              'bg-primary hover:bg-[var(--primary-hover)] text-primary-foreground transition-colors flex items-center justify-center',
+              mode === 'square' ? 'p-2' : 'px-4 py-2 gap-2',
+            ]"
+            :title="mode === 'square' ? 'Изменить' : undefined"
+            :disabled="disabled"
+          >
+            <Icon name="edit" size="sm" />
+            <span v-if="mode !== 'square'">Изменить</span>
+          </button>
+          <button
+            @click.stop="handleRemove"
+            :class="[
+              'bg-destructive hover:bg-destructive/90 text-destructive-foreground transition-colors flex items-center justify-center',
+              mode === 'square' ? 'p-2' : 'px-4 py-2 gap-2',
+            ]"
+            :title="mode === 'square' ? 'Удалить' : undefined"
+            :disabled="disabled"
+          >
+            <Icon name="trash" size="sm" />
+            <span v-if="mode !== 'square'">Удалить</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Состояние загрузки -->
+      <div
+        v-else-if="isUploading"
+        class="w-full h-full flex flex-col items-center justify-center py-8"
+      >
+        <div class="animate-spin mb-2">
+          <Icon name="refresh-cw" size="lg" class="text-accent-secondary" />
+        </div>
+        <p class="text-muted-foreground text-sm">Загрузка изображения...</p>
+      </div>
+
+      <!-- Пустое состояние -->
+      <div
+        v-else
+        class="w-full h-full flex flex-col items-center justify-center py-8 cursor-pointer"
+      >
+        <Icon name="upload" size="xl" class="text-subtle-fg mb-2" />
+        <p class="text-muted-foreground text-sm mb-1 text-center">
+          Нажмите или перетащите изображение
+        </p>
+        <p class="text-subtle-fg text-xs">PNG, JPG, GIF, WEBP до 10MB</p>
+      </div>
+    </div>
+
+    <p v-if="error" class="text-red-400 text-xs mt-1">{{ error }}</p>
+
+    <!-- Диалог обрезки -->
+    <Dialog
+      :open="showCropDialog"
+      size="xl"
+      @close="showCropDialog = false"
+      :closeDisabled="true"
+    >
+      <DialogHeader
+        title="Обрезка изображения"
+        description="Выберите область для обрезки"
+        @close="showCropDialog = false"
+      />
+      <DialogContent class="p-4">
+        <div class="flex gap-4">
+          <!-- Cropper -->
+          <div
+            class="flex-1 relative overflow-hidden"
+            :style="{ height: '70vh', maxWidth: '100%' }"
+          >
+            <Cropper
+              ref="cropper"
+              :src="cropImageSrc"
+              :stencil-props="stencilProps"
+              class="cropper"
+              @change="updatePreviews"
+            />
+          </div>
+
+          <!-- Превью в двух размерах для banner режима -->
+          <div v-if="mode === 'banner'" class="w-80 space-y-4">
+            <div>
+              <p class="text-muted-foreground text-sm mb-2">
+                Превью баннера (1152x344)
+              </p>
+              <div
+                class="bg-surface-overlay border border-border aspect-[1152/344] overflow-hidden"
+              >
+                <img
+                  v-if="cropPreviewBanner"
+                  :src="cropPreviewBanner"
+                  alt="Banner preview"
+                  class="w-full h-full object-cover"
+                />
+                <div
+                  v-else
+                  class="w-full h-full flex items-center justify-center text-subtle-fg text-sm"
+                >
+                  Превью появится после выбора области
+                </div>
+              </div>
+            </div>
+            <div>
+              <p class="text-muted-foreground text-sm mb-2">
+                Превью 16:9 (центр)
+              </p>
+              <div
+                class="bg-surface-overlay border border-border aspect-video overflow-hidden"
+              >
+                <img
+                  v-if="cropPreview16x9"
+                  :src="cropPreview16x9"
+                  alt="16:9 preview"
+                  class="w-full h-full object-cover"
+                />
+                <div
+                  v-else
+                  class="w-full h-full flex items-center justify-center text-subtle-fg text-sm"
+                >
+                  Превью появится после выбора области
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+      <DialogFooter>
+        <Button
+          variant="secondary"
+          size="md"
+          @click="showCropDialog = false"
+          :disabled="isUploading"
+        >
+          Отмена
+        </Button>
+        <Button
+          variant="primary"
+          size="md"
+          @click="handleCrop"
+          :disabled="isUploading"
+        >
+          <Icon name="check" size="sm" />
+          Применить
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch } from 'vue';
+  import { Cropper } from 'vue-advanced-cropper';
+  import 'vue-advanced-cropper/dist/style.css';
+  import {
+    Icon,
+    Dialog,
+    DialogHeader,
+    DialogContent,
+    DialogFooter,
+    Button,
+  } from '..';
+  import { transformCloudinaryUrl } from '../../utils/cloudinary';
+
+  type ImageMode = 'square' | 'banner' | 'base';
+
+  const props = withDefaults(
+    defineProps<{
+      label?: string;
+      disabled?: boolean;
+      folder?: string;
+      mode?: ImageMode;
+    }>(),
+    {
+      label: '',
+      disabled: false,
+      folder: undefined,
+      mode: 'banner',
+    },
+  );
+
+  const modelValue = defineModel<string>('modelValue', { default: '' });
+
+  const fileInput = ref<HTMLInputElement | null>(null);
+  const cropper = ref<InstanceType<typeof Cropper> | null>(null);
+  const isDragging = ref(false);
+  const isUploading = ref(false);
+  const error = ref<string>('');
+  const showCropDialog = ref(false);
+  const cropImageSrc = ref<string>('');
+  const cropPreviewBanner = ref<string>('');
+  const cropPreview16x9 = ref<string>('');
+
+  // Поддержка двух вариантов конфигурации:
+  // 1. Отдельные переменные: VITE_CLOUDINARY_CLOUD_NAME и VITE_CLOUDINARY_UPLOAD_PRESET
+  // 2. CLOUDINARY_URL: cloudinary://api_key:api_secret@cloud_name (парсим для cloud_name)
+  const CLOUDINARY_URL = (import.meta as any).env?.VITE_CLOUDINARY_URL as
+    | string
+    | undefined;
+  const CLOUDINARY_CLOUD_NAME = (import.meta as any).env
+    ?.VITE_CLOUDINARY_CLOUD_NAME as string | undefined;
+  const CLOUDINARY_UPLOAD_PRESET = (import.meta as any).env
+    ?.VITE_CLOUDINARY_UPLOAD_PRESET as string | undefined;
+
+  // Парсим CLOUDINARY_URL если он указан: cloudinary://api_key:api_secret@cloud_name
+  const parseCloudinaryUrl = (url: string): string | null => {
+    try {
+      // Формат: cloudinary://api_key:api_secret@cloud_name
+      const match = url.match(/cloudinary:\/\/[^:]+:[^@]+@(.+)/);
+      return match ? match[1] : null;
+    } catch {
+      return null;
+    }
+  };
+
+  // Получаем cloud_name из переменных окружения или из CLOUDINARY_URL
+  const cloudName =
+    CLOUDINARY_CLOUD_NAME ||
+    (CLOUDINARY_URL ? parseCloudinaryUrl(CLOUDINARY_URL) : null);
+
+  // Вычисляем aspect ratio и размеры для превью
+  const previewClasses = computed(() => {
+    if (props.mode === 'square') {
+      return 'aspect-square';
+    } else if (props.mode === 'banner') {
+      return 'aspect-[1152/344]';
+    } else {
+      // base режим - 16:9
+      return 'aspect-video';
+    }
+  });
+
+  // Настройки cropper
+  const stencilProps = computed(() => {
+    if (props.mode === 'square') {
+      return {
+        aspectRatio: 1,
+      };
+    } else if (props.mode === 'banner') {
+      // Для режима banner используем aspect ratio 1152/344
+      return {
+        aspectRatio: 1152 / 344,
+      };
+    } else {
+      // base режим - 16:9
+      return {
+        aspectRatio: 16 / 9,
+      };
+    }
+  });
+
+  // Обновляем превью при изменении области обрезки
+  const updatePreviews = async () => {
+    if (!cropper.value || props.mode !== 'banner' || !cropImageSrc.value)
+      return;
+
+    try {
+      const result = cropper.value.getResult();
+      if (!result.canvas || !result.coordinates) return;
+
+      // Загружаем исходное изображение
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+
+      await new Promise((resolve, reject) => {
+        img.onload = resolve;
+        img.onerror = reject;
+        img.src = cropImageSrc.value;
+      });
+
+      const { coordinates } = result;
+      const sourceWidth = coordinates.width;
+      const sourceHeight = coordinates.height;
+      const sourceLeft = coordinates.left;
+      const sourceTop = coordinates.top;
+
+      // Превью баннера (1152x344)
+      const bannerCanvas = document.createElement('canvas');
+      bannerCanvas.width = 1152;
+      bannerCanvas.height = 344;
+      const bannerCtx = bannerCanvas.getContext('2d');
+      if (bannerCtx) {
+        // Рисуем из исходного изображения с учетом координат
+        bannerCtx.drawImage(
+          img,
+          sourceLeft,
+          sourceTop,
+          sourceWidth,
+          sourceHeight,
+          0,
+          0,
+          1152,
+          344,
+        );
+        cropPreviewBanner.value = bannerCanvas.toDataURL('image/png', 0.9);
+      }
+
+      // Превью 16:9 (центр изображения)
+      // Вычисляем размеры для 16:9 из области 1152x344
+      // Высота 344, для 16:9 ширина = 344 * 16 / 9 ≈ 611.56
+      const width16x9 = Math.round((344 * 16) / 9);
+      const left16x9 = Math.round((1152 - width16x9) / 2); // Центрируем
+
+      // Вычисляем координаты для 16:9 в исходном изображении
+      const sourceWidth16x9 = (width16x9 / 1152) * sourceWidth;
+      const sourceLeft16x9 = sourceLeft + (left16x9 / 1152) * sourceWidth;
+
+      const canvas16x9 = document.createElement('canvas');
+      canvas16x9.width = width16x9;
+      canvas16x9.height = 344;
+      const ctx16x9 = canvas16x9.getContext('2d');
+      if (ctx16x9) {
+        // Рисуем центральную часть из исходного изображения
+        ctx16x9.drawImage(
+          img,
+          sourceLeft16x9,
+          sourceTop,
+          sourceWidth16x9,
+          sourceHeight,
+          0,
+          0,
+          width16x9,
+          344,
+        );
+        cropPreview16x9.value = canvas16x9.toDataURL('image/png', 0.9);
+      }
+    } catch (error) {
+      console.error('Ошибка при обновлении превью:', error);
+    }
+  };
+
+  const handleClick = () => {
+    if (props.disabled || isUploading.value) return;
+    fileInput.value?.click();
+  };
+
+  const handleFileSelect = async (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+    if (file) {
+      await processFile(file);
+    }
+    target.value = '';
+  };
+
+  const handleDrop = async (event: DragEvent) => {
+    isDragging.value = false;
+    if (props.disabled || isUploading.value) return;
+
+    const file = event.dataTransfer?.files[0];
+    if (file && file.type.startsWith('image/')) {
+      await processFile(file);
+    } else {
+      error.value = 'Пожалуйста, выберите изображение';
+    }
+  };
+
+  const processFile = async (file: File) => {
+    // Проверка размера файла (10MB)
+    if (file.size > 10 * 1024 * 1024) {
+      error.value = 'Размер файла не должен превышать 10MB';
+      return;
+    }
+
+    error.value = '';
+
+    // Создаем URL для превью
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      cropImageSrc.value = e.target?.result as string;
+      cropPreviewBanner.value = '';
+      cropPreview16x9.value = '';
+      showCropDialog.value = true;
+      // Обновляем превью после открытия диалога
+      setTimeout(() => {
+        updatePreviews();
+      }, 100);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleCrop = async () => {
+    if (!cropper.value) return;
+
+    const { canvas } = cropper.value.getResult();
+    if (!canvas) {
+      error.value = 'Не удалось обрезать изображение';
+      return;
+    }
+
+    // Конвертируем canvas в blob
+    canvas.toBlob(
+      async (blob: Blob | null) => {
+        if (!blob) {
+          error.value = 'Ошибка при обработке изображения';
+          return;
+        }
+
+        // Создаем File из blob
+        const file = new File([blob], 'cropped-image.png', {
+          type: 'image/png',
+        });
+        await uploadImage(file);
+
+        showCropDialog.value = false;
+        cropImageSrc.value = '';
+        cropPreviewBanner.value = '';
+        cropPreview16x9.value = '';
+      },
+      'image/png',
+      0.95,
+    );
+  };
+
+  const uploadImage = async (file: File) => {
+    if (!cloudName) {
+      error.value = 'Cloudinary Cloud Name не настроен';
+      console.error(
+        'Установите VITE_CLOUDINARY_CLOUD_NAME или VITE_CLOUDINARY_URL в переменных окружения',
+      );
+      return;
+    }
+
+    if (!CLOUDINARY_UPLOAD_PRESET) {
+      error.value = 'Cloudinary Upload Preset не настроен';
+      console.error(
+        'VITE_CLOUDINARY_UPLOAD_PRESET не установлен в переменных окружения',
+      );
+      return;
+    }
+
+    isUploading.value = true;
+    error.value = '';
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);
+      // Добавляем folder если указан
+      if (props.folder) {
+        formData.append('folder', props.folder);
+      }
+
+      const response = await fetch(
+        `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`,
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(
+          errorData?.error?.message ||
+            `Ошибка загрузки: ${response.statusText}`,
+        );
+      }
+
+      const data = await response.json();
+
+      if (data.secure_url) {
+        // Cloudinary возвращает secure_url (HTTPS) для загруженного изображения
+        modelValue.value = data.secure_url;
+      } else if (data.url) {
+        // Fallback на обычный url, если secure_url недоступен
+        modelValue.value = data.url;
+      } else {
+        throw new Error('Не удалось получить ссылку на изображение');
+      }
+    } catch (err: any) {
+      error.value = err.message || 'Ошибка при загрузке изображения';
+      console.error('Ошибка загрузки изображения на Cloudinary:', err);
+    } finally {
+      isUploading.value = false;
+      // Сброс input для возможности повторной загрузки того же файла
+      if (fileInput.value) {
+        fileInput.value.value = '';
+      }
+    }
+  };
+
+  const handleRemove = () => {
+    if (props.disabled || isUploading.value) return;
+    modelValue.value = '';
+    error.value = '';
+  };
+
+  // Получаем URL изображения с трансформациями для превью
+  const getPreviewUrl = (url: string | undefined) => {
+    if (!url) return '';
+
+    if (props.mode === 'square') {
+      return transformCloudinaryUrl(url, {
+        width: 400,
+        height: 400,
+        crop: 'fill',
+        quality: 'auto',
+        format: 'auto',
+      });
+    } else if (props.mode === 'banner') {
+      // Для banner режима используем размеры 1152x344
+      return transformCloudinaryUrl(url, {
+        width: 1152,
+        height: 344,
+        crop: 'fill',
+        quality: 'auto',
+        format: 'auto',
+      });
+    } else {
+      // base режим - 16:9
+      return transformCloudinaryUrl(url, {
+        width: 1920,
+        height: 1080,
+        crop: 'fill',
+        quality: 'auto',
+        format: 'auto',
+      });
+    }
+  };
+
+  // Закрываем диалог при изменении modelValue извне
+  watch(
+    () => modelValue.value,
+    (newValue) => {
+      if (!newValue && showCropDialog.value) {
+        showCropDialog.value = false;
+      }
+    },
+  );
+</script>
+
+<style scoped>
+  .cropper {
+    height: 100%;
+    width: 100%;
+    max-width: 100%;
+    background: var(--surface-overlay);
+    overflow: hidden;
+  }
+
+  .cropper :deep(.vue-advanced-cropper) {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .cropper :deep(.vue-advanced-cropper__area) {
+    max-width: 100%;
+  }
+
+  .cropper :deep(.vue-advanced-cropper__background) {
+    max-width: 100%;
+    overflow: hidden;
+  }
+</style>

package/src/shared/ui/form/Input.vue

@@ -0,0 +1,72 @@
+<template>
+  <input
+    :type="type"
+    :value="displayValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :class="inputClasses"
+    @input="
+      $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+    "
+    @blur="$emit('blur', $event)"
+    @focus="$emit('focus', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    modelValue?: string | number;
+    type?:
+      | 'text'
+      | 'email'
+      | 'password'
+      | 'number'
+      | 'search'
+      | 'datetime-local'
+      | 'date'
+      | 'time';
+    placeholder?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: 'text',
+    size: 'md',
+    disabled: false,
+    error: false,
+  });
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: string];
+    blur: [event: FocusEvent];
+    focus: [event: FocusEvent];
+  }>();
+
+  // Преобразуем значение в строку для отображения
+  const displayValue = computed(() => {
+    if (props.modelValue === null || props.modelValue === undefined) return '';
+    return String(props.modelValue);
+  });
+
+  const sizeClasses = {
+    sm: 'px-2 py-1 text-xs',
+    md: 'px-3 py-2 text-sm',
+    lg: 'px-4 py-2.5 text-base',
+  };
+
+  const inputClasses = computed(() => {
+    return cn(
+      'w-full bg-surface-overlay text-foreground border border-border focus:outline-none transition-colors rounded',
+      sizeClasses[props.size],
+      props.error
+        ? 'border-destructive focus:ring-2 focus:ring-destructive'
+        : 'focus:border-accent-secondary focus:ring-2 focus:ring-ring/60',
+      props.disabled && 'opacity-50 cursor-not-allowed',
+    );
+  });
+</script>