FilePond

Подсказали красивый file uploader компонент

15K+ звезд, много плагинов,, правда, довольно увесистый - 100Кб+

На JS. Подключается монтированием к элементу.

<script setup lang="ts">
import * as FilePond from "filepond";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import { onMounted, ref, useTemplateRef } from "vue";
import "filepond/dist/filepond.min.css";

const fileInput = useTemplateRef("fileInput");

FilePond.registerPlugin(FilePondPluginFileValidateType);

onMounted(() => {
  FilePond.setOptions({
    acceptedFileTypes: ["image/*", "application/pdf"],
    server: "api/upload/",
  });
  FilePond.create(fileInput.value);
});
</script>

<template>
  <div class="analysis-view">
    <h2>Analysis upload</h2>
    <p></p>
    <input
      ref="fileInput"
      type="file"
      class="filepond"
      name="filepond"
      multiple
      data-allow-reorder="true"
      data-max-file-size="3MB"
      data-max-files="3"
    />
  </div>
</template>

Вот, кстати, один из вариантов использовать динамические импорты/роуты - в мобильной версии drag-n-drop не нужен, поэтому можно обойтись более простым file input и сэкономить на бандле.

#lib

Для реализации своих tooltip-ов и "выпадашек", наверное, самым оптимальный вариантом является использование современной и минималистичной библиотеки Floating UI

Их Vue адаптер мне не подошел. Вот простой вариант своего тултипа на их чистом js пакете.

В данном случае содержимое тултипа является ребенком элемента, на котором его надо показать. Возможны другие варианты реализации, включая кастомную директиву.

Обертывать в Tooltip компонент то, на чем его надо показать, имхо, извращение.

<script setup lang="ts">
import { computePosition, flip, offset, shift } from "@floating-ui/dom";
import { onMounted, ref, useTemplateRef } from "vue";

const popover = useTemplateRef("popover");

onMounted(() => {
  popover.value.showPopover();
  computePosition(popover.value.parentElement, popover.value, {
    placement: "left",
    middleware: [flip(), shift({ padding: 5 }), offset(10)],
  }).then(({ x, y }) => {
    Object.assign(popover.value.style, {
      left: `${x}px`,
      top: `${y}px`,
    });
  });
});
</script>

<template>
  <div
    ref="popover"
    class="popover"
    popover
    role="tooltip"
  >
    <div class="tooltip-body">Hello</div>    
  </div>
</template>

<style scoped>
.popover {
  position: fixed;
  width: max-content;
  top: 0;
  left: 0;
  margin: 0;
  padding: 1em;
  text-align: left;
  border: 1px solid var(--bbl-c-border);
  border-radius: 5px;
  max-width: 400px;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.12),
    0 3px 9px rgba(0, 0, 0, 0.12);
  border-color: #bbb;
}
  </style>

#lib #tooltip #dropdown

PrimeVue написан на JS (не TypeScript), в Options API стиле.

#lib #typescript

Иногда при создании своих UI компонент не обязательно использовать громоздкие Vue библиотеки, достаточно стилизации CSS фреймворка.

Например, минималистичный BeerCSS

CSS фреймворки подходят как минимум для прототипирования и вдохновения. Также их можно использовать с unstyled компонентами, типа Radix Vue

#css #lib #ui

Уже писали год назад об этом каталоге UI библиотек

https://ui-libs.vercel.app/

С тех пор там немного прибавилось библиотек и функционала

#ui #lib

Еще одна UI библиотека на Vue 3 от нашего соотечественника для ознакомления

proxima-vue

В альфа версии, но кода много

#ui #lib

Написал vite-plugin-json-md

Заменяет в JSON/JSON5 файлах markdown на сконвертированный HTML

Удобен при i18n (интернационализации), когда текст перевода лежит в json файлах, но иногда бывает на странице сложное форматирование и разбивать по ключам очень хаотично. Можно записать тогда через markdown.

Обрабатывает как инлайн вставки markdown, так и ссылки на внешние md файлы

#lib #i18n #markdown

Переделал прошлый плагин, сделал его удобней и опиньонейтед - полностью под конкретный случай i18n

vite-plugin-i18n-json-md - берет JSON* файлы из директории локали, конвертирует markdown, если он там есть, объединяет всё в один и выводит в стандартный для i18n json, либо же в json5 или js формате. По желанию - минификация.

В конфиге указывается входная директория, выходная и локали.

import { i18nJsonMdPlugin } from "vite-plugin-i18n-json-md";

export default defineConfig({

  plugins: [
    vue(),
    i18nJsonMdPlugin({
      sourceDir: "src/app/locales",
      outputDir: "src/assets/i18n",
      locales: ["en", "ru", "gr"],
      mode: "dev",
      outputFormat: "json",
    }),
  ],

Переводы удобно держать в небольших файлах и переводить через AI - как целиком, так и автокомплитом. Добавил ключ с переводом в один файл, переходишь в аналогичный файл в другой локали - а он уже предлагает в нужном месте с нужным переводом вставить строку. Молодец.

#vite #i18n #lib

Популярность по загрузкам некоторых UI библиотек

#lib #ui #stats

В мой vite-plugin-html-injection сделали первый PR

Приятно, чёрт возьми.

Теперь во фрагментах можно использовать Vite env переменные, типа %VITE_API_URL%, которые будут заменены на их значения.

#vite #plugin #lib

Написал VitePress плагин для генерации диаграмм (Mermaid, PlantUML и других)

#vitepress #lib

Интересный JSON Viewer попался

Удобно смотреть, для дебага в админке и вообще

#json #lib

Подписчик поделился самописным расширением для VS Code — помогает быстро и безболезненно менеджерить локализацию в vue-i18n. Добавлять ключи, переводить на все языки (через AI), быстро обновлять существующие фразы... Короче, просто зацените демку.

Сейчас на стадии сбора фидбека и различных юз-кейсов. Кому интересно потыкать раннюю версию (бесплатно ofc), тут можно заполнить небольшую форму: https://tally.so/r/mDMv5b

Просит потестировать и покритиковать в комментариях

Лично я использую всегда самописную реализацию i18n, но расширение выглядит очень круто и использует AI именно так, как его надо использовать - незаметно, под капотом, значительно расширяя функционал приложения и сильно улучшая UX/DX. Мне такого не хватает, потому что приходится вручную ходить по json файлам и добавлять новый ключ, пусть даже и автокомплит это быстро делает за тебя.

#vscode #extension #i18n #lib

Большой обзор rich text editors для встраивания в свой фронт

#editor #lib

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

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

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

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

#lib #arkui