Compare commits
11 Commits
@advdomini
...
@advdomini
| Author | SHA1 | Date | |
|---|---|---|---|
12c14e8eb5
|
|||
|
8c7e9aa5e0
|
|||
|
cdb33bd6f5
|
|||
|
708eb1fd3c
|
|||
|
23bc0a440e
|
|||
|
b816710989
|
|||
|
2fc1a44b6c
|
|||
|
3f2566b9d1
|
|||
|
c8bf000479
|
|||
|
decf05dcad
|
|||
|
b019ae2344
|
@@ -26,6 +26,7 @@
|
|||||||
"eslint/no-inline-comments": "off",
|
"eslint/no-inline-comments": "off",
|
||||||
"eslint/no-irregular-whitespace": ["error", { "skipTemplates": true }],
|
"eslint/no-irregular-whitespace": ["error", { "skipTemplates": true }],
|
||||||
"eslint/no-magic-numbers": "off",
|
"eslint/no-magic-numbers": "off",
|
||||||
|
"eslint/no-nested-ternary": "off",
|
||||||
"eslint/no-new": "off",
|
"eslint/no-new": "off",
|
||||||
"eslint/no-shadow": "off",
|
"eslint/no-shadow": "off",
|
||||||
"eslint/no-ternary": "off",
|
"eslint/no-ternary": "off",
|
||||||
@@ -33,6 +34,7 @@
|
|||||||
"eslint/no-undefined": "off",
|
"eslint/no-undefined": "off",
|
||||||
"eslint/no-underscore-dangle": "off",
|
"eslint/no-underscore-dangle": "off",
|
||||||
"eslint/no-unexpected-multiline": "off",
|
"eslint/no-unexpected-multiline": "off",
|
||||||
|
"eslint/one-var": "off",
|
||||||
"eslint/prefer-destructuring": [
|
"eslint/prefer-destructuring": [
|
||||||
"warn",
|
"warn",
|
||||||
{
|
{
|
||||||
@@ -55,6 +57,7 @@
|
|||||||
"oxc/no-map-spread": "off",
|
"oxc/no-map-spread": "off",
|
||||||
"oxc/no-optional-chaining": "off",
|
"oxc/no-optional-chaining": "off",
|
||||||
"oxc/no-rest-spread-properties": "off",
|
"oxc/no-rest-spread-properties": "off",
|
||||||
|
"unicorn/explicit-timer-delay": "off",
|
||||||
"unicorn/filename-case": ["warn", { "cases": { "kebabCase": true, "pascalCase": true } }],
|
"unicorn/filename-case": ["warn", { "cases": { "kebabCase": true, "pascalCase": true } }],
|
||||||
"unicorn/no-empty-file": "warn",
|
"unicorn/no-empty-file": "warn",
|
||||||
"unicorn/no-nested-ternary": "off",
|
"unicorn/no-nested-ternary": "off",
|
||||||
|
|||||||
47
packages/browserslist-to-targets/README.md
Normal file
47
packages/browserslist-to-targets/README.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# @advdominion/browserslist-to-targets
|
||||||
|
|
||||||
|
Преобразует конфиг [browserslist](https://github.com/browserslist/browserslist) в массив target-строк, совместимый с [esbuild](https://esbuild.github.io) и [Oxc](https://oxc-project.github.io).
|
||||||
|
|
||||||
|
## Зачем
|
||||||
|
|
||||||
|
Оба инструмента (esbuild и Oxc) понимают ограниченный набор целевых браузеров, который отличается от browserslist. Пакет приводит результат `browserslist()` к короткому esbuild-формату: `["chrome109", "ios18.5"]`, а всё, что esbuild/Oxc не поддерживает (`and_chr`, `kaios`, `samsung` и т.д.) — отбрасывает.
|
||||||
|
|
||||||
|
## Установка
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn add -D @advdominion/browserslist-to-targets
|
||||||
|
```
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
```js
|
||||||
|
import browserslist from 'browserslist';
|
||||||
|
import { browserslistToTargets } from '@advdominion/browserslist-to-targets';
|
||||||
|
|
||||||
|
const targets = browserslistToTargets(browserslist());
|
||||||
|
// ["chrome109", "edge149", "firefox140", "ios18.5", "opera127", "safari26.5"]
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### `browserslistToTargets(browsers): string[]`
|
||||||
|
|
||||||
|
- `browsers` — массив строк от `browserslist()`, например `["chrome 151", "ios_saf 26.6"]`.
|
||||||
|
- Возвращает массив target-строк без пробела: `["chrome151", "ios26.5"]`.
|
||||||
|
|
||||||
|
## Правила преобразования
|
||||||
|
|
||||||
|
| browserslist | esbuild/Oxc | Примечание |
|
||||||
|
| ------------------------------------------------- | --------------- | ------------------------------------------ |
|
||||||
|
| `chrome 151` | `chrome151` | версия становится «приклеенной» к имени |
|
||||||
|
| `ios_saf 26.6` | `ios26.5` | `ios_saf → ios`, остаётся самая старая |
|
||||||
|
| `ios_saf 25-26.5` | `ios25` | `ios_saf → ios`, диапазон → нижняя граница |
|
||||||
|
| `android 151` | `chrome151` | `android → chrome` |
|
||||||
|
| `ios 26.0` | `ios26` | убирает завершающий `.0` |
|
||||||
|
| `and_chr`, `kaios`, `samsung`, `op_mob`, `and_ff` | — отбрасывается | нет в esbuild/Oxc |
|
||||||
|
|
||||||
|
Для каждого браузера остаётся самая старая версия — трансформации покрывают самую консервативную цель.
|
||||||
|
|
||||||
|
## Лицензия
|
||||||
|
|
||||||
|
MIT
|
||||||
65
packages/browserslist-to-targets/index.js
Normal file
65
packages/browserslist-to-targets/index.js
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
/**
|
||||||
|
* Браузеры, поддерживаемые esbuild/Oxc.
|
||||||
|
*
|
||||||
|
* Зачем: browserslist как входной конфиг должен быть приведён к целевому
|
||||||
|
* формату, который понимает минификатор/трансформер. У esbuild и Oxc
|
||||||
|
* список целевых браузеров жёстко ограничен и отличается от browserslist.
|
||||||
|
* Поэтому мы транслируем браузеры из browserslist в короткий esbuild-формат,
|
||||||
|
* а всё, чего в нём нет — отбрасываем.
|
||||||
|
*/
|
||||||
|
const SUPPORTED_TARGETS = new Set(['es', 'chrome', 'edge', 'firefox', 'ios', 'node', 'safari', 'opera', 'ie']);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Соответствие идентификаторов браузеров browserslist тем, что знает esbuild.
|
||||||
|
*
|
||||||
|
* Browserslist различает `ios_saf` (Safari на iOS) и `android` (Chrome на
|
||||||
|
* Android), тогда как esbuild знает общее `ios` и `chrome`.
|
||||||
|
*/
|
||||||
|
const REPLACES = {
|
||||||
|
ios_saf: 'ios',
|
||||||
|
android: 'chrome',
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Преобразует результат `browserslist()` в массив target-строк для esbuild/Oxc.
|
||||||
|
*
|
||||||
|
* Вход — массив записей вида `"chrome 109"`, `"ios_saf 18.5-18.7"`.
|
||||||
|
* Выход — массив вида `["chrome109", "ios18.5"]`.
|
||||||
|
*
|
||||||
|
* Шаги:
|
||||||
|
* 1. Режем запись на имя и версию.
|
||||||
|
* 2. Подменяем идентификаторы (`ios_saf → ios`, `android → chrome`).
|
||||||
|
* 3. Диапазоны версий сводим к нижней границе (`18.5-18.7 → 18.5`).
|
||||||
|
* 4. Приводим `18.0` к `18` (убираем хвостовой `.0`).
|
||||||
|
* 5. Отбрасываем версии, не проходящие regex (ломают esbuild), и браузеры,
|
||||||
|
* которых нет в `SUPPORTED_TARGETS` (`and_chr`, `kaios`, `samsung` и т.д.).
|
||||||
|
* 6. Для каждого браузера оставляем самую старую версию — esbuild применяет
|
||||||
|
* трансформации, покрывающие самую консервативную цель.
|
||||||
|
* 7. Собираем целевые строки без пробела: `chrome109`.
|
||||||
|
*
|
||||||
|
* @param {string[]} browsers - массив строк браузеров от `browserslist()`.
|
||||||
|
* @returns {string[]} массив target-строк совместимый с esbuild/Oxc.
|
||||||
|
*/
|
||||||
|
export const browserslistToTargets = (browsers) => {
|
||||||
|
const result = new Map();
|
||||||
|
|
||||||
|
for (const browser of browsers) {
|
||||||
|
// Шаг 1: ['chrome', '109'].
|
||||||
|
let [name, version] = browser.split(' ');
|
||||||
|
// Шаг 2: подмена идентификаторов.
|
||||||
|
name = REPLACES[name] ?? name;
|
||||||
|
// Шаг 3: диапазон → нижняя граница.
|
||||||
|
version = version.includes('-') ? version.slice(0, version.indexOf('-')) : version;
|
||||||
|
// Шаг 4: `18.0` → `18`, но `18.5` не должно трогаться.
|
||||||
|
version = version.endsWith('.0') ? version.slice(0, -2) : version;
|
||||||
|
|
||||||
|
// Шаг 5: валидная версия + поддерживаемый браузер.
|
||||||
|
if (/^\d+(\.\d+)*$/.test(version) && SUPPORTED_TARGETS.has(name)) {
|
||||||
|
// Шаг 6: самая старая версия (последняя в списке) перезатирает предыдущую.
|
||||||
|
result.set(name, version);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Шаг 7: собираем без пробела.
|
||||||
|
return [...result].map(([name, version]) => `${name}${version}`);
|
||||||
|
};
|
||||||
14
packages/browserslist-to-targets/package.json
Normal file
14
packages/browserslist-to-targets/package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/browserslist-to-targets",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
}
|
||||||
|
}
|
||||||
70
packages/sass-importer/README.md
Normal file
70
packages/sass-importer/README.md
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
# @advdominion/sass-importer
|
||||||
|
|
||||||
|
Кастомный импортёр для [sass-embedded](https://github.com/sass/dart-sass-embedded), который берёт резолв `@use`/`@forward`-импортов на себя и читает файлы через `node:fs`.
|
||||||
|
|
||||||
|
## Зачем
|
||||||
|
|
||||||
|
В проектах на **Yarn PnP** пакеты лежат не в `node_modules`, а внутри `.zip` по виртуальным путям:
|
||||||
|
|
||||||
|
```
|
||||||
|
.yarn/__virtual__/@example-example-virtual-.../cache/@example-example-....zip/node_modules/@example/example/...
|
||||||
|
```
|
||||||
|
|
||||||
|
`.zip`-путь может открыть только код, читающий файлы через `node:fs` (в нём есть PnP-хуки). А `sass-embedded` читает файлы своим отдельным кодом, `node:fs` не использует, поэтому импорты внутри пакетов не резолвятся. Этот импортёр обходит проблему: он сам превращает импорт в существующий файл (`canonicalize`) и отдаёт его содержимое через `readFileSync` (`load`).
|
||||||
|
|
||||||
|
Работает и в `node-modules`-проектах — там `require` без PnP-хуков, но тот же резолв остаётся корректным.
|
||||||
|
|
||||||
|
## Установка
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn add -D @advdominion/sass-importer
|
||||||
|
```
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createImporter } from '@advdominion/sass-importer';
|
||||||
|
|
||||||
|
const require = createRequire(import.meta.url);
|
||||||
|
const importer = createImporter(require);
|
||||||
|
|
||||||
|
const { css } = compiler.compileString(source, {
|
||||||
|
importers: [importer],
|
||||||
|
loadPaths: ['src/styles'],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Импортёр принимает `require` из `createRequire(import.meta.url)`: в PnP он несёт PnP-хуки, в `node-modules` — обычный `require`. Это позволяет резолвить и пакеты, и их внутренние относительные импорты одинаково надёжно.
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### `createImporter(require): Importer`
|
||||||
|
|
||||||
|
- `require` — функция резолва (обычно `createRequire(import.meta.url)`), используется для ветки `pkg:`.
|
||||||
|
- Возвращает объект из двух колбэков для `sass-embedded`: `canonicalize` и `load`.
|
||||||
|
|
||||||
|
`canonicalize(url, ctx)` превращает импорт в канонический `file://` URL или возвращает `null` («я не знаю такой файл» — тогда Sass перебирает следующие импортёры/`loadPaths`).
|
||||||
|
|
||||||
|
`load(canonicalUrl)` отдаёт содержимое файла и его синтаксис (`syntax: 'scss'`). Если файла нет — бросает `Error: Stylesheet not found: <путь>`.
|
||||||
|
|
||||||
|
## Правила резолва
|
||||||
|
|
||||||
|
| Приоритет | Вариант | Пример |
|
||||||
|
| --------- | ------------------ | --------------------------------------- |
|
||||||
|
| 1 | Точное совпадение | `@use 'variables'` → `variables` (файл) |
|
||||||
|
| 2 | Файл с расширением | `@use 'variables'` → `variables.scss` |
|
||||||
|
| 3 | Каталог с `_index` | `@use './lib'` → `./lib/_index.scss` |
|
||||||
|
| 4 | Каталог с `index` | `@use './lib'` → `./lib/index.scss` |
|
||||||
|
|
||||||
|
Для каталогов берутся `_index` и `index` как с `.scss`, так и с `.css`. Порядок проверок соответствует порядку перебора Sass, поэтому первая найденная запись — приоритетная.
|
||||||
|
|
||||||
|
## Виды импортов
|
||||||
|
|
||||||
|
- `pkg:@scope/pkg/path/to/file` → `require.resolve` + резолв кандидата.
|
||||||
|
- `file:///abs/path` → кандидат по файловому пути.
|
||||||
|
- относительные (`../../variables`) → склейка с каталогом содержащего файла (берётся из `ctx.containingUrl`), затем резолв кандидата.
|
||||||
|
- абсолютные (`/...`) и незнакомые схемы (`http:`, `data:`) → отдаёт `null`, резолв остаётся на Sass.
|
||||||
|
|
||||||
|
## Лицензия
|
||||||
|
|
||||||
|
MIT
|
||||||
150
packages/sass-importer/index.js
Normal file
150
packages/sass-importer/index.js
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
import { existsSync, readFileSync, statSync } from 'node:fs';
|
||||||
|
import path from 'node:path';
|
||||||
|
|
||||||
|
const isFile = (filePath) => existsSync(filePath) && statSync(filePath).isFile();
|
||||||
|
const toFileUrl = (filePath) => new URL(`file://${encodeURI(path.normalize(filePath))}`);
|
||||||
|
const EXTENSIONS = ['.scss', '.css'];
|
||||||
|
|
||||||
|
/*
|
||||||
|
resolveCandidate(lookupPath) — по пути импорта находит существующий SCSS-файл
|
||||||
|
и возвращает его file:// URL.
|
||||||
|
|
||||||
|
Мы сами эмулируем правила резолва Sass, потому что (см. комментарий над importer) взяли резолв на себя,
|
||||||
|
а не отдали его Sass. Sass при обычной работе умеет подбирать: файл без расширения, файл с расширением,
|
||||||
|
_index.scss внутри папки, index.scss внутри папки. Всё это воспроизводим здесь. Порядок проверок
|
||||||
|
соответствует порядку, в котором Sass перебирает варианты, поэтому первая найденная запись — приоритетная.
|
||||||
|
|
||||||
|
Возвращает null, если ни один вариант не существует: для импортёра это сигнал «я не знаю такой файл»,
|
||||||
|
и Sass переберёт другие импортеры/loadPaths.
|
||||||
|
*/
|
||||||
|
const resolveCandidate = (lookupPath) => {
|
||||||
|
/* 1. Точное совпадение: переданный путь уже указывает на существующий файл. */
|
||||||
|
if (isFile(lookupPath)) {
|
||||||
|
return toFileUrl(lookupPath);
|
||||||
|
}
|
||||||
|
/* 2. «Файл с расширением»: path + .scss/.css. Покрывает @use 'variables' -> variables.scss. */
|
||||||
|
for (const ext of EXTENSIONS) {
|
||||||
|
if (isFile(lookupPath + ext)) {
|
||||||
|
return toFileUrl(lookupPath + ext);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 3. «Директория с partial»: <lookupPath>/_index.scss и т.п. — то, что Sass подставляет при импорте папки/фичи. */
|
||||||
|
for (const ext of EXTENSIONS) {
|
||||||
|
const candidate = path.join(lookupPath, `_index${ext}`);
|
||||||
|
if (isFile(candidate)) {
|
||||||
|
return toFileUrl(candidate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 4. «Директория с index»: <lookupPath>/index.scss — обычный fallback, если _index нет. */
|
||||||
|
for (const ext of EXTENSIONS) {
|
||||||
|
const candidate = path.join(lookupPath, `index${ext}`);
|
||||||
|
if (isFile(candidate)) {
|
||||||
|
return toFileUrl(candidate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null; // oxlint-disable-line unicorn/no-null
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Импортер для sass-embedded.
|
||||||
|
|
||||||
|
Проект собирается через Yarn PnP, поэтому пакеты лежат не в node_modules,
|
||||||
|
а внутри .zip по виртуальным путям:
|
||||||
|
.yarn/__virtual__/@example-example-virtual-.../cache/@example-example-....zip/node_modules/@example/example/...
|
||||||
|
.zip-путь может открыть только код, читающий файлы через node:fs (в нём есть PnP-хуки).
|
||||||
|
А sass-embedded читает файлы своим отдельным кодом, node:fs не использует, поэтому мы
|
||||||
|
резолв импортов берём на себя через readFileSync. `require` передаётся извне: в PnP это
|
||||||
|
createRequire(import.meta.url) с PnP-хуками, в node-modules — обычный require.
|
||||||
|
|
||||||
|
Сюда попадают импорты трёх видов: пути с префиксом pkg:, file:// и относительные
|
||||||
|
(в том числе вложенные @use '../../variables' внутри пакета). Все они проходят через
|
||||||
|
resolveCandidate, а содержимое читается через readFileSync, поэтому и пакеты, и их внутренние
|
||||||
|
относительные импорты открываются одинаково надёжно.
|
||||||
|
*/
|
||||||
|
export const createImporter = (require) => ({
|
||||||
|
/*
|
||||||
|
canonicalize(url, ctx) — Sass спрашивает «во что превратить этот импорт, чтобы я мог его прочитать?».
|
||||||
|
На вход приходит строка url (в оригинальном виде из @use/@forward) и контекст ctx с containingUrl —
|
||||||
|
файлом, из которого сделан импорт. Возвращаем канонический file:// URL или null («не знаю»).
|
||||||
|
*/
|
||||||
|
canonicalize(url, ctx) {
|
||||||
|
/*
|
||||||
|
Ветка 1: импорт пакета вида «pkg:@scope/pkg/path/to/file».
|
||||||
|
url.slice(4) убирает префикс «pkg:», остаётся «@example/example/...». require.resolve превращает
|
||||||
|
это имя в абсолютный путь внутри пакета (благодаря PnP-хукам). Затем resolveCandidate
|
||||||
|
подбирает реальный SCSS-файл и возвращает file:// URL.
|
||||||
|
*/
|
||||||
|
if (url.startsWith('pkg:')) {
|
||||||
|
try {
|
||||||
|
return resolveCandidate(require.resolve(url.slice(4)));
|
||||||
|
} catch {
|
||||||
|
/*
|
||||||
|
Пакет не резолвится (нет в зависимостях) — отдаём null, пусть Sass пробует дальше.
|
||||||
|
*/
|
||||||
|
return null; // oxlint-disable-line unicorn/no-null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Ветка 2: Sass уже сам превратил что-то в file:// и спрашивает нас «подтверди/уточни путь».
|
||||||
|
Извлекаем файловый путь через .pathname (декодируем процент-эскейпы) и подбираем кандидата.
|
||||||
|
*/
|
||||||
|
if (url.startsWith('file://')) {
|
||||||
|
return resolveCandidate(decodeURI(new URL(url).pathname));
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Ветка 3: абсолютный путь («/...») или URI с незнакомой схемой («http:», «data:» и т.п.).
|
||||||
|
Здесь мы в резолве не участвуем — отдаём null и позволяем Sass/loadPaths обработать самим.
|
||||||
|
*/
|
||||||
|
if (url.includes(':') || url.startsWith('/')) {
|
||||||
|
return null; // oxlint-disable-line unicorn/no-null
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Ветка 4: относительный импорт («../../variables», «../link»).
|
||||||
|
Это именно тот случай, который ломает сборку в PnP: путь ведёт внутрь .zip.
|
||||||
|
Чтобы его открыть, нужен базовый файл, из которого сделан импорт, — его даёт ctx.containingUrl.
|
||||||
|
Склеиваем относительный путь с каталогом содержащего файла через path.resolve и резолвим через
|
||||||
|
resolveCandidate.
|
||||||
|
*/
|
||||||
|
const containingUrl = ctx?.containingUrl;
|
||||||
|
if (containingUrl) {
|
||||||
|
const abs = path.resolve(path.dirname(decodeURI(containingUrl.pathname)), url);
|
||||||
|
return resolveCandidate(abs);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Если контекста нет (чего в норме не бывает) — «не знаю», идём к следующему импортеру/loadPaths.
|
||||||
|
*/
|
||||||
|
return null; // oxlint-disable-line unicorn/no-null
|
||||||
|
},
|
||||||
|
|
||||||
|
/*
|
||||||
|
load(canonicalUrl) — Sass просит содержимое файла по каноническому URL, который мы вернули в canonicalize.
|
||||||
|
Возвращаем текст файла и его синтаксис, чтобы Sass не гадал.
|
||||||
|
*/
|
||||||
|
load(canonicalUrl) {
|
||||||
|
/*
|
||||||
|
file:// URL извлекаем как путь: .pathname уже декодирован, но для надёжности декодируем явно.
|
||||||
|
*/
|
||||||
|
const filePath = decodeURI(canonicalUrl.pathname);
|
||||||
|
if (!isFile(filePath)) {
|
||||||
|
/*
|
||||||
|
Файла нет или это каталог — кидаем понятную ошибку с путём, чтобы в логе было видно, чего не хватает.
|
||||||
|
*/
|
||||||
|
throw new Error(`Stylesheet not found: ${filePath}`);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
/*
|
||||||
|
readFileSync — синхронно читаем. Для PnP важен именно node:fs (см. док над importer):
|
||||||
|
только читаемый через него файл открывается внутри .zip.
|
||||||
|
*/
|
||||||
|
contents: readFileSync(filePath, 'utf8'),
|
||||||
|
/*
|
||||||
|
Говорим Sass, что это SCSS-файл (иначе он пытается угадать по расширению, что для .zip-пути ненадёжно).
|
||||||
|
*/
|
||||||
|
syntax: 'scss',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
14
packages/sass-importer/package.json
Normal file
14
packages/sass-importer/package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/sass-importer",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
Включает в себя:
|
Включает в себя:
|
||||||
|
|
||||||
- [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss)
|
- [stylelint-config-recommended-scss](https://github.com/stylelint-scss/stylelint-config-recommended-scss)
|
||||||
- [stylelint-order](https://github.com/hudochenkov/stylelint-order)
|
- [stylelint-order](https://github.com/hudochenkov/stylelint-order)
|
||||||
- Проверку кода тега `<style>` в файлах `.vue`
|
- Проверку кода тега `<style>` в файлах `.vue`
|
||||||
|
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
### Требования
|
### Требования
|
||||||
|
|
||||||
- [Stylelint](https://stylelint.io/) ^10.0.0
|
- [Stylelint](https://stylelint.io/)
|
||||||
|
|
||||||
### Подключание
|
### Подключание
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable unicorn/no-null */
|
/* eslint-disable unicorn/no-null */
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
extends: ['stylelint-config-standard-scss'],
|
extends: ['stylelint-config-recommended-scss'],
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
files: ['**/*.vue'],
|
files: ['**/*.vue'],
|
||||||
@@ -14,42 +14,33 @@ export default {
|
|||||||
'no-invalid-double-slash-comments': null,
|
'no-invalid-double-slash-comments': null,
|
||||||
'no-invalid-position-declaration': [true, { ignoreAtRules: ['media'] }],
|
'no-invalid-position-declaration': [true, { ignoreAtRules: ['media'] }],
|
||||||
'property-disallowed-list': [
|
'property-disallowed-list': [
|
||||||
'animation',
|
['animation', 'background', 'border', 'flex', 'font', 'grid', 'margin', 'padding', 'transition'],
|
||||||
'background',
|
{
|
||||||
'border',
|
severity: 'warning',
|
||||||
'flex',
|
},
|
||||||
'font',
|
|
||||||
'grid',
|
|
||||||
'margin',
|
|
||||||
'padding',
|
|
||||||
'transition',
|
|
||||||
],
|
],
|
||||||
'color-hex-length': 'long',
|
'color-hex-length': ['long', { severity: 'warning' }],
|
||||||
'font-weight-notation': 'named-where-possible',
|
'font-weight-notation': ['named-where-possible', { severity: 'warning' }],
|
||||||
'container-name-pattern': null,
|
|
||||||
'custom-media-pattern': null,
|
|
||||||
'custom-property-pattern': null,
|
|
||||||
'keyframes-name-pattern': null,
|
|
||||||
'layer-name-pattern': null,
|
|
||||||
'selector-class-pattern': null,
|
|
||||||
'selector-id-pattern': null,
|
|
||||||
'declaration-block-no-redundant-longhand-properties': null,
|
|
||||||
'scss/double-slash-comment-empty-line-before': null,
|
|
||||||
'order/order': [
|
'order/order': [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: 'at-rule',
|
||||||
|
name: 'use',
|
||||||
|
},
|
||||||
|
'dollar-variables',
|
||||||
|
'custom-properties',
|
||||||
|
'declarations',
|
||||||
|
{
|
||||||
|
type: 'at-rule',
|
||||||
|
name: 'include',
|
||||||
|
},
|
||||||
|
'at-rules',
|
||||||
|
'rules',
|
||||||
|
],
|
||||||
{
|
{
|
||||||
type: 'at-rule',
|
severity: 'warning',
|
||||||
name: 'use',
|
|
||||||
},
|
},
|
||||||
'dollar-variables',
|
|
||||||
'custom-properties',
|
|
||||||
'declarations',
|
|
||||||
{
|
|
||||||
type: 'at-rule',
|
|
||||||
name: 'include',
|
|
||||||
},
|
|
||||||
'at-rules',
|
|
||||||
'rules',
|
|
||||||
],
|
],
|
||||||
'order/properties-alphabetical-order': true,
|
'order/properties-alphabetical-order': [true, { severity: 'warning' }],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@advdominion/stylelint-config",
|
"name": "@advdominion/stylelint-config",
|
||||||
"version": "1.1.0",
|
"version": "2.0.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
@@ -12,10 +12,10 @@
|
|||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"postcss": "^8.5.6",
|
"postcss": "^8.5.26",
|
||||||
"postcss-html": "^1.8.1",
|
"postcss-html": "^2.0.0",
|
||||||
"stylelint-config-standard-scss": "^17.0.0",
|
"stylelint-config-recommended-scss": "^17.0.1",
|
||||||
"stylelint-order": "^7.0.1"
|
"stylelint-order": "^8.1.1"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"stylelint": "^17.0.0"
|
"stylelint": "^17.0.0"
|
||||||
|
|||||||
58
packages/tooltip/CHANGELOG.md
Normal file
58
packages/tooltip/CHANGELOG.md
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
## v7.0.1
|
||||||
|
|
||||||
|
- Исправление работы анимации
|
||||||
|
|
||||||
|
## v7.0.0
|
||||||
|
|
||||||
|
- Изменено значение по умолчанию для параметра `trigger`
|
||||||
|
- Рефакторинг кода и устранение ошибок
|
||||||
|
|
||||||
|
## v6.0.0
|
||||||
|
|
||||||
|
- Корректная работа сообытий mouseenter/mouseleave на тач-устройствах
|
||||||
|
- Предовтращаем лишние показы всплывающей подсказки
|
||||||
|
|
||||||
|
## v5.0.0
|
||||||
|
|
||||||
|
- Регистрируем сообытия mouseenter/mouseleave на тач-устройствах
|
||||||
|
|
||||||
|
## v4.1.1
|
||||||
|
|
||||||
|
- Исправление зависаний (в некоторых случаях) всплывающих подсказок
|
||||||
|
|
||||||
|
## v4.1.0
|
||||||
|
|
||||||
|
- Отключаем события mouseenter/mouseleave для toch-устройств
|
||||||
|
|
||||||
|
## v4.0.0
|
||||||
|
|
||||||
|
- Переработана логика инициализации и обновления тултипа
|
||||||
|
- Добавлены новые триггеры: `focus`, `blur`
|
||||||
|
- Опция `hideOnClick` теперь поддерживает значения: `true`, `'all'`, `'toggle'`
|
||||||
|
- Исправлены ошибки с позиционированием, анимацией и стилями
|
||||||
|
- Оптимизировано управление событиями и очистка ресурсов
|
||||||
|
|
||||||
|
## v3.0.1
|
||||||
|
|
||||||
|
- Исправлена работа событий
|
||||||
|
|
||||||
|
## v3.0.0
|
||||||
|
|
||||||
|
- Исправлено название опции с `virtialReference` на `virtualReference`
|
||||||
|
|
||||||
|
## v2.1.0
|
||||||
|
|
||||||
|
- Для опции `appendTo` добавлена возможность указать значение `parent`
|
||||||
|
|
||||||
|
## v2.0.0
|
||||||
|
|
||||||
|
- К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
|
||||||
|
- Для функций `show/hide` добавлен параметр `immediately` для мнгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
|
||||||
|
- Добавлена опция `shiftPadding` для добавления отступов от краёв области видимости по осям x/y
|
||||||
|
- Добавлена опция `animation` для кастомизации анимации при открытии/закрытии всплывающей подсказки (для этого всё внутри `.tooltip` было обёрнуто в `.tooltip__root` и анимация применяется именно к этому блоку)
|
||||||
|
- Опция `_tooltip._options` переименована в `_tooltip.options`
|
||||||
|
- Оптимизция кода, исправление ошибок
|
||||||
|
- Доработки по README.md
|
||||||
|
- Доработки по .npmignore
|
||||||
|
|
||||||
|
## v1.0.0
|
||||||
177
packages/tooltip/README.md
Normal file
177
packages/tooltip/README.md
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
# tooltip
|
||||||
|
|
||||||
|
## Требования
|
||||||
|
|
||||||
|
- [Floating UI](https://floating-ui.com)
|
||||||
|
|
||||||
|
## Подключение и настройка
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button type="button">Кнопка</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
### JS
|
||||||
|
|
||||||
|
#### Минимальные настройки
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createTooltip } from '@advdominion/tooltip';
|
||||||
|
|
||||||
|
createTooltip(document.querySelector('button'), 'Подсказка');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Все настройки со значениями по умолчанию
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createTooltip } from '@advdominion/tooltip';
|
||||||
|
|
||||||
|
createTooltip(document.querySelector('button'), 'Подсказка', {
|
||||||
|
animation: [
|
||||||
|
[{ opacity: 0 }, { opacity: 1 }],
|
||||||
|
[{ opacity: 1 }, { opacity: 0 }],
|
||||||
|
],
|
||||||
|
appendTo: document.body,
|
||||||
|
arrow: true,
|
||||||
|
delay: [0, 0],
|
||||||
|
duration: [0, 0],
|
||||||
|
easing: ['linear', 'linear'],
|
||||||
|
hideOnClick: true,
|
||||||
|
interactive: true,
|
||||||
|
offset: [0, 8],
|
||||||
|
placement: 'top',
|
||||||
|
shiftPadding: [8, 0],
|
||||||
|
theme: 'light',
|
||||||
|
trigger: 'mouseenter click',
|
||||||
|
virtualReference: undefined,
|
||||||
|
zIndex: '',
|
||||||
|
// Callback-функции, по умолчанию не заданы
|
||||||
|
onCreate(instance) {},
|
||||||
|
onMount(instance) {},
|
||||||
|
onShow(instance) {},
|
||||||
|
onShown(instance) {},
|
||||||
|
onHide(instance) {},
|
||||||
|
onHidden(instance) {},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### hideOnClick
|
||||||
|
|
||||||
|
- `true` (по умолчанию) — всплывающая подсказка скрывается при клике по любому элементу на странице (**кроме** самой всплывающей подсказки).
|
||||||
|
- `'all'` — всплывающая подсказка скрывается при клике по любому элементу на странице (**включая** саму всплывающую подсказку).
|
||||||
|
- `'toggle'` — всплывающая подсказка скрывается только при клике по элементу, который её вызывает.
|
||||||
|
|
||||||
|
##### virtualReference
|
||||||
|
|
||||||
|
Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
|
||||||
|
|
||||||
|
Например, позиционирование всплывающей подсказки относительно виртуального элемента размером 100×50, который располагается в левой верхней точке экрана:
|
||||||
|
|
||||||
|
```js
|
||||||
|
createTooltip(document.querySelector('button'), 'Подсказка', {
|
||||||
|
virtualReference: {
|
||||||
|
getBoundingClientRect() {
|
||||||
|
return {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
bottom: 50,
|
||||||
|
right: 100,
|
||||||
|
width: 100,
|
||||||
|
height: 50,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Свойства
|
||||||
|
|
||||||
|
#### $tooltip
|
||||||
|
|
||||||
|
DOM-элемент всплывающей подсказки (имеет свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`)
|
||||||
|
|
||||||
|
#### options
|
||||||
|
|
||||||
|
Текущие настройки
|
||||||
|
|
||||||
|
#### isVisible
|
||||||
|
|
||||||
|
Видимость всплывающей подсказки - `true`/`false`
|
||||||
|
|
||||||
|
#### Методы
|
||||||
|
|
||||||
|
##### show
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.show();
|
||||||
|
```
|
||||||
|
|
||||||
|
##### hide
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.hide();
|
||||||
|
```
|
||||||
|
|
||||||
|
##### setContent
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.setContent('Новая подсказка');
|
||||||
|
```
|
||||||
|
|
||||||
|
##### updateOptions
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.updateOptions({ placement: 'bottom' });
|
||||||
|
```
|
||||||
|
|
||||||
|
Настройки так же можно переназначать, используя data-атрибуты:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button type="button" data-tooltip-placement="bottom">Кнопка</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### destroy
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.destroy();
|
||||||
|
```
|
||||||
|
|
||||||
|
### Стили
|
||||||
|
|
||||||
|
```scss
|
||||||
|
$b: '.tooltip';
|
||||||
|
|
||||||
|
#{$b} {
|
||||||
|
left: 0;
|
||||||
|
max-width: calc(100vw - 32px);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: max-content;
|
||||||
|
z-index: 200;
|
||||||
|
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__root {
|
||||||
|
}
|
||||||
|
|
||||||
|
&__arrow {
|
||||||
|
#{$b}_theme_light & {
|
||||||
|
background-color: white;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
#{$b}_theme_light & {
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
490
packages/tooltip/index.js
Normal file
490
packages/tooltip/index.js
Normal file
@@ -0,0 +1,490 @@
|
|||||||
|
const roundByDPR = (value) => {
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
return Math.round(value * dpr) / dpr;
|
||||||
|
},
|
||||||
|
attributeToOption = (attribute) => {
|
||||||
|
attribute = attribute.replace('tooltip', '');
|
||||||
|
return attribute.charAt(0).toLowerCase() + attribute.slice(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
let visibilityListenerRegistered = false;
|
||||||
|
const handleVisibilityChange = () => {
|
||||||
|
if (document.hidden) {
|
||||||
|
// Скрываем все активные всплывающие подсказки
|
||||||
|
for (const $tooltip of document.querySelectorAll('.tooltip')) {
|
||||||
|
const ref = $tooltip._reference;
|
||||||
|
if (ref?._tooltip) {
|
||||||
|
// Очищаем таймеры появления при скрытии страницы
|
||||||
|
clearTimeout(ref._tooltip._showTimeout);
|
||||||
|
if (ref._tooltip.isVisible) {
|
||||||
|
ref._tooltip.hide({ immediately: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
templates = {
|
||||||
|
arrow: () => `
|
||||||
|
<div class="tooltip__arrow" style="pointer-events: none; position: absolute; transform: rotate(45deg);"></div>
|
||||||
|
`,
|
||||||
|
interactiveHelper: () => `
|
||||||
|
<div class="tooltip__interactive-helper" style="position: absolute; z-index: -1;"></div>
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createTooltip = ($el, content, options) => {
|
||||||
|
options = {
|
||||||
|
animation: [
|
||||||
|
[{ opacity: 0 }, { opacity: 1 }],
|
||||||
|
[{ opacity: 1 }, { opacity: 0 }],
|
||||||
|
],
|
||||||
|
appendTo: document.body,
|
||||||
|
arrow: true,
|
||||||
|
delay: [0, 0],
|
||||||
|
duration: [0, 0],
|
||||||
|
easing: ['linear', 'linear'],
|
||||||
|
hideOnClick: true, // Возможные значения: true, 'all', 'toggle'
|
||||||
|
interactive: true,
|
||||||
|
offset: [0, 8],
|
||||||
|
placement: 'top',
|
||||||
|
shiftPadding: [8, 0],
|
||||||
|
theme: 'light',
|
||||||
|
trigger: 'mouseenter click',
|
||||||
|
virtualReference: undefined,
|
||||||
|
zIndex: '',
|
||||||
|
...options,
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries($el.dataset)) {
|
||||||
|
if (key.startsWith('tooltip')) {
|
||||||
|
let parsedValue = value;
|
||||||
|
try {
|
||||||
|
parsedValue = JSON.parse(value);
|
||||||
|
} catch {} // eslint-disable-line no-empty
|
||||||
|
options[attributeToOption(key)] = parsedValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let rafId;
|
||||||
|
const listeners = [];
|
||||||
|
|
||||||
|
$el._tooltip = {
|
||||||
|
options,
|
||||||
|
isVisible: false,
|
||||||
|
$tooltip: undefined,
|
||||||
|
$container: undefined,
|
||||||
|
$arrow: undefined,
|
||||||
|
$interactive: undefined,
|
||||||
|
_showTimeout: undefined,
|
||||||
|
_hideTimeout: undefined,
|
||||||
|
_currentAnimation: undefined,
|
||||||
|
autoUpdateCleanup: () => {},
|
||||||
|
updatePosition: async () => {},
|
||||||
|
|
||||||
|
setContent(updatedContent) {
|
||||||
|
if (updatedContent !== undefined) {
|
||||||
|
content = updatedContent;
|
||||||
|
}
|
||||||
|
if ($el._tooltip.$container) {
|
||||||
|
if (content instanceof HTMLElement) {
|
||||||
|
$el._tooltip.$container.innerHTML = '';
|
||||||
|
$el._tooltip.$container.append(content);
|
||||||
|
} else {
|
||||||
|
$el._tooltip.$container.innerHTML = content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateOptions(updatedOptions = {}) {
|
||||||
|
for (const [name, value] of Object.entries(updatedOptions)) {
|
||||||
|
options[name] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
|
||||||
|
if (options.arrow) {
|
||||||
|
if (!$el._tooltip.$arrow) {
|
||||||
|
$el._tooltip.$tooltip
|
||||||
|
.querySelector('.tooltip__root')
|
||||||
|
.insertAdjacentHTML('afterbegin', templates.arrow());
|
||||||
|
$el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$el._tooltip.$arrow?.remove();
|
||||||
|
$el._tooltip.$arrow = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updatedOptions.interactive !== undefined) {
|
||||||
|
for (const { el, event, listener } of listeners) {
|
||||||
|
el.removeEventListener(event, listener);
|
||||||
|
}
|
||||||
|
listeners.length = 0;
|
||||||
|
registerListeners();
|
||||||
|
if ($el._tooltip.$tooltip) {
|
||||||
|
if (options.interactive) {
|
||||||
|
if (!$el._tooltip.$interactive) {
|
||||||
|
$el._tooltip.$tooltip
|
||||||
|
.querySelector('.tooltip__root')
|
||||||
|
.insertAdjacentHTML('afterbegin', templates.interactiveHelper());
|
||||||
|
$el._tooltip.$interactive =
|
||||||
|
$el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$el._tooltip.$interactive?.remove();
|
||||||
|
$el._tooltip.$interactive = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updatedOptions.theme !== undefined && $el._tooltip.$tooltip) {
|
||||||
|
const classIndex = [...$el._tooltip.$tooltip.classList].findIndex((className) =>
|
||||||
|
className.startsWith('tooltip_theme_'),
|
||||||
|
);
|
||||||
|
if (classIndex === -1) {
|
||||||
|
$el._tooltip.$tooltip.classList.add(`tooltip_theme_${options.theme}`);
|
||||||
|
} else {
|
||||||
|
$el._tooltip.$tooltip.classList.replace(
|
||||||
|
$el._tooltip.$tooltip.classList[classIndex],
|
||||||
|
`tooltip_theme_${options.theme}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updatedOptions.zIndex !== undefined && $el._tooltip.$tooltip) {
|
||||||
|
Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($el._tooltip.$tooltip) {
|
||||||
|
await $el._tooltip.updatePosition();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
if (!$el._tooltip) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearTimeout($el._tooltip._showTimeout);
|
||||||
|
clearTimeout($el._tooltip._hideTimeout);
|
||||||
|
$el._tooltip._currentAnimation?.cancel();
|
||||||
|
cancelAnimationFrame(rafId);
|
||||||
|
|
||||||
|
$el._tooltip.$tooltip?.remove();
|
||||||
|
|
||||||
|
// Вызываем autoUpdateCleanup только если всплывающая подсказка была видна (иначе вызывать её не имеет смысла)
|
||||||
|
if ($el._tooltip.isVisible) {
|
||||||
|
$el._tooltip.autoUpdateCleanup();
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const { el, event, listener } of listeners) {
|
||||||
|
el.removeEventListener(event, listener);
|
||||||
|
}
|
||||||
|
listeners.length = 0;
|
||||||
|
|
||||||
|
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
|
||||||
|
|
||||||
|
delete $el._tooltip;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.onCreate) {
|
||||||
|
options.onCreate($el._tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
$el._tooltip.show = async ({ immediately } = {}) => {
|
||||||
|
clearTimeout($el._tooltip._hideTimeout);
|
||||||
|
|
||||||
|
if (!$el._tooltip.$tooltip) {
|
||||||
|
const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
|
||||||
|
|
||||||
|
$el._tooltip.$tooltip = document.createElement('div');
|
||||||
|
$el._tooltip.$tooltip._reference = $el;
|
||||||
|
$el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
|
||||||
|
Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
|
||||||
|
|
||||||
|
$el._tooltip.$tooltip.innerHTML = `
|
||||||
|
<div class="tooltip__root">
|
||||||
|
${options.interactive ? templates.interactiveHelper() : ''}
|
||||||
|
${options.arrow ? templates.arrow() : ''}
|
||||||
|
<div class="tooltip__container"></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
$el._tooltip.$container = $el._tooltip.$tooltip.querySelector('.tooltip__container');
|
||||||
|
$el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
|
||||||
|
$el._tooltip.$interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
|
||||||
|
|
||||||
|
$el._tooltip.setContent();
|
||||||
|
|
||||||
|
$el._tooltip.updatePosition = () => {
|
||||||
|
cancelAnimationFrame(rafId);
|
||||||
|
rafId = requestAnimationFrame(async () => {
|
||||||
|
const { x, y, placement, middlewareData } = await computePosition(
|
||||||
|
options.virtualReference ?? $el,
|
||||||
|
$el._tooltip.$tooltip,
|
||||||
|
{
|
||||||
|
placement: options.placement,
|
||||||
|
middleware: [
|
||||||
|
offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
|
||||||
|
flip(),
|
||||||
|
shift({
|
||||||
|
padding: {
|
||||||
|
top: options.shiftPadding[1],
|
||||||
|
right: options.shiftPadding[0],
|
||||||
|
bottom: options.shiftPadding[1],
|
||||||
|
left: options.shiftPadding[0],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
arrow({ element: $el._tooltip.$arrow }),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
Object.assign($el._tooltip.$tooltip.style, {
|
||||||
|
transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const side = placement.split('-')[0],
|
||||||
|
staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
|
||||||
|
|
||||||
|
$el._tooltip.$tooltip.classList.remove(
|
||||||
|
'tooltip_side_top',
|
||||||
|
'tooltip_side_bottom',
|
||||||
|
'tooltip_side_left',
|
||||||
|
'tooltip_side_right',
|
||||||
|
);
|
||||||
|
$el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
|
||||||
|
|
||||||
|
if ($el._tooltip.$interactive) {
|
||||||
|
Object.assign($el._tooltip.$interactive.style, {
|
||||||
|
width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
|
||||||
|
height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
|
||||||
|
[staticSide]: `-${options.offset[1]}px`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($el._tooltip.$arrow && middlewareData.arrow) {
|
||||||
|
const { x, y } = middlewareData.arrow;
|
||||||
|
Object.assign($el._tooltip.$arrow.style, {
|
||||||
|
left: x === undefined ? '' : `${x}px`,
|
||||||
|
top: y === undefined ? '' : `${y}px`,
|
||||||
|
[staticSide]: `-${$el._tooltip.$arrow.offsetWidth / 2}px`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.onMount) {
|
||||||
|
options.onMount($el._tooltip);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const { autoUpdate } = await import('@floating-ui/dom');
|
||||||
|
|
||||||
|
$el._tooltip._showTimeout = setTimeout(
|
||||||
|
async () => {
|
||||||
|
const isMouseEnterTrigger = options.trigger.includes('mouseenter'),
|
||||||
|
isHovering = $el.matches(':hover');
|
||||||
|
|
||||||
|
// Проверяем $el._tooltip на сущестование и актуальность показа всплывающей подсказки
|
||||||
|
if (
|
||||||
|
!$el._tooltip ||
|
||||||
|
$el._tooltip.isVisible ||
|
||||||
|
(isMouseEnterTrigger && !isHovering) ||
|
||||||
|
document.hidden
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
(options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append($el._tooltip.$tooltip);
|
||||||
|
$el._tooltip.isVisible = true;
|
||||||
|
$el._tooltip.autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
|
||||||
|
|
||||||
|
if (options.hideOnClick && (options.trigger.includes('click') || options.trigger.includes('manual'))) {
|
||||||
|
document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
|
||||||
|
listeners.push({
|
||||||
|
el: document.body,
|
||||||
|
event: 'click',
|
||||||
|
listener: $el._tooltip.hideOnClickListener,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.onShow) {
|
||||||
|
options.onShow($el._tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const animation = $el._tooltip.$tooltip
|
||||||
|
.querySelector('.tooltip__root')
|
||||||
|
.animate(options.animation[0], {
|
||||||
|
duration: immediately ? 0 : options.duration[0],
|
||||||
|
easing: options.easing[0],
|
||||||
|
});
|
||||||
|
$el._tooltip._currentAnimation = animation;
|
||||||
|
await animation.finished;
|
||||||
|
} catch {} // eslint-disable-line no-empty
|
||||||
|
|
||||||
|
if (options.onShown) {
|
||||||
|
options.onShown($el._tooltip);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediately ? 0 : options.delay[0],
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.hide = ({ immediately } = {}) => {
|
||||||
|
clearTimeout($el._tooltip._showTimeout);
|
||||||
|
$el._tooltip._hideTimeout = setTimeout(
|
||||||
|
async () => {
|
||||||
|
// Проверяем $el._tooltip на сущестование
|
||||||
|
if (!$el._tooltip || !$el._tooltip.isVisible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.onHide) {
|
||||||
|
options.onHide($el._tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const animation = $el._tooltip.$tooltip
|
||||||
|
.querySelector('.tooltip__root')
|
||||||
|
.animate(options.animation[1], {
|
||||||
|
duration: immediately ? 0 : options.duration[1],
|
||||||
|
easing: options.easing[1],
|
||||||
|
});
|
||||||
|
$el._tooltip._currentAnimation = animation;
|
||||||
|
await animation.finished;
|
||||||
|
} catch {} // eslint-disable-line no-empty
|
||||||
|
|
||||||
|
// Ещё одна проверка на сущестование $el._tooltip после await
|
||||||
|
if (!$el._tooltip) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($el._tooltip.$tooltip) {
|
||||||
|
$el._tooltip.$tooltip.remove();
|
||||||
|
}
|
||||||
|
$el._tooltip.isVisible = false;
|
||||||
|
$el._tooltip.autoUpdateCleanup();
|
||||||
|
|
||||||
|
if (options.onHidden) {
|
||||||
|
options.onHidden($el._tooltip);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediately ? 0 : options.delay[1],
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.hideOnClickListener = ({ target }) => {
|
||||||
|
if (!$el._tooltip.isVisible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.hideOnClick === 'all') {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
} else if (options.hideOnClick === 'toggle') {
|
||||||
|
if ($el.contains(target)) {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// options.hideOnClick === true
|
||||||
|
if ($el.contains(target) || !$el._tooltip.$tooltip.contains(target)) {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.clickListener = () => {
|
||||||
|
if (document.hidden) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!$el._tooltip.isVisible) {
|
||||||
|
$el._tooltip.show();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.mouseEnterListener = (event) => {
|
||||||
|
if (event.pointerType !== 'mouse' || document.hidden) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$el._tooltip.show();
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.mouseLeaveListener = (event) => {
|
||||||
|
if (event.pointerType !== 'mouse') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.interactive && event.relatedTarget && $el._tooltip.$tooltip?.contains(event.relatedTarget)) {
|
||||||
|
$el._tooltip.$tooltip.addEventListener(
|
||||||
|
'pointerleave',
|
||||||
|
(event) => {
|
||||||
|
if (event.pointerType !== 'mouse') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!event.relatedTarget || !$el.contains(event.relatedTarget)) {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ once: true },
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.focusListener = () => {
|
||||||
|
if (document.hidden) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$el._tooltip.show();
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.blurListener = () => {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
const registerListeners = () => {
|
||||||
|
for (const trigger of options.trigger.split(' ')) {
|
||||||
|
switch (trigger) {
|
||||||
|
case 'mouseenter': {
|
||||||
|
$el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
|
||||||
|
listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
|
||||||
|
|
||||||
|
$el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
|
||||||
|
listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'click': {
|
||||||
|
$el.addEventListener('click', $el._tooltip.clickListener);
|
||||||
|
listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
|
||||||
|
|
||||||
|
if (!options.interactive) {
|
||||||
|
$el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
|
||||||
|
listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'focus': {
|
||||||
|
$el.addEventListener('focus', $el._tooltip.focusListener);
|
||||||
|
listeners.push({ el: $el, event: 'focus', listener: $el._tooltip.focusListener });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'blur': {
|
||||||
|
$el.addEventListener('blur', $el._tooltip.blurListener);
|
||||||
|
listeners.push({ el: $el, event: 'blur', listener: $el._tooltip.blurListener });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
registerListeners();
|
||||||
|
|
||||||
|
if (!visibilityListenerRegistered) {
|
||||||
|
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||||
|
visibilityListenerRegistered = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
17
packages/tooltip/package.json
Normal file
17
packages/tooltip/package.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/tooltip",
|
||||||
|
"version": "7.0.2",
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@floating-ui/dom": "^1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
194
yarn.lock
194
yarn.lock
@@ -14,6 +14,12 @@ __metadata:
|
|||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
|
"@advdominion/browserslist-to-targets@workspace:packages/browserslist-to-targets":
|
||||||
|
version: 0.0.0-use.local
|
||||||
|
resolution: "@advdominion/browserslist-to-targets@workspace:packages/browserslist-to-targets"
|
||||||
|
languageName: unknown
|
||||||
|
linkType: soft
|
||||||
|
|
||||||
"@advdominion/css-var@workspace:packages/css-var":
|
"@advdominion/css-var@workspace:packages/css-var":
|
||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "@advdominion/css-var@workspace:packages/css-var"
|
resolution: "@advdominion/css-var@workspace:packages/css-var"
|
||||||
@@ -58,15 +64,23 @@ __metadata:
|
|||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "@advdominion/stylelint-config@workspace:packages/stylelint-config"
|
resolution: "@advdominion/stylelint-config@workspace:packages/stylelint-config"
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss: "npm:^8.5.6"
|
postcss: "npm:^8.5.26"
|
||||||
postcss-html: "npm:^1.8.1"
|
postcss-html: "npm:^2.0.0"
|
||||||
stylelint-config-standard-scss: "npm:^17.0.0"
|
stylelint-config-recommended-scss: "npm:^17.0.1"
|
||||||
stylelint-order: "npm:^7.0.1"
|
stylelint-order: "npm:^8.1.1"
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: ^17.0.0
|
stylelint: ^17.0.0
|
||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
|
"@advdominion/tooltip@workspace:packages/tooltip":
|
||||||
|
version: 0.0.0-use.local
|
||||||
|
resolution: "@advdominion/tooltip@workspace:packages/tooltip"
|
||||||
|
peerDependencies:
|
||||||
|
"@floating-ui/dom": ^1.0.0
|
||||||
|
languageName: unknown
|
||||||
|
linkType: soft
|
||||||
|
|
||||||
"@babel/code-frame@npm:^7.0.0":
|
"@babel/code-frame@npm:^7.0.0":
|
||||||
version: 7.27.1
|
version: 7.27.1
|
||||||
resolution: "@babel/code-frame@npm:7.27.1"
|
resolution: "@babel/code-frame@npm:7.27.1"
|
||||||
@@ -143,6 +157,16 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@csstools/css-calc@npm:^3.2.1":
|
||||||
|
version: 3.3.0
|
||||||
|
resolution: "@csstools/css-calc@npm:3.3.0"
|
||||||
|
peerDependencies:
|
||||||
|
"@csstools/css-parser-algorithms": ^4.0.0
|
||||||
|
"@csstools/css-tokenizer": ^4.0.0
|
||||||
|
checksum: 10c0/83157b9fbf3599dfff2338ac40e7eec0884d1d729b9ca4a949af3c2da55d14368b2ac70ff4f659fc1ec6801a48c9225f2211a8be987678aadf6795dbebe5a2da
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"@csstools/css-parser-algorithms@npm:^4.0.0":
|
"@csstools/css-parser-algorithms@npm:^4.0.0":
|
||||||
version: 4.0.0
|
version: 4.0.0
|
||||||
resolution: "@csstools/css-parser-algorithms@npm:4.0.0"
|
resolution: "@csstools/css-parser-algorithms@npm:4.0.0"
|
||||||
@@ -159,6 +183,18 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@csstools/css-syntax-patches-for-csstree@npm:^1.1.4":
|
||||||
|
version: 1.1.12
|
||||||
|
resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.12"
|
||||||
|
peerDependencies:
|
||||||
|
css-tree: ^3.2.1
|
||||||
|
peerDependenciesMeta:
|
||||||
|
css-tree:
|
||||||
|
optional: true
|
||||||
|
checksum: 10c0/1ba981c04e3ea104a0009a51324c156760495f52d2e25418550a9c58cfb6b7efd91ca27ff7c3db0925f53bcd290641effa0647f0ab75cac5bf2ed37448c35a80
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"@csstools/css-tokenizer@npm:^4.0.0":
|
"@csstools/css-tokenizer@npm:^4.0.0":
|
||||||
version: 4.0.0
|
version: 4.0.0
|
||||||
resolution: "@csstools/css-tokenizer@npm:4.0.0"
|
resolution: "@csstools/css-tokenizer@npm:4.0.0"
|
||||||
@@ -2101,7 +2137,7 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"css-tree@npm:^3.0.1, css-tree@npm:^3.1.0":
|
"css-tree@npm:^3.1.0":
|
||||||
version: 3.1.0
|
version: 3.1.0
|
||||||
resolution: "css-tree@npm:3.1.0"
|
resolution: "css-tree@npm:3.1.0"
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -2111,6 +2147,16 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"css-tree@npm:^3.2.1":
|
||||||
|
version: 3.2.1
|
||||||
|
resolution: "css-tree@npm:3.2.1"
|
||||||
|
dependencies:
|
||||||
|
mdn-data: "npm:2.27.1"
|
||||||
|
source-map-js: "npm:^1.2.1"
|
||||||
|
checksum: 10c0/1f65e9ccaa56112a4706d6f003dd43d777f0dbcf848e66fd320f823192533581f8dd58daa906cb80622658332d50284d6be13b87a6ab4556cbbfe9ef535bbf7e
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"cssesc@npm:^3.0.0":
|
"cssesc@npm:^3.0.0":
|
||||||
version: 3.0.0
|
version: 3.0.0
|
||||||
resolution: "cssesc@npm:3.0.0"
|
resolution: "cssesc@npm:3.0.0"
|
||||||
@@ -2235,7 +2281,7 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"domutils@npm:^3.0.1":
|
"domutils@npm:^3.1.0":
|
||||||
version: 3.2.2
|
version: 3.2.2
|
||||||
resolution: "domutils@npm:3.2.2"
|
resolution: "domutils@npm:3.2.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -2337,7 +2383,7 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"entities@npm:^4.2.0, entities@npm:^4.4.0":
|
"entities@npm:^4.2.0, entities@npm:^4.5.0":
|
||||||
version: 4.5.0
|
version: 4.5.0
|
||||||
resolution: "entities@npm:4.5.0"
|
resolution: "entities@npm:4.5.0"
|
||||||
checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250
|
checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250
|
||||||
@@ -2945,15 +2991,15 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"htmlparser2@npm:^8.0.0":
|
"htmlparser2@npm:^9.1.0":
|
||||||
version: 8.0.2
|
version: 9.1.0
|
||||||
resolution: "htmlparser2@npm:8.0.2"
|
resolution: "htmlparser2@npm:9.1.0"
|
||||||
dependencies:
|
dependencies:
|
||||||
domelementtype: "npm:^2.3.0"
|
domelementtype: "npm:^2.3.0"
|
||||||
domhandler: "npm:^5.0.3"
|
domhandler: "npm:^5.0.3"
|
||||||
domutils: "npm:^3.0.1"
|
domutils: "npm:^3.1.0"
|
||||||
entities: "npm:^4.4.0"
|
entities: "npm:^4.5.0"
|
||||||
checksum: 10c0/609cca85886d0bf2c9a5db8c6926a89f3764596877492e2caa7a25a789af4065bc6ee2cdc81807fe6b1d03a87bf8a373b5a754528a4cc05146b713c20575aab4
|
checksum: 10c0/394f6323efc265bbc791d8c0d96bfe95984e0407565248521ab92e2dc7668e5ceeca7bc6ed18d408b9ee3b25032c5743368a4280d280332d782821d5d467ad8f
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -3677,10 +3723,10 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"mdn-data@npm:^2.25.0":
|
"mdn-data@npm:2.27.1":
|
||||||
version: 2.27.0
|
version: 2.27.1
|
||||||
resolution: "mdn-data@npm:2.27.0"
|
resolution: "mdn-data@npm:2.27.1"
|
||||||
checksum: 10c0/f087b40c3b93fd3b586bb605422da01650412d62cff739b47c6259bee4c21f2ccb0337e0f489b5b8f4acde7ae837638f3bf1ad3cf5bca440c49a53ce8c48ed32
|
checksum: 10c0/eb8abf5d22e4d1e090346f5e81b67d23cef14c83940e445da5c44541ad874dc8fb9f6ca236e8258c3a489d9fb5884188a4d7d58773adb9089ac2c0b966796393
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -3886,6 +3932,15 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"nanoid@npm:^3.3.17":
|
||||||
|
version: 3.3.18
|
||||||
|
resolution: "nanoid@npm:3.3.18"
|
||||||
|
bin:
|
||||||
|
nanoid: bin/nanoid.cjs
|
||||||
|
checksum: 10c0/b994b4e396730f8be2520923284e2040d61eaee55cc6d4935ef6d38d34bafdc46133eda4d3faea5073bda545aa6079d82b886caeac5c731cf9ac18bcc1301425
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"negotiator@npm:^1.0.0":
|
"negotiator@npm:^1.0.0":
|
||||||
version: 1.0.0
|
version: 1.0.0
|
||||||
resolution: "negotiator@npm:1.0.0"
|
resolution: "negotiator@npm:1.0.0"
|
||||||
@@ -4719,15 +4774,16 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"postcss-html@npm:^1.8.1":
|
"postcss-html@npm:^2.0.0":
|
||||||
version: 1.8.1
|
version: 2.0.0
|
||||||
resolution: "postcss-html@npm:1.8.1"
|
resolution: "postcss-html@npm:2.0.0"
|
||||||
dependencies:
|
dependencies:
|
||||||
htmlparser2: "npm:^8.0.0"
|
htmlparser2: "npm:^9.1.0"
|
||||||
js-tokens: "npm:^9.0.0"
|
js-tokens: "npm:^9.0.0"
|
||||||
postcss: "npm:^8.5.0"
|
postcss-safe-parser: "npm:^7.0.1"
|
||||||
postcss-safe-parser: "npm:^6.0.0"
|
peerDependencies:
|
||||||
checksum: 10c0/2db37b710ae4d5cf8493ae982a381c7c1dfed328eb1806c4aa9220b166a0a44a636275beebf072efb41a38017dd35f47216e7cde682c10c8c69e30807d4126c6
|
postcss: ^8.5.0
|
||||||
|
checksum: 10c0/7c11a7711faf56cedcdf288bbc18091b1ea5ad49327689fd049b454cc336950147f620763a2bf0b0cbcc11c1ace540d9a91de965458a5eb789a803a8ebde3b65
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -4745,15 +4801,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"postcss-safe-parser@npm:^6.0.0":
|
|
||||||
version: 6.0.0
|
|
||||||
resolution: "postcss-safe-parser@npm:6.0.0"
|
|
||||||
peerDependencies:
|
|
||||||
postcss: ^8.3.3
|
|
||||||
checksum: 10c0/5b0997b63de6ab4afb4b718a52dd7902e465c21d1f2e516762bcb59047787459b4dc5713132f6a19c9c8c483043b20b8a380a55fb61152ee66cbffcddf3b57f0
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"postcss-safe-parser@npm:^7.0.1":
|
"postcss-safe-parser@npm:^7.0.1":
|
||||||
version: 7.0.1
|
version: 7.0.1
|
||||||
resolution: "postcss-safe-parser@npm:7.0.1"
|
resolution: "postcss-safe-parser@npm:7.0.1"
|
||||||
@@ -4782,12 +4829,12 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"postcss-sorting@npm:^9.1.0":
|
"postcss-sorting@npm:^10.0.0":
|
||||||
version: 9.1.0
|
version: 10.0.0
|
||||||
resolution: "postcss-sorting@npm:9.1.0"
|
resolution: "postcss-sorting@npm:10.0.0"
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.4.20
|
postcss: ^8.4.20
|
||||||
checksum: 10c0/1faea84bf00d85929228d297587798fa9c384a02966a28a942777b2de553a8186087cfdcd0aca3dd40e4b2793aee050792d807458db8cf4880867c98c7bf22fd
|
checksum: 10c0/2e53560ccfaefb6ccfaa44cd258735f815de7a06ff6c79e6fb0fe789422f10242266044902c716e2eec9680879d7e0872b4ecd5d89e9bd8670f6d9f6c3ce5adc
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -4798,7 +4845,18 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"postcss@npm:^8.5.0, postcss@npm:^8.5.6":
|
"postcss@npm:^8.5.26, postcss@npm:^8.5.8":
|
||||||
|
version: 8.5.26
|
||||||
|
resolution: "postcss@npm:8.5.26"
|
||||||
|
dependencies:
|
||||||
|
nanoid: "npm:^3.3.17"
|
||||||
|
picocolors: "npm:^1.1.1"
|
||||||
|
source-map-js: "npm:^1.2.1"
|
||||||
|
checksum: 10c0/2bdafc00d96bd57b6649a52e458864a4bf58ee56cfdbe4aea1472b5cccc127e6c1ad653bd0bec50d211e650eb0b9270c80e1e72aff2e2fa40d9e7363234d6e43
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
|
"postcss@npm:^8.5.6":
|
||||||
version: 8.5.6
|
version: 8.5.6
|
||||||
resolution: "postcss@npm:8.5.6"
|
resolution: "postcss@npm:8.5.6"
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -5346,9 +5404,9 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"stylelint-config-recommended-scss@npm:^17.0.0":
|
"stylelint-config-recommended-scss@npm:^17.0.1":
|
||||||
version: 17.0.0
|
version: 17.0.1
|
||||||
resolution: "stylelint-config-recommended-scss@npm:17.0.0"
|
resolution: "stylelint-config-recommended-scss@npm:17.0.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss-scss: "npm:^4.0.9"
|
postcss-scss: "npm:^4.0.9"
|
||||||
stylelint-config-recommended: "npm:^18.0.0"
|
stylelint-config-recommended: "npm:^18.0.0"
|
||||||
@@ -5359,7 +5417,7 @@ __metadata:
|
|||||||
peerDependenciesMeta:
|
peerDependenciesMeta:
|
||||||
postcss:
|
postcss:
|
||||||
optional: true
|
optional: true
|
||||||
checksum: 10c0/05b2e8d4316c2a8cc66eed0a2a8f01237e0ee8966a2e73d0b3c6706694f7630be165daa5a0cef511bc51f7e3fcb07a84c55d948c15fe6193a7e13cf9bb67c913
|
checksum: 10c0/82f2df8505ffce7ba44526b54ee3e6eda6e42a2fa720bb0b61f3a3f9c5c3c562e00bf9a81cf04b81673d622fbcda1ddc12a6f5f7536b7af95076bdd6cdfe4366
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -5372,60 +5430,36 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"stylelint-config-standard-scss@npm:^17.0.0":
|
"stylelint-order@npm:^8.1.1":
|
||||||
version: 17.0.0
|
version: 8.1.1
|
||||||
resolution: "stylelint-config-standard-scss@npm:17.0.0"
|
resolution: "stylelint-order@npm:8.1.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
stylelint-config-recommended-scss: "npm:^17.0.0"
|
postcss: "npm:^8.5.8"
|
||||||
stylelint-config-standard: "npm:^40.0.0"
|
postcss-sorting: "npm:^10.0.0"
|
||||||
peerDependencies:
|
|
||||||
postcss: ^8.3.3
|
|
||||||
stylelint: ^17.0.0
|
|
||||||
peerDependenciesMeta:
|
|
||||||
postcss:
|
|
||||||
optional: true
|
|
||||||
checksum: 10c0/0506537ba896f3d5e0fb002608090fcb41aa8ba7b65f1de8533702ce7c70e3f92b275782788a8356b5b687c86c53468c223e082226dda62780294b1cba324a36
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"stylelint-config-standard@npm:^40.0.0":
|
|
||||||
version: 40.0.0
|
|
||||||
resolution: "stylelint-config-standard@npm:40.0.0"
|
|
||||||
dependencies:
|
|
||||||
stylelint-config-recommended: "npm:^18.0.0"
|
|
||||||
peerDependencies:
|
|
||||||
stylelint: ^17.0.0
|
|
||||||
checksum: 10c0/d8942552d53a3afda59b64d0c49503bb626fe5cef39a9e8c9583fcd60869f21431125ef4480ff27a59f7f2cf0da8af810d377129ef1d670ddc5def4defe2880c
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"stylelint-order@npm:^7.0.1":
|
|
||||||
version: 7.0.1
|
|
||||||
resolution: "stylelint-order@npm:7.0.1"
|
|
||||||
dependencies:
|
|
||||||
postcss: "npm:^8.5.6"
|
|
||||||
postcss-sorting: "npm:^9.1.0"
|
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: ^16.18.0 || ^17.0.0
|
stylelint: ^16.18.0 || ^17.0.0
|
||||||
checksum: 10c0/dfe3ab8f18725c9c2fead65f2940a6590208591ca267da6d25ee191c6e5f1df04813a6f6a76791bfe5f6fda33fbf6d81369c17c71831bfbd6802dfed26559845
|
checksum: 10c0/ef135a414d3ed98a53cc19e52f1cdff25105e34d96430ecc805d831dbdf4f505031d692dba0f2275b6e7b3a4f4b406f352d85a3924e2e3d89931af65a64eb047
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"stylelint-scss@npm:^7.0.0":
|
"stylelint-scss@npm:^7.0.0":
|
||||||
version: 7.0.0
|
version: 7.2.0
|
||||||
resolution: "stylelint-scss@npm:7.0.0"
|
resolution: "stylelint-scss@npm:7.2.0"
|
||||||
dependencies:
|
dependencies:
|
||||||
css-tree: "npm:^3.0.1"
|
"@csstools/css-calc": "npm:^3.2.1"
|
||||||
|
"@csstools/css-parser-algorithms": "npm:^4.0.0"
|
||||||
|
"@csstools/css-syntax-patches-for-csstree": "npm:^1.1.4"
|
||||||
|
"@csstools/css-tokenizer": "npm:^4.0.0"
|
||||||
|
css-tree: "npm:^3.2.1"
|
||||||
is-plain-object: "npm:^5.0.0"
|
is-plain-object: "npm:^5.0.0"
|
||||||
known-css-properties: "npm:^0.37.0"
|
known-css-properties: "npm:^0.37.0"
|
||||||
mdn-data: "npm:^2.25.0"
|
|
||||||
postcss-media-query-parser: "npm:^0.2.3"
|
postcss-media-query-parser: "npm:^0.2.3"
|
||||||
postcss-resolve-nested-selector: "npm:^0.1.6"
|
postcss-resolve-nested-selector: "npm:^0.1.6"
|
||||||
postcss-selector-parser: "npm:^7.1.1"
|
postcss-selector-parser: "npm:^7.1.1"
|
||||||
postcss-value-parser: "npm:^4.2.0"
|
postcss-value-parser: "npm:^4.2.0"
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
stylelint: ^16.8.2 || ^17.0.0
|
stylelint: ^16.8.2 || ^17.0.0
|
||||||
checksum: 10c0/07d0f20c6bcb34b8b0b6bfb1d4367b4825b52a7eef7dde2adfbaec11ebc67242e6b99dccf70dfbef1eb0a9bf8712fe0ab49d183ff6e4cca9c7f89752f7e27027
|
checksum: 10c0/9f45690560e8a7156dd6aac7cbadf47010444dbf9b7953b75491ee7db08b8c660efdb0a421d09eab019bd73ef606efbc72ad983d37e1997daa397d5442109f47
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user