Vue-FAQ
925 subscribers
563 photos
90 videos
558 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

Contacts: @RuslanMakarov
Download Telegram
Создатели UI библиотеки chakra-ui для React создали еще одну приятно смотрящуюся библиотеку для различных фреймворков, в том числе и Vue - Ark

Отличительные особенности - headless, a11y

Основана на другой их UI библиотеке - zag.js, которая работает на технике конечных автоматов состояния

Разрабатывает команда из Нигерии

#ui #lib #headless #arkui
Мы уже писали об Ark UI библиотеке

На днях видный член vuejs core team и VitePress maintainer
Divyansh Singh назвал их лучшей альтернативой React Aria во Vue экосистеме

Unstyled, хорошая поддержка A11y. Vue версия еще неполная. Документация скудная, не для вкатунов. Нужно думать. Основана библиотека на zag.js, документацию можно смотреть там.

Выглядит очень хорошей альтернативой radix/reka/shadcn|vue, только без встроенных tailwind-ов, vueuse-ов, unjs-ов, tanstack-ов и других скрытых зависимостей и обмана типа "copy-paste и всё".

Попробовал на своем проекте. Сперва заменил FilePond на FileUpload - (-100Kb; +30Kb). Стало значительно красивей и намного кастомизируемей (стили генерил AI). Затем добавил Tabs (+20Кб). Затем - Combobox с тэгами и выпадающим меню, которое во многих UI библиотеках тащит 200-400Кб из-за позиционирования - (+70Кб). В общем, вполне экономично и удобно для создания своего небольшого UI kit с требованиями к A11y.

Ну и правильный DatePicker можно собрать.

#ui #lib #headless #arkui
Технические детали проекта выше

ark-ui в некоторых местах глючит, но как UI библиотека понравилась, буду использовать.

Для графика (chart) модели из TS переделал на классы (без реактивности внутри), стало намного удобней

AI очень помогает делать перевод сайта сразу на нескольких языках одновременно с кодингом

Используются разные LLM для парсинга файлов и аналитических отчетов (подешевле и подороже)

Кнопка справа внизу (FAB) идет как волшебная палочка - в ней разные действия в зависимости от страницы и контекста.
Её задача - сделать удобный UX, чтобы пользователь не бегал по всему экрану пальцем

PWA, variable fonts, JSON-RPC, JSON5

#lissa #pet #arkui
Хорошая библиотека Ark-ui, но с особенностями. Особенно у "выпадашки" HoverCard (для меню которая)

Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить :key на HoverCard и инкрементить его при апдейтах - и всё сразу заработало как надо. Ну, ё-моё...

Немного радует, что довольно часто обновляется и фиксят баги.

P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.

#lib #arkui
Получил очень интересный и полезный опыт:

1. Выделив UI часть проекта Lissa Health в отдельный модуль (привет, #fsd)
2. Добавив дизайн систему на CSS свойствах и оформив всё как UI kit
3. Выделив в отдельный репозиторий, который ставится как Git submodule и подключается через npm локально (для быстрых правок)
4. Создав документацию
5. Добавив темизацию и кастомизацию компонентов
6. Переиспользовав его в других проектах

На npmjs.org не публиковал, на универсальность, полноту (не собираюсь выпускать ее как общую библиотеку) и актуальность документации не претендую, но можно просто посмотреть как работать с Ark-UI.

Alt-UI

#arkui #altui #ui