@rynt/sdk 0.9.53

package/src/shared/ui/cards/InviteCard.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="bg-surface-list p-3 flex items-center gap-3 hover:bg-surface-list-hover transition-colors"
+  >
+    <Avatar :src="avatar" size="md" :title="username" />
+    <div class="flex-1 min-w-0">
+      <div class="text-foreground font-medium text-sm truncate">{{ username }}</div>
+      <!-- <div class="text-muted-foreground text-xs truncate">{{ email }}</div> -->
+    </div>
+    <div class="flex items-center gap-2">
+      <Button
+        variant="primary"
+        size="sm"
+        :disabled="isProcessing"
+        @click="$emit('accept')"
+      >
+        {{ isProcessing ? 'Обработка...' : 'Принять' }}
+      </Button>
+      <Button
+        variant="secondary"
+        size="sm"
+        :disabled="isProcessing"
+        @click="$emit('reject')"
+      >
+        Отклонить
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Avatar, Button } from '../base';
+
+  interface Props {
+    username: string;
+    email: string;
+    avatar?: string;
+    isProcessing?: boolean;
+  }
+
+  defineProps<Props>();
+
+  const emit = defineEmits<{
+    accept: [];
+    reject: [];
+  }>();
+</script>

package/src/shared/ui/cards/index.ts

@@ -0,0 +1,2 @@
+export { default as InviteCard } from './InviteCard.vue';
+

package/src/shared/ui/dialog/Dialog.vue

@@ -0,0 +1,71 @@
+<template>
+  <Teleport to="body">
+    <Transition name="dialog">
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+        @mousedown.self="!closeDisabled && $emit('close')"
+      >
+        <div :class="dialogClasses" :style="angularStyle" @click.stop>
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    open: boolean;
+    size?: 'sm' | 'md' | 'base' | 'lg' | 'xl' | 'full';
+    angular?: boolean;
+    closeDisabled?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    size: 'base',
+    angular: true,
+    closeDisabled: false,
+  });
+
+  const emit = defineEmits<{
+    close: [];
+  }>();
+
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-2xl',
+    base: 'max-w-4xl',
+    lg: 'max-w-6xl',
+    xl: 'max-w-7xl',
+    full: 'w-full max-w-7xl',
+  };
+
+  const dialogClasses = computed(() => {
+    return cn(
+      'flex w-full max-h-[90vh] flex-col overflow-hidden rounded border border-primary/22 rnt-dialog',
+      'shadow-[0_12px_40px_-12px_color-mix(in_srgb,var(--foreground)_38%,transparent),0_0_0_1px_color-mix(in_srgb,var(--primary)_22%,transparent)_inset]',
+      sizeClasses[props.size],
+    );
+  });
+
+  const angularStyle = computed(() => {
+    if (!props.angular) return {};
+    return {};
+  });
+</script>
+
+<style scoped>
+  .dialog-enter-active,
+  .dialog-leave-active {
+    transition: opacity 0.2s ease;
+  }
+
+  .dialog-enter-from,
+  .dialog-leave-to {
+    opacity: 0;
+  }
+</style>

package/src/shared/ui/dialog/DialogContent.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :class="contentClasses">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    padding?: boolean;
+    scrollable?: boolean;
+    class?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    padding: true,
+    scrollable: true,
+  });
+
+  const contentClasses = computed(() => {
+    return cn(
+      'flex-1',
+      props.padding && 'p-4',
+      props.scrollable && 'overflow-y-auto',
+      props.class
+    );
+  });
+</script>
+

package/src/shared/ui/dialog/DialogFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="p-4 border-t border-border flex justify-between items-center">
+    <div class="text-muted-foreground text-sm">
+      <slot name="left" />
+    </div>
+    <div class="flex gap-3">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+

package/src/shared/ui/dialog/DialogHeader.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex items-center justify-between border-b border-border p-4">
+    <div>
+      <h2 v-if="title" class="text-lg font-semibold text-foreground">{{ title }}</h2>
+      <p v-if="description" class="mt-1 text-xs text-muted-foreground">{{ description }}</p>
+      <slot />
+    </div>
+    <button
+      v-if="showClose"
+      @click="$emit('close')"
+      :disabled="closeDisabled"
+      :class="[
+        'text-muted-foreground transition-colors hover:text-foreground',
+        closeDisabled && 'cursor-not-allowed opacity-50',
+      ]"
+    >
+      <Icon name="close" size="lg" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Icon } from '../base';
+
+  interface Props {
+    title?: string;
+    description?: string;
+    showClose?: boolean;
+    closeDisabled?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showClose: true,
+    closeDisabled: false,
+  });
+
+  const emit = defineEmits<{
+    close: [];
+  }>();
+</script>
+

package/src/shared/ui/dialog/index.ts

@@ -0,0 +1,5 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+

package/src/shared/ui/editors/AttachmentImagesEditor.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="attachment-images-editor">
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      multiple
+      class="hidden"
+      @change="handleFileChange"
+    />
+
+    <div v-if="modelValue.length" class="mb-2 flex flex-wrap gap-2">
+      <div
+        v-for="(url, index) in modelValue"
+        :key="`${url}-${index}`"
+        class="group relative h-20 w-20 overflow-hidden rounded border border-border bg-card"
+      >
+        <img :src="url" alt="" class="h-full w-full object-cover" />
+        <div
+          v-if="uploadingIndexes.has(index)"
+          class="absolute inset-0 flex items-center justify-center bg-background/50"
+        >
+          <div
+            class="h-5 w-5 animate-spin rounded-full border-2 border-foreground/25 border-t-accent-secondary"
+          />
+        </div>
+        <button
+          v-else
+          type="button"
+          class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded bg-background/80 text-subtle-fg opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100"
+          title="Удалить"
+          @mousedown.prevent="removeAt(index)"
+        >
+          <Icon name="x" size="xs" />
+        </button>
+      </div>
+    </div>
+
+    <Button
+      type="button"
+      variant="secondary"
+      size="sm"
+      :disabled="isUploading || modelValue.length >= maxImages"
+      @click="openFilePicker"
+    >
+      <Icon v-if="isUploading" name="refresh-cw" size="sm" class="animate-spin" />
+      <Icon v-else name="image" size="sm" />
+      {{ isUploading ? 'Загрузка...' : 'Добавить фото' }}
+    </Button>
+    <p v-if="maxImages > 0" class="mt-1 text-xs text-subtle-fg">
+      До {{ maxImages }} изображений
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Button, Icon } from '..';
+  import { uploadImage } from '../../utils/uploadImage';
+
+  interface Props {
+    modelValue: string[];
+    uploadFolder?: string;
+    maxImages?: number;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    uploadFolder: 'content',
+    maxImages: 10,
+  });
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: string[]];
+  }>();
+
+  const fileInputRef = ref<HTMLInputElement | null>(null);
+  const isUploading = ref(false);
+  const uploadingIndexes = ref(new Set<number>());
+
+  const openFilePicker = () => {
+    fileInputRef.value?.click();
+  };
+
+  const removeAt = (index: number) => {
+    const next = [...props.modelValue];
+    next.splice(index, 1);
+    emit('update:modelValue', next);
+  };
+
+  const handleFileChange = async (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const files = input.files ? Array.from(input.files) : [];
+    input.value = '';
+    if (!files.length) return;
+
+    const slotsLeft = props.maxImages - props.modelValue.length;
+    if (slotsLeft <= 0) return;
+
+    const toUpload = files.slice(0, slotsLeft);
+    isUploading.value = true;
+
+    const urls = [...props.modelValue];
+
+    for (const file of toUpload) {
+      const index = urls.length;
+      urls.push('');
+      emit('update:modelValue', [...urls]);
+
+      const pending = new Set(uploadingIndexes.value);
+      pending.add(index);
+      uploadingIndexes.value = pending;
+
+      try {
+        const result = await uploadImage(file, {
+          folder: props.uploadFolder,
+          maxSizeBytes: 10 * 1024 * 1024,
+        });
+        urls[index] = result.url;
+        emit('update:modelValue', urls.filter(Boolean));
+      } catch (error) {
+        console.error('[AttachmentImagesEditor] upload failed:', error);
+        urls.pop();
+        emit('update:modelValue', urls.filter(Boolean));
+      } finally {
+        const nextPending = new Set(uploadingIndexes.value);
+        nextPending.delete(index);
+        uploadingIndexes.value = nextPending;
+      }
+    }
+
+    isUploading.value = false;
+  };
+</script>

package/src/shared/ui/editors/ContentAttachmentsDisplay.vue

@@ -0,0 +1,76 @@
+<template>
+  <div v-if="urls.length" class="content-attachments">
+    <button
+      v-for="(url, index) in urls"
+      :key="`${url}-${index}`"
+      type="button"
+      class="content-attachments__item"
+      :title="'Открыть изображение'"
+      @click="openViewer(index)"
+    >
+      <img :src="url" alt="" loading="lazy" />
+    </button>
+
+    <RichContentImageViewer
+      :open="viewerOpen"
+      :images="viewerImages"
+      :initial-index="viewerIndex"
+      @close="viewerOpen = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { parseAttachments } from '../../utils/attachments';
+  import RichContentImageViewer from './RichContentImageViewer.vue';
+
+  const props = defineProps<{
+    attachments?: unknown;
+  }>();
+
+  const viewerOpen = ref(false);
+  const viewerIndex = ref(0);
+
+  const urls = computed(() => parseAttachments(props.attachments));
+
+  const viewerImages = computed(() =>
+    urls.value.map((src) => ({ src, alt: '' })),
+  );
+
+  const openViewer = (index: number) => {
+    viewerIndex.value = index;
+    viewerOpen.value = true;
+  };
+</script>
+
+<style scoped>
+  .content-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .content-attachments__item {
+    width: 5.5rem;
+    height: 5.5rem;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-ui-lg);
+    background: var(--card);
+    cursor: zoom-in;
+    padding: 0;
+  }
+
+  .content-attachments__item:hover {
+    border-color: var(--accent-secondary);
+  }
+
+  .content-attachments__item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+</style>