@webitel/ui

Appearance

Card Tools / Composables ​

useCardComponent – all-in-one на рівні клієнта ​

Основний composable для роботи на рівні клієнта [цього пакета].

  • Імпортується в компонент враппера табів карточки (opened-entity.vue).

  • Отримує параметром useCardStore, з цього ж модуля.

  • Вертає все що треба (і не треба) для карточки. Тут вже дивіться типи, IDE вам підтягне.

Вкладені composables ​

WARNING

Зверніть увагу! Якщо вам треба там щось поміняти, але ви не є безпосереднім мейнтейнером цього пакета, то не певен, що вам варто лізти сюди в глибину згідно нашого 1-2 розділення 🙂

Ідея ​

Ідея така: мінімізувати кількість імпортів і коду на рівні клієнтського компонента. Тобто, щоб не було явного "розпаковування" useCardStore, і перекидання його параметрів по безлічі компоузаблів, між якими теж треба ті параметри перекидати туди-сюди.

Тому, модуль спеціально був задизайнений так, щоб мінімалізувати взаємодію клієнтських компонентів з нутрощами ліби. Тому і маємо тут вкладені composables, які "ковбасяться" в середині і вертають на "клієнта" тільки те що потрібно.

useCardValidation ​

IMPORTANT

Зверніть увагу! саме useCardValidation в результаті вертає на клієнтський компонент modelValue, до якого потім через v-model вʼяжуться інпути форми.

useNestedCardComponent – вкладена карточка ​

Для карточок, які живуть всередині іншої карточки — popup або child-route.

  • **Імпортується в вкладений компонент

  • Обгортка над useCardComponent з manualSetup: true.

  • Параметр routeParamName — ім'я ключа в route.params для ID вкладеного запису (напр. 'statusConditionId'). Якщо відрізняється від дефолтного 'id' — карточка вважається вкладеною.

  • parentId читається автоматично з route.params.id — передавати з компонента не потрібно.

  • **Повертає той самий набір значень **, що й useCardComponent: isNew, hasValidationErrors, save, modelValue

Детальний приклад: Nested Card Usage.

useCardAnyFieldEditedWatcher – dirty-флаг локального драфта ​

Той самий isAnyFieldEdited, що вертає useCardComponent, але для локального ref — popup без власного card store.

  • Заміна value новим обʼєктом скидає dirty.
  • Мутація полів in-place вмикає dirty.
ts
import { useCardAnyFieldEditedWatcher } from '@webitel/ui-datalist/card';

const draft = ref(emptyItem());
const { isAnyFieldEdited } = useCardAnyFieldEditedWatcher({
  value: draft,
});

watch(shown, (isShown) => {
  if (!isShown) return;
  draft.value = { ...emptyItem(), ...item }; // reset
});

useCardRouting ​

Внутрішній composable для синхронізації store itemId з URL.

  • Для звичайної карточки: routeParamName = 'id' (default).
  • Для вкладеної: custom routeParamName — URL оновлюється лише після створення нового запису ('new' → server ID).

Інші composables ​

1 composable => 1 ui фіча для типового компонента карточки.

Не певен, що тут варто розписувати. Але якщо треба описати щось, то пінгайте мене (@d.lohvinov).