@ozdao/martyrs 0.2.541 → 0.2.542

package/src/components/FieldTags/README.md

@@ -1,513 +0,0 @@
-# FieldTags Component 
-
-Ультра-мощный Vue 3 компонент для работы с тегами с огромным количеством возможностей для создания, редактирования, валидации и управления тегами.
-
-## Архитектура компонента
-
-### Основные компоненты
-1. **FieldTags.vue** - главный компонент с полным функционалом
-2. **BlockTags.vue** - готовая обертка с предложенными тегами
-3. **tag-input.vue** - вспомогательный компонент для inline-редактирования
-4. **create-tags.js** - утилиты для создания и валидации тегов
-5. **vue-tags-input.props.js** - валидаторы и определения всех props
-
-## Все возможности компонента
-
-### 1. СОЗДАНИЕ ТЕГОВ (10+ способов)
-
-#### Клавиатурный ввод
-- **Настраиваемые триггер-клавиши** - любые комбинации клавиш для создания (Enter, Tab, запятая, точка с запятой и т.д.)
-- **Коды клавиш и строки** - поддержка как keyCode так и строковых значений клавиш
-- **Предотвращение дефолтного поведения** - автоматическая отмена стандартных действий браузера
-
-#### Вставка из буфера обмена
-- **Умная обработка вставки** - автоматическое создание множественных тегов из вставленного текста
-- **Отложенная обработка** - обработка через setTimeout для корректной работы с буфером
-- **Фильтрация пустых значений** - автоматическое удаление пустых тегов
-
-#### Разделители текста
-- **Множественные сепараторы** - любое количество разделителей (`;`, `,`, `:`, `|` и т.д.)
-- **Regex-обработка** - автоматическое экранирование спецсимволов
-- **Умное разбиение** - создание массива тегов из одной строки
-
-#### Автоматическое создание
-- **При потере фокуса** - создание тега когда пользователь кликает вне поля
-- **При выборе из автодополнения** - мгновенное добавление при клике на предложение
-- **При навигации клавиатурой** - добавление выбранного элемента через Enter
-
-### 2. РЕДАКТИРОВАНИЕ ТЕГОВ (продвинутые возможности)
-
-#### Режимы редактирования
-- **Inline-редактирование** - прямо в теге без модальных окон
-- **Статус каждого тега** - независимое отслеживание режима редактирования для каждого
-- **Фокусировка на input** - автоматический фокус при входе в режим редактирования
-
-#### Управление редактированием
-- **Валидация при редактировании** - проверка в реальном времени
-- **Сохранение по триггерам** - настраиваемые клавиши для сохранения
-- **Отмена изменений** - восстановление оригинального значения
-- **Blur-отмена** - автоматическая отмена при потере фокуса
-
-### 3. АВТОДОПОЛНЕНИЕ (умная система)
-
-#### Фильтрация и поиск
-- **Case-insensitive поиск** - поиск без учета регистра
-- **Минимальная длина запроса** - настраиваемый порог для показа
-- **Фильтр дубликатов** - автоматическое скрытие уже добавленных
-- **Кастомная фильтрация** - возможность передать свою функцию фильтрации
-
-#### Навигация и выбор
-- **Клавиатурная навигация** - стрелки вверх/вниз с циклическим переходом
-- **Выбор мышью** - hover для предварительного выбора
-- **Автовыбор первого** - опциональный выбор первого элемента
-- **Запоминание позиции** - сохранение выбранного элемента
-
-#### Режимы работы
-- **Всегда открыт** - постоянное отображение списка
-- **Только из списка** - запрет на создание произвольных тегов
-- **Динамическое обновление** - реактивное обновление при изменении items
-
-### 4. ВАЛИДАЦИЯ (мощная система правил)
-
-#### Типы правил
-- **RegExp правила** - проверка через регулярные выражения
-- **Функциональные правила** - произвольная логика валидации
-- **Строковые правила** - автоматическое преобразование в RegExp
-- **Множественные правила** - применение нескольких правил одновременно
-
-#### CSS-классы и состояния
-- **Динамические классы** - автоматическое добавление классов по результатам валидации
-- **ti-valid/ti-invalid** - базовые классы состояния
-- **ti-duplicate** - специальный класс для дубликатов
-- **Кастомные классы** - любые пользовательские классы через правила
-
-#### Блокировка действий
-- **disableAdd флаг** - запрет добавления невалидных тегов
-- **Проверка при сохранении** - валидация при редактировании
-- **Предварительная валидация** - проверка до добавления в массив
-
-### 5. УДАЛЕНИЕ ТЕГОВ (множественные способы)
-
-#### Визуальное удаление
-- **Иконка закрытия** - кликабельная кнопка на каждом теге
-- **Кастомные действия** - слот для собственных кнопок удаления
-
-#### Backspace удаление
-- **Двухэтапное удаление** - сначала пометка, потом удаление
-- **Визуальная индикация** - класс deletion-mark для помеченного тега
-- **Таймер сброса** - автоматический сброс пометки через 1 секунду
-- **Очистка таймеров** - корректная очистка при unmount
-
-### 6. ХУКИ И СОБЫТИЯ (полный контроль)
-
-#### Before-хуки (можно отменить действие)
-- **onBeforeAddingTag** - перед добавлением с возможностью отмены
-- **onBeforeDeletingTag** - перед удалением с подтверждением
-- **onBeforeEditingTag** - перед входом в режим редактирования
-- **onBeforeSavingTag** - перед сохранением изменений
-
-#### События изменений
-- **tags-changed** - при любом изменении массива тегов
-- **update:tags** - v-model синхронизация для тегов
-- **update:modelValue** - v-model для поля ввода
-- **tag-clicked** - клик по тегу с полной информацией
-
-#### События состояний
-- **adding-duplicate** - попытка добавить дубликат
-- **saving-duplicate** - попытка сохранить дубликат при редактировании
-- **max-tags-reached** - достижение лимита тегов
-
-### 7. УПРАВЛЕНИЕ ФОКУСОМ И ВЗАИМОДЕЙСТВИЕМ
-
-#### Фокус и Blur
-- **Отслеживание фокуса** - реактивная переменная focused
-- **addOnBlur** - создание тега при потере фокуса
-- **Глобальный click listener** - обработка кликов вне компонента
-- **Предотвращение blur** - при клике внутри компонента
-
-#### Размеры и ограничения
-- **maxlength** - максимальная длина текста тега
-- **maxTags** - максимальное количество тегов
-- **Автоматический размер input** - size="1" с flex-grow
-
-### 8. ВНУТРЕННЯЯ АРХИТЕКТУРА
-
-#### Управление состоянием
-- **tagsCopy** - внутреннее представление с tiClasses
-- **originalTags** - хранение оригинальных данных
-- **tagsEditStatus** - массив статусов редактирования
-- **shallowRef оптимизация** - для больших массивов тегов
-
-#### Refs и DOM
-- **tagCenterRefs Map** - хранение ссылок на DOM элементы
-- **newTagInputRef** - прямая ссылка на поле ввода
-- **nextTick синхронизация** - корректная работа с DOM
-
-#### Оптимизации
-- **fast-deep-equal** - быстрое сравнение объектов
-- **Клонирование без мутаций** - иммутабельные операции
-- **Batch обновления** - группировка изменений
-
-### 9. СЛОТЫ (полная кастомизация)
-
-#### Слоты тегов
-- **tag-left** - левая часть тега (иконки, чекбоксы)
-- **tag-center** - центральная часть (текст, редактирование)
-- **tag-right** - правая часть (дополнительная информация)
-- **tag-actions** - кнопки действий (удаление, редактирование)
-
-#### Слоты автодополнения
-- **autocomplete-item** - кастомный рендеринг элементов
-- **autocomplete-header** - шапка списка автодополнения
-- **autocomplete-footer** - подвал списка
-- **between-elements** - контент между input и автодополнением
-
-#### Передаваемые в слоты данные
-- Полная информация о теге и индексе
-- Состояние редактирования
-- Функции для выполнения действий
-- Состояние deletion-mark
-
-### 10. СТИЛИЗАЦИЯ И ВИЗУАЛИЗАЦИЯ
-
-#### CSS классы состояний
-- `.ti-disabled` - отключенный компонент
-- `.ti-focus` - компонент в фокусе
-- `.ti-editing` - тег в режиме редактирования  
-- `.ti-deletion-mark` - тег помечен для удаления
-- `.ti-selected-item` - выбранный элемент автодополнения
-
-#### Классы валидации
-- `.ti-valid` - валидный тег
-- `.ti-invalid` - невалидный тег
-- `.ti-duplicate` - дубликат
-- Кастомные классы через validation rules
-
-#### Визуальные эффекты
-- Плавная анимация при добавлении/удалении
-- Hover эффекты на элементах
-- Визуальная индикация состояний
-- Адаптивная верстка с flex-wrap
-
-### 11. ДОПОЛНИТЕЛЬНЫЕ ВОЗМОЖНОСТИ
-
-#### Кастомная проверка дубликатов
-- **isDuplicate функция** - полностью кастомная логика
-- **Сравнение по любым полям** - не только по тексту
-- **Контекстная проверка** - с учетом других тегов
-
-#### Inline стили и классы
-- **style property** - inline стили для каждого тега
-- **classes property** - дополнительные CSS классы
-- **tiClasses** - внутренние классы компонента
-
-#### Дополнительные данные в тегах
-- **Любые кастомные поля** - сохранение дополнительной информации
-- **Неизменность кастомных данных** - компонент не модифицирует их
-- **Передача через события** - полная информация в event handlers
-
-## Использование
-
-### Базовый пример
-```vue
-<FieldTags
-  v-model="inputValue"
-  :tags="tags"
-  @tags-changed="handleTagsChanged"
-/>
-```
-
-### Продвинутый пример со всеми возможностями
-```vue
-<FieldTags
-  v-model="inputValue"
-  :tags="tags"
-  :autocomplete-items="suggestions"
-  :autocomplete-min-length="0"
-  :autocomplete-filter-duplicates="true"
-  :add-on-key="[13, ':', ';', ',']"
-  :save-on-key="[13, 'Tab']"
-  :separators="[';', ',', '|']"
-  :max-tags="20"
-  :maxlength="50"
-  :allow-edit-tags="true"
-  :add-from-paste="true"
-  :add-on-blur="true"
-  :delete-on-backspace="true"
-  :avoid-adding-duplicates="true"
-  :validation="validationRules"
-  :is-duplicate="customDuplicateCheck"
-  :placeholder="'Добавьте теги'"
-  @tags-changed="handleTagsChanged"
-  @before-adding-tag="validateBeforeAdd"
-  @before-deleting-tag="confirmDelete"
-  @before-editing-tag="checkEditPermission"
-  @before-saving-tag="validateBeforeSave"
-  @adding-duplicate="handleDuplicate"
-  @max-tags-reached="showMaxTagsWarning"
-  @tag-clicked="handleTagClick"
->
-  <!-- Кастомный рендеринг тега -->
-  <template #tag-left="{ tag, index }">
-    <Icon :name="tag.icon" />
-  </template>
-  
-  <template #tag-actions="{ performDelete, performOpenEdit, index }">
-    <button @click="performOpenEdit(index)">✏️</button>
-    <button @click="performDelete(index)">❌</button>
-  </template>
-  
-  <!-- Кастомный элемент автодополнения -->
-  <template #autocomplete-item="{ item, performAdd }">
-    <div @click="performAdd(item)" class="custom-item">
-      <span>{{ item.text }}</span>
-      <span class="item-count">({{ item.count }})</span>
-    </div>
-  </template>
-</FieldTags>
-```
-
-### Пример с before-хуками
-```vue
-<script setup>
-function validateBeforeAdd({ tag, addTag }) {
-  // Асинхронная проверка на сервере
-  checkTagOnServer(tag).then(isValid => {
-    if (isValid) {
-      addTag(); // Вызываем только если валидно
-    } else {
-      showError('Тег не прошел проверку');
-    }
-  });
-}
-
-function confirmDelete({ tag, deleteTag, index }) {
-  if (confirm(`Удалить тег "${tag.text}"?`)) {
-    deleteTag(); // Подтверждаем удаление
-  }
-}
-</script>
-```
-
-### Компонент-обертка BlockTags
-Готовый компонент с предложениями тегов и умной фильтрацией:
-
-```vue
-<BlockTags
-  :tags="existingTags"
-  :tags-suggested="[
-    { text: 'story' },
-    { text: 'news' },
-    { text: 'guide' },
-    { text: 'discussion' },
-    { text: 'photos' }
-  ]"
-  @tags-changed="updateTags"
-/>
-```
-
-Компонент BlockTags автоматически:
-- Фильтрует предложения при вводе
-- Показывает оставшиеся неиспользованные теги
-- Позволяет добавлять теги кликом на предложения
-- Синхронизирует состояние с родителем
-
-## Props
-
-| Prop | Тип | По умолчанию | Описание |
-|------|-----|--------------|----------|
-| `modelValue` | String | `''` | Связанное значение поля ввода |
-| `tags` | Array | `[]` | Массив существующих тегов |
-| `autocomplete-items` | Array | `[]` | Элементы для автодополнения |
-| `allow-edit-tags` | Boolean | `false` | Разрешить редактирование тегов |
-| `add-on-key` | Array | `[13]` | Клавиши для создания тега |
-| `save-on-key` | Array | `[13]` | Клавиши для сохранения при редактировании |
-| `separators` | Array | `[';']` | Символы-разделители |
-| `max-tags` | Number | - | Максимальное количество тегов |
-| `maxlength` | Number | - | Максимальная длина тега |
-| `placeholder` | String | `'Add Tag'` | Текст-заполнитель |
-| `validation` | Array | `[]` | Правила валидации |
-| `avoid-adding-duplicates` | Boolean | `true` | Запретить дубликаты |
-| `add-on-blur` | Boolean | `true` | Создать тег при потере фокуса |
-| `add-from-paste` | Boolean | `true` | Создавать теги из вставленного текста |
-| `delete-on-backspace` | Boolean | `true` | Удаление через Backspace |
-| `disabled` | Boolean | `false` | Отключить компонент |
-| `autocomplete-min-length` | Number | `1` | Минимум символов для автодополнения |
-| `autocomplete-filter-duplicates` | Boolean | `true` | Фильтровать дубликаты в автодополнении |
-| `add-only-from-autocomplete` | Boolean | `false` | Добавлять только из списка автодополнения |
-| `is-duplicate` | Function | - | Кастомная функция проверки дубликатов |
-
-## События
-
-| Событие | Payload | Описание |
-|---------|---------|----------|
-| `tags-changed` | Array | Изменение массива тегов |
-| `before-adding-tag` | {tag, addTag} | Перед добавлением тега |
-| `before-deleting-tag` | {index, tag, deleteTag} | Перед удалением тега |
-| `before-editing-tag` | {index, tag, editTag} | Перед редактированием |
-| `before-saving-tag` | {index, tag, saveTag} | Перед сохранением изменений |
-| `adding-duplicate` | tag | Попытка добавить дубликат |
-| `saving-duplicate` | tag | Попытка сохранить дубликат |
-| `max-tags-reached` | tag | Достигнут лимит тегов |
-| `tag-clicked` | {tag, index} | Клик по тегу |
-
-## Формат тега
-
-```javascript
-{
-  text: 'Tag text',           // Текст тега (обязательно)
-  classes: 'custom-class',    // CSS классы (опционально)
-  style: 'color: red',        // Inline стили (опционально)
-  // Любые дополнительные свойства сохраняются
-}
-```
-
-## Правила валидации (продвинутые примеры)
-
-```javascript
-const validationRules = [
-  // RegExp валидация
-  {
-    classes: 'no-numbers',
-    rule: /^[^0-9]*$/,
-  },
-  
-  // Функциональная валидация
-  {
-    classes: 'min-length',
-    rule: (tag) => tag.text.length >= 3,
-    disableAdd: true  // Блокирует добавление
-  },
-  
-  // Строковая валидация (преобразуется в RegExp)
-  {
-    classes: 'email-format',
-    rule: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
-  },
-  
-  // Сложная валидация с контекстом
-  {
-    classes: 'no-special-chars',
-    rule: (tag) => {
-      const forbidden = ['@', '#', '$', '%'];
-      return !forbidden.some(char => tag.text.includes(char));
-    }
-  }
-];
-
-// Кастомная функция проверки дубликатов
-function customDuplicateCheck(tags, tag) {
-  // Проверка не только по тексту, но и по другим полям
-  return tags.some(t => 
-    t.text.toLowerCase() === tag.text.toLowerCase() ||
-    t.id === tag.id
-  );
-}
-```
-
-## Стилизация и CSS
-
-### Основные классы компонента
-```scss
-// Контейнер
-.vue-tags-input          // Основной контейнер
-.ti-disabled             // Отключенное состояние
-.ti-focus                // Фокус на компоненте
-
-// Теги
-.ti-tag                  // Основной класс тега
-.ti-valid                // Валидный тег
-.ti-invalid              // Невалидный тег  
-.ti-duplicate            // Тег-дубликат
-.ti-editing              // Тег в режиме редактирования
-.ti-deletion-mark        // Тег помечен для удаления
-
-// Структура тега
-.ti-content              // Контейнер содержимого тега
-.ti-tag-center           // Центральная часть тега
-.ti-tag-left             // Левая часть (слот)
-.ti-tag-right            // Правая часть (слот)
-.ti-actions              // Контейнер кнопок действий
-
-// Input
-.ti-input                // Контейнер input
-.ti-tags                 // Список тегов
-.ti-new-tag-input        // Поле ввода нового тега
-.ti-new-tag-input-wrapper // Обертка поля ввода
-.ti-tag-input            // Input для редактирования тега
-
-// Автодополнение
-.ti-autocomplete         // Контейнер автодополнения
-.ti-item                 // Элемент списка автодополнения
-.ti-selected-item        // Выбранный элемент
-
-// Иконки
-.ti-icon-close           // Иконка закрытия (✕)
-.ti-icon-undo            // Иконка отмены (↺)
-.ti-icon-check           // Иконка подтверждения
-
-// Вспомогательные
-.ti-hidden               // Скрытый элемент для расчета размеров
-```
-
-### Переменные SCSS
-```scss
-$error: #e54d42;         // Цвет ошибки
-$success: #68cd86;       // Цвет успеха  
-$warn: #ffb648;          // Цвет предупреждения
-```
-
-### Кастомизация через CSS переменные
-```css
-.vue-tags-input {
-  --main: 255, 215, 0;   /* Основной цвет */
-  --black: 0, 0, 0;      /* Цвет текста */
-}
-```
-
-### Пример полной кастомизации
-```scss
-.my-custom-tags {
-  .ti-tag {
-    background: linear-gradient(45deg, #667eea, #764ba2);
-    color: white;
-    border-radius: 20px;
-    padding: 5px 12px;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    
-    &:hover {
-      transform: scale(1.05);
-      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    }
-    
-    &.ti-editing {
-      background: #f0f0f0;
-      color: #333;
-    }
-    
-    &.ti-deletion-mark {
-      animation: shake 0.5s;
-      background: #ff4757;
-    }
-  }
-  
-  .ti-autocomplete {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    
-    .ti-selected-item {
-      background: #667eea;
-      color: white;
-    }
-  }
-}
-
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-5px); }
-  75% { transform: translateX(5px); }
-}
-```

package/src/components/FieldTags/create-tags.js

@@ -1,97 +0,0 @@
-// helper functions
-
-const validateUserRules = (tag, validation) => {
-  return validation
-    .filter(val => {
-      const { text } = tag;
-      // if the rule is a string, we convert it to RegExp
-      if (typeof val.rule === 'string') return !new RegExp(val.rule).test(text);
-
-      if (val.rule instanceof RegExp) return !val.rule.test(text);
-
-      // if we deal with a function, invoke it
-      const isFunction = {}.toString.call(val.rule) === '[object Function]';
-      if (isFunction) return val.rule(tag);
-    })
-    .map(val => val.classes);
-};
-
-const clone = node => JSON.parse(JSON.stringify(node));
-
-const findIndex = (arr, callback) => {
-  let index = 0;
-  while (index < arr.length) {
-    if (callback(arr[index], index, arr)) return index;
-    index++;
-  }
-  return -1;
-};
-
-const createClasses = (tag, tags, validation = [], customDuplicateFn) => {
-  if (tag.text === undefined) tag = { text: tag };
-  
-  // Ensure tags is an array
-  if (!Array.isArray(tags)) tags = [];
-
-  // create css classes from the user validation array
-  const classes = validateUserRules(tag, validation);
-
-  // if we find the tag, it's an exsting one which is edited.
-  // in this case we must splice it out
-  const index = findIndex(tags, t => t === tag);
-  const tagsDiff = clone(tags);
-  const inputTag = index !== -1 ? tagsDiff.splice(index, 1)[0] : clone(tag);
-
-  // check whether the tag is a duplicate or not
-  const duplicate = customDuplicateFn ? customDuplicateFn(tagsDiff, inputTag) : (Array.isArray(tagsDiff) ? tagsDiff.map(t => t.text).indexOf(inputTag.text) !== -1 : false);
-
-  // if it's a duplicate, push the class duplicate to the array
-  if (duplicate) classes.push('ti-duplicate');
-
-  // if we find no classes, the tag is valid → push the class valid
-  classes.length === 0 ? classes.push('ti-valid') : classes.push('ti-invalid');
-  return classes;
-};
-
-/**
- * @description Create one tag out of a String or validate an existing one
- * @property {helpers}
- * @param {Object|String} tag A tag which should be validated | A String to create a tag
- * @param {Array} tagsarray The tags array
- * @param {Array} [validation=[]] The validation Array is optional (pass it if you use one)
- * @returns {Object} The created (validated) tag
- */
-const createTag = (tag, ...rest) => {
-  // if text is undefined, a string is passed. let's make a tag out of it
-  if (tag.text === undefined) tag = { text: tag };
-
-  // we better make a clone to not getting reference trouble
-  const t = clone(tag);
-  
-  // Ensure the first argument in rest (tags array) is actually an array
-  if (rest[0] && !Array.isArray(rest[0])) {
-    rest[0] = [];
-  }
-
-  // create the validation classes
-  t.tiClasses = createClasses(tag, ...rest);
-  return t;
-};
-
-/**
- * @description Create multiple tags out of Strings or validate existing tags
- * @property {helpers}
- * @param {Array} tagsarray An Array containing tags or strings. See example below.
- * @param {Array} [validation=[]] The validation Array is optional (pass it if you use one)
- * @returns {Array} An array containing (validated) tags
- * @example  &#47;* Example to call the function *&#47;
-   const validatedTags = createTags(['tag1Text', 'tag2Text'], [{ type: 'length', rule: /[0-9]/ }])
- */
-const createTags = (tags, ...rest) => {
-  if (!Array.isArray(tags)) {
-    return [];
-  }
-  return tags.map(t => createTag(t, tags, ...rest));
-};
-
-export { clone, createClasses, createTag, createTags };

package/src/components/FieldTags/tag-input.vue

@@ -1,55 +0,0 @@
-<!-- A helper component used by VueTagsInput and can be put into the tag-center slot -->
-
-<template>
-  <input
-    v-if="scope.edit"
-    v-model="scope.tag.text"
-    :maxlength="scope.maxlength"
-    type="text"
-    class="ti-tag-input"
-    size="1"
-    @input="scope.validateTag(scope.index, $event)"
-    @blur="scope.performCancelEdit(scope.index)"
-    @keydown="scope.performSaveEdit(scope.index, $event)"
-  >
-</template>
-
-<script>
-
-export default {
-  name: 'TagInput',
-  props: {
-    scope: {
-      type: Object,
-    },
-  },
-};
-
-</script>
-
-<style lang="css" >
-.ti-tag-input {
-  background-color: transparent;
-  color: inherit;
-  border: none;
-  padding: 0px;
-  margin: 0px;
-  display: flex;
-  top: 0px;
-  position: absolute;
-  width: 100%;
-  line-height: inherit;
-}
-
-.ti-tag-input::-ms-clear {
-  display: none;
-}
-
-input:focus {
-  outline: none;
-}
-
-input[disabled] {
-  background-color: transparent;
-}
-</style>