@rynt/sdk 0.9.53

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="space-y-1.5">
+    <label v-if="label" class="block text-muted-foreground mb-1.5 text-sm font-medium">
+      {{ label }}
+      <span v-if="showValue" class="text-accent-secondary">{{ formattedValue }}</span>
+    </label>
+    <div class="relative">
+      <input :id="inputId" type="range" :min="min" :max="max" :step="step" :value="modelValue" :disabled="disabled"
+        class="w-full h-2 bg-surface-overlay appearance-none cursor-pointer accent-primary disabled:opacity-50 disabled:cursor-not-allowed"
+        :class="inputClass" @input="handleInput" />
+    </div>
+    <div v-if="showLabels" class="flex justify-between text-xs text-muted-foreground">
+      <span>{{ minLabel || min }}</span>
+      <span>{{ maxLabel || max }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    showValue?: boolean;
+    showLabels?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+    disabled?: boolean;
+    inputClass?: string;
+    unit?: string;
+  }>(),
+  {
+    min: 0,
+    max: 100,
+    step: 1,
+    showValue: false,
+    showLabels: false,
+    disabled: false,
+    unit: '',
+  }
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number];
+}>();
+
+const inputId = `range-${Math.random().toString(36).substr(2, 9)}`;
+
+const formattedValue = computed(() => {
+  if (props.unit) {
+    return `${props.modelValue} ${props.unit}`;
+  }
+  return props.modelValue.toString();
+});
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', Number(target.value));
+};
+</script>

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="relative">
+    <select
+      :value="modelValue"
+      :disabled="disabled"
+      :class="selectClasses"
+      @change="handleChange"
+    >
+      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
+      <option
+        v-for="option in options"
+        :key="String(option.value)"
+        :value="String(option.value)"
+      >
+        {{ option.label }}
+      </option>
+      <slot />
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Option {
+    label: string;
+    value: string | number | boolean;
+  }
+
+  interface Props {
+    modelValue?: string | number | boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+    options?: Option[];
+    placeholder?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    size: 'md',
+    disabled: false,
+    error: false,
+    options: () => [],
+    placeholder: '',
+  });
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: string | number | boolean];
+  }>();
+
+  const handleChange = (event: Event) => {
+    const target = event.target as HTMLSelectElement;
+    const value = target.value;
+    // Преобразуем значение обратно в нужный тип
+    const option = props.options.find((opt) => String(opt.value) === value);
+    emit('update:modelValue', option ? option.value : value);
+  };
+
+  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 selectClasses = computed(() => {
+    return cn(
+      'w-full bg-surface-overlay text-foreground border border-border focus:outline-none transition-colors appearance-none 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>

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

@@ -0,0 +1,38 @@
+<template>
+  <label :class="labelClasses">
+    <input
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      class="rnt-switch-input"
+      @change="
+        $emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
+    />
+    <span class="rnt-switch-track" aria-hidden="true">
+      <span class="rnt-switch-thumb" />
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    modelValue?: boolean;
+    disabled?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+  });
+
+  defineEmits<{
+    'update:modelValue': [value: boolean];
+  }>();
+
+  const labelClasses = computed(() => {
+    return cn('rnt-switch', props.disabled && 'rnt-switch--disabled');
+  });
+</script>

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

@@ -0,0 +1,144 @@
+<template>
+  <div class="relative">
+    <textarea
+      ref="textareaRef"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :rows="rows"
+      :maxlength="maxlength"
+      :class="textareaClasses"
+      :style="textareaStyle"
+      @input="handleInput"
+      @blur="$emit('blur', $event)"
+      @focus="$emit('focus', $event)"
+    />
+    <div
+      v-if="isShowCount && maxlength"
+      class="absolute bottom-2 right-2 text-xs text-subtle-fg pointer-events-none"
+    >
+      {{ charCount }}/{{ maxlength }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { CSSProperties } from 'vue';
+  import { computed, ref, watch, nextTick, onMounted } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    rows?: number;
+    error?: boolean;
+    resize?: boolean;
+    maxlength?: number;
+    showCharCount?: boolean | number;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    rows: 4,
+    disabled: false,
+    error: false,
+    resize: false,
+    showCharCount: false,
+  });
+
+  const isShowCount = computed(() =>
+    typeof props.showCharCount === 'number'
+      ? (props.modelValue || '').length >= props.showCharCount
+      : props.showCharCount,
+  );
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: string];
+    blur: [event: FocusEvent];
+    focus: [event: FocusEvent];
+  }>();
+
+  const textareaRef = ref<HTMLTextAreaElement | null>(null);
+  const textareaHeight = ref<number | null>(null);
+  const isMaxHeight = ref(false);
+
+  const charCount = computed(() => {
+    return props.modelValue?.length || 0;
+  });
+
+  const textareaClasses = computed(() => {
+    return cn(
+      'w-full bg-surface-overlay text-foreground border border-border px-3 py-2 text-sm focus:outline-none transition-colors rounded',
+      props.error
+        ? 'border-destructive focus:ring-2 focus:ring-destructive'
+        : 'focus:border-accent-secondary focus:ring-2 focus:ring-ring/60',
+      !props.resize && 'resize-none',
+      props.disabled && 'opacity-50 cursor-not-allowed',
+      isShowCount.value && 'pb-6', // Добавляем отступ снизу для счетчика
+    );
+  });
+
+  const textareaStyle = computed((): CSSProperties => {
+    if (textareaHeight.value !== null) {
+      return {
+        height: `${textareaHeight.value}px`,
+        overflowY: isMaxHeight.value ? 'auto' : 'hidden',
+      };
+    }
+    return {};
+  });
+
+  // Автоматическое изменение высоты при изменении содержимого
+  const adjustHeight = () => {
+    if (!textareaRef.value) return;
+
+    const textarea = textareaRef.value;
+
+    // Сбрасываем высоту, чтобы получить правильный scrollHeight
+    if (textareaHeight.value !== null) {
+      textarea.style.height = 'auto';
+    }
+
+    // Получаем scrollHeight (высота содержимого)
+    const scrollHeight = textarea.scrollHeight;
+
+    // Вычисляем минимальную высоту на основе rows
+    const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 20;
+    const minHeight = lineHeight * props.rows;
+
+    // Максимальная высота (примерно 10 строк)
+    const maxHeight = lineHeight * 10;
+
+    // Устанавливаем высоту (минимум minHeight, максимум maxHeight или scrollHeight)
+    const newHeight = Math.min(Math.max(minHeight, scrollHeight), maxHeight);
+    textareaHeight.value = newHeight;
+    isMaxHeight.value = scrollHeight > maxHeight;
+  };
+
+  const handleInput = (event: Event) => {
+    const target = event.target as HTMLTextAreaElement;
+    emit('update:modelValue', target.value);
+
+    // Автоматически изменяем высоту
+    nextTick(() => {
+      adjustHeight();
+    });
+  };
+
+  // Отслеживаем изменения modelValue для автоизменения высоты
+  watch(
+    () => props.modelValue,
+    () => {
+      nextTick(() => {
+        adjustHeight();
+      });
+    },
+  );
+
+  // Инициализируем высоту при монтировании
+  onMounted(() => {
+    nextTick(() => {
+      adjustHeight();
+    });
+  });
+</script>

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

@@ -0,0 +1,9 @@
+export { default as Input } from './Input.vue';
+export { default as Textarea } from './Textarea.vue';
+export { default as Select } from './Select.vue';
+export { default as Checkbox } from './Checkbox.vue';
+export { default as Switch } from './Switch.vue';
+export { default as Range } from './Range.vue';
+export { default as ImageEditor } from './ImageEditor.vue';
+export { default as FormField } from './FormField.vue';
+export { default as FormGrid } from './FormGrid.vue';

package/src/shared/ui/index.ts

@@ -0,0 +1,9 @@
+export * from './base';
+export * from './form';
+export * from './layout';
+export * from './primitives';
+export * from './navigation';
+export * from './dialog';
+export * from './cards';
+export * from './special';
+export * from './editors';

package/src/shared/ui/layout/BusyOverlay.vue

@@ -0,0 +1,31 @@
+<template>
+  <Block
+    class="absolute inset-0 bg-background/65 backdrop-blur-sm z-10 flex items-center justify-center pointer-events-none"
+  >
+    <Block class="text-center pointer-events-auto">
+      <Icon
+        :name="icon"
+        size="lg"
+        class="mx-auto mb-2 animate-spin text-accent-secondary"
+      />
+      <Text class="text-muted-foreground text-sm">{{ message }}</Text>
+    </Block>
+  </Block>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '../base';
+import Block from '../primitives/Block.vue';
+import Text from '../primitives/Text.vue';
+
+withDefaults(
+  defineProps<{
+    message?: string;
+    icon?: string;
+  }>(),
+  {
+    message: 'Загрузка...',
+    icon: 'refresh-cw',
+  },
+);
+</script>

package/src/shared/ui/layout/Callout.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :class="classes">
+    <Icon v-if="icon" :name="icon" size="sm" class="mt-0.5 shrink-0" />
+    <div class="min-w-0">
+      <div v-if="title" class="font-medium">
+        {{ title }}
+      </div>
+      <div v-if="description" class="text-sm opacity-90">
+        {{ description }}
+      </div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '../base';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    tone?: 'info' | 'success' | 'warning' | 'error';
+    icon?: string;
+    title?: string;
+    description?: string;
+    class?: string;
+  }>(),
+  {
+    tone: 'info',
+  },
+);
+
+const toneClasses = {
+  info: 'border-primary/40 bg-primary/10 text-primary',
+  success: 'border-success/40 bg-success/10 text-success',
+  warning: 'border-warning/40 bg-warning/10 text-warning',
+  error: 'border-destructive/40 bg-destructive/10 text-destructive-soft',
+};
+
+const classes = computed(() =>
+  cn('flex gap-2 border p-3', toneClasses[props.tone], props.class),
+);
+</script>

package/src/shared/ui/layout/Card.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="cardClasses">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    variant?: 'default' | 'hover';
+    angular?: boolean;
+    border?: boolean;
+    plain?: boolean;
+    class?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    variant: 'default',
+    angular: true,
+    border: false,
+    plain: false,
+  });
+
+  const cardClasses = computed(() => {
+    if (props.plain) {
+      return cn('rnt-card', props.class);
+    }
+
+    return cn(
+      'rnt-card',
+      'rnt-card--raised',
+      props.variant === 'hover' ? 'rnt-card--interactive group' : '',
+      props.class,
+    );
+  });
+</script>

package/src/shared/ui/layout/Container.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="containerClasses">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '6xl' | 'full';
+    class?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    maxWidth: '6xl',
+  });
+
+  const maxWidthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '6xl': 'max-w-6xl',
+    full: 'max-w-full',
+  };
+
+  const containerClasses = computed(() => {
+    return cn('mx-auto', maxWidthClasses[props.maxWidth], props.class);
+  });
+</script>
+
+
+

package/src/shared/ui/layout/EmptyState.vue

@@ -0,0 +1,99 @@
+<template>
+  <Card
+    v-if="variant === 'panel'"
+    border
+    :class="cn('text-center', density === 'comfortable' ? 'p-8' : 'p-6', containerClass)"
+  >
+    <Icon
+      v-if="icon"
+      :name="icon"
+      size="xl"
+      class="mx-auto mb-4 text-subtle-fg"
+    />
+    <Text class="text-muted-foreground text-lg mb-2">{{ title }}</Text>
+    <Text v-if="description" class="text-subtle-fg text-sm mb-4">{{
+      description
+    }}</Text>
+    <Block v-if="actionLabel || $slots.action" class="mt-4 flex flex-col items-center gap-2">
+      <Button
+        v-if="actionLabel"
+        :variant="actionVariant"
+        size="md"
+        :angular="angularAction"
+        @click="$emit('action', $event)"
+      >
+        <Icon v-if="actionIcon" :name="actionIcon" size="sm" />
+        {{ actionLabel }}
+      </Button>
+      <slot name="action" />
+    </Block>
+    <slot />
+  </Card>
+  <Block v-else :class="wrapperClass">
+    <Icon
+      v-if="icon"
+      :name="icon"
+      size="xl"
+      class="mx-auto mb-4 text-subtle-fg"
+    />
+    <Text class="text-muted-foreground text-lg mb-2">{{ title }}</Text>
+    <Text v-if="description" class="text-subtle-fg text-sm">{{ description }}</Text>
+    <Block v-if="actionLabel || $slots.action" class="mt-4 flex flex-col items-center gap-2">
+      <Button
+        v-if="actionLabel"
+        :variant="actionVariant"
+        size="md"
+        :angular="angularAction"
+        @click="$emit('action', $event)"
+      >
+        <Icon v-if="actionIcon" :name="actionIcon" size="sm" />
+        {{ actionLabel }}
+      </Button>
+      <slot name="action" />
+    </Block>
+    <slot />
+  </Block>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+import { Icon } from '../base';
+import { Button } from '../base';
+import Block from '../primitives/Block.vue';
+import Card from './Card.vue';
+import Text from '../primitives/Text.vue';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    description?: string;
+    icon?: string;
+    density?: 'comfortable' | 'compact';
+    containerClass?: string;
+    variant?: 'plain' | 'panel';
+    actionLabel?: string;
+    actionIcon?: string;
+    actionVariant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'success' | 'warning';
+    angularAction?: boolean;
+  }>(),
+  {
+    density: 'comfortable',
+    variant: 'plain',
+    actionVariant: 'primary',
+    angularAction: true,
+  },
+);
+
+defineEmits<{
+  action: [event: MouseEvent];
+}>();
+
+const wrapperClass = computed(() =>
+  cn(
+    'text-center',
+    props.density === 'comfortable' ? 'py-12' : 'py-8',
+    props.containerClass,
+  ),
+);
+</script>

package/src/shared/ui/layout/EntityMediaRow.vue

@@ -0,0 +1,54 @@
+<template>
+  <div :class="classes">
+    <MediaBox :src="image" :alt="title" :icon="icon" :size="mediaSize" />
+    <div class="min-w-0 flex-1">
+      <div class="flex items-center gap-2">
+        <div class="truncate text-sm font-medium text-foreground">
+          {{ title }}
+        </div>
+        <slot name="badges" />
+      </div>
+      <div v-if="description" class="mt-1 line-clamp-2 text-xs text-muted-foreground">
+        {{ description }}
+      </div>
+      <div
+        v-if="$slots.meta"
+        class="mt-1 flex items-center gap-2 text-xs text-subtle-fg"
+      >
+        <slot name="meta" />
+      </div>
+    </div>
+    <div v-if="$slots.actions" class="flex shrink-0 items-center gap-2">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import type { ClassValue } from 'clsx';
+  import MediaBox from './MediaBox.vue';
+  import { cn } from '../../utils/cn';
+
+  const props = withDefaults(
+    defineProps<{
+      title: string;
+      description?: string | null;
+      image?: string | null;
+      icon?: string;
+      mediaSize?: 'sm' | 'md' | 'lg';
+      class?: ClassValue;
+    }>(),
+    {
+      icon: 'image',
+      mediaSize: 'md',
+    },
+  );
+
+  const classes = computed(() =>
+    cn(
+      'flex items-center gap-3 bg-surface-list p-3 transition-colors',
+      props.class,
+    ),
+  );
+</script>

package/src/shared/ui/layout/FilterResultsLayout.vue

@@ -0,0 +1,22 @@
+<template>
+  <TwoPaneLayout :left-width="sidebarWidth" :class="wrapperClass">
+    <template #left>
+      <slot name="filters" />
+    </template>
+    <slot />
+  </TwoPaneLayout>
+</template>
+
+<script setup lang="ts">
+import TwoPaneLayout from './TwoPaneLayout.vue';
+
+withDefaults(
+  defineProps<{
+    sidebarWidth?: 'sm' | 'md' | 'lg';
+    wrapperClass?: string;
+  }>(),
+  {
+    sidebarWidth: 'md',
+  },
+);
+</script>