@application-kit/ui 0.0.0-stage → 0.0.0

package/dist/styles/_tokens.scss

@@ -0,0 +1,96 @@
+// Мост «вендорские токены → собственные» — единственный в приложении (story 3-7).
+// Вендор объявляет свои CSS-переменные с префиксом `--p-`; фича-код читает только `--ui-*`,
+// объявленные здесь. Смена вендора правит этот файл, а не сотни потребителей.
+// Мост стоит на `:root`, а не в layout-компоненте: страницы логина и ошибки рисуются вне
+// поддерева `.layout`, и мост, объявленный там, до них не доезжает (было ровно так до 3-7).
+// Список — по инвентарю потребителей, а не «все токены вендора»: неиспользуемый токен здесь
+// не объявляется, иначе файл превращается в копию темы вендора со своей судьбой.
+// Полнота держится спекой `tests/tokens.spec.ts`: `--ui-*`, встреченный в `src/` и не
+// объявленный здесь, краснит `yarn test:unit`.
+:root {
+  // Поверхности.
+  --ui-surface-0: var(--p-surface-0);
+  --ui-surface-50: var(--p-surface-50);
+  --ui-surface-100: var(--p-surface-100);
+  --ui-surface-200: var(--p-surface-200);
+  --ui-surface-400: var(--p-surface-400);
+  --ui-surface-600: var(--p-surface-600);
+  --ui-surface-700: var(--p-surface-700);
+  --ui-surface-800: var(--p-surface-800);
+  --ui-surface-900: var(--p-surface-900);
+
+  // Текст и основной акцент.
+  --ui-text-color: var(--p-text-color);
+  --ui-text-muted-color: var(--p-text-muted-color);
+  --ui-primary-color: var(--p-primary-color);
+  --ui-primary-contrast-color: var(--p-primary-contrast-color);
+
+  // Подсветка текста (`<mark>`). Пара «фон — текст» объявляется целиком, а не одним оттенком
+  // шкалы: фон подсветки светлый, и без своего цвета текста в тёмной теме подсветка светит
+  // белым (до 6-53 он и вовсе стоял числом `#fff8e1`, одним на обе темы).
+  --ui-highlight-background: var(--ui-accent-yellow-200);
+  --ui-highlight-color: var(--ui-accent-yellow-800);
+
+  // Контент.
+  --ui-content-background: var(--p-content-background);
+  --ui-content-border-color: var(--p-content-border-color);
+  --ui-content-border-radius: var(--p-content-border-radius);
+
+  // Поля ввода.
+  --ui-form-field-border-color: var(--p-form-field-border-color);
+  --ui-form-field-focus-border-color: var(--p-form-field-focus-border-color);
+  --ui-form-field-color: var(--p-form-field-color);
+  --ui-form-field-icon-color: var(--p-form-field-icon-color);
+  --ui-form-field-placeholder-color: var(--p-form-field-placeholder-color);
+
+  // Навигация и оверлеи.
+  --ui-navigation-item-active-background: var(--p-navigation-item-active-background);
+  --ui-navigation-item-active-color: var(--p-navigation-item-active-color);
+  --ui-navigation-item-color: var(--p-navigation-item-color);
+  --ui-navigation-item-focus-background: var(--p-navigation-item-focus-background);
+  --ui-navigation-item-icon-color: var(--p-navigation-item-icon-color);
+  --ui-overlay-navigation-shadow: var(--p-overlay-navigation-shadow);
+  --ui-mask-background: var(--p-mask-background);
+
+  // Метрики.
+  --ui-icon-size: var(--p-icon-size);
+  --ui-button-icon-only-width: var(--p-button-icon-only-width);
+  --ui-transition-duration: var(--p-transition-duration);
+
+  // Акценты. Шкала `<оттенок>-<вес>` — публичная поверхность типа `AccentColor`
+  // (`@/libs/shared/vue/accent-color`): 200/300/500 читает градиент страницы ошибки,
+  // 50/600/700/800 — сцены темы в layout. Новый оттенок заводится парой «значение union +
+  // строки здесь», иначе спека токенов краснеет.
+  --ui-accent-primary-200: var(--p-primary-200);
+  --ui-accent-primary-300: var(--p-primary-300);
+  --ui-accent-primary-500: var(--p-primary-500);
+  --ui-accent-red-200: var(--p-red-200);
+  --ui-accent-red-300: var(--p-red-300);
+  --ui-accent-red-500: var(--p-red-500);
+  --ui-accent-indigo-200: var(--p-indigo-200);
+  --ui-accent-indigo-300: var(--p-indigo-300);
+  --ui-accent-indigo-500: var(--p-indigo-500);
+  --ui-accent-yellow-200: var(--p-yellow-200);
+  --ui-accent-yellow-300: var(--p-yellow-300);
+  --ui-accent-yellow-500: var(--p-yellow-500);
+  --ui-accent-yellow-50: var(--p-yellow-50);
+  --ui-accent-yellow-600: var(--p-yellow-600);
+  --ui-accent-yellow-700: var(--p-yellow-700);
+  --ui-accent-yellow-800: var(--p-yellow-800);
+  --ui-accent-blue-50: var(--p-blue-50);
+  --ui-accent-blue-600: var(--p-blue-600);
+  --ui-accent-blue-700: var(--p-blue-700);
+  --ui-accent-blue-800: var(--p-blue-800);
+  --ui-accent-emerald-50: var(--p-emerald-50);
+  --ui-accent-emerald-600: var(--p-emerald-600);
+  --ui-accent-emerald-700: var(--p-emerald-700);
+  --ui-accent-emerald-800: var(--p-emerald-800);
+}
+
+// Тёмная тема — класс на `<html>` (`topbar/dark-mode-toggle.ts`), то есть на том же узле, что
+// и `:root` выше. Переобъявляется только то, чей светлый вариант в тёмной теме нечитаем:
+// остальные `--ui-*` смотрят в семантические токены вендора, и их тема вендора меняет сама.
+:root.dark-theme {
+  --ui-highlight-background: var(--ui-accent-yellow-800);
+  --ui-highlight-color: var(--ui-accent-yellow-200);
+}

package/dist/styles/_variables.scss

@@ -0,0 +1,8 @@
+$scale: 14px;
+
+// Единственный источник брейкпойнта мобильной раскладки: медиазапросы берут его отсюда,
+// а TS — производное `MOBILE_MAX_WIDTH_PX` ($breakpoint - 1px, `vue/layout/layout.ts`).
+// Равенство двух сторон держит спека `styles/tests/breakpoint.spec.ts`: она читает эту
+// строку, поэтому разъехаться молча они не могут.
+$breakpoint: 992px;
+$font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

package/dist/testing/browser-api-stubs.d.ts

@@ -0,0 +1 @@
+export declare const installBrowserApiStubs: () => void;

package/dist/testing/browser-api-stubs.js

@@ -0,0 +1,38 @@
+//#region src/testing/browser-api-stubs.ts
+/**
+* Stubs for browser APIs that jsdom does not implement but vendor widgets call on mount:
+* `matchMedia` (DatePicker's responsive layout) and `ResizeObserver` (TabList's ink-bar sizing).
+* Without them mounting those wrappers throws before a single assertion runs.
+* Call once in a `beforeAll` hook of a spec that mounts such a wrapper.
+* @example
+* beforeAll(() => {
+*   installBrowserApiStubs()
+* })
+*/
+var installBrowserApiStubs = () => {
+	if (typeof globalThis.matchMedia !== "function") Object.defineProperty(globalThis, "matchMedia", {
+		configurable: true,
+		value: (query) => ({
+			addEventListener: () => void 0,
+			addListener: () => void 0,
+			dispatchEvent: () => false,
+			matches: false,
+			media: query,
+			onchange: null,
+			removeEventListener: () => void 0,
+			removeListener: () => void 0
+		}),
+		writable: true
+	});
+	if (typeof ResizeObserver !== "function") Object.defineProperty(globalThis, "ResizeObserver", {
+		configurable: true,
+		value: class {
+			disconnect() {}
+			observe() {}
+			unobserve() {}
+		},
+		writable: true
+	});
+};
+//#endregion
+export { installBrowserApiStubs };

package/dist/testing/index.d.ts

@@ -0,0 +1,5 @@
+export * from './browser-api-stubs';
+export * from './set-viewport-width';
+export * from './submit-form';
+export * from './ui-messages.fixture';
+export * from './vendor-plugins';

package/dist/testing/index.js

@@ -0,0 +1,6 @@
+import { installBrowserApiStubs } from "./browser-api-stubs.js";
+import { setViewportWidth } from "./set-viewport-width.js";
+import { runSubmitPipeline } from "./submit-form.js";
+import { testUiMessages } from "./ui-messages.fixture.js";
+import { installVendorPlugins } from "./vendor-plugins.js";
+export { installBrowserApiStubs, installVendorPlugins, runSubmitPipeline, setViewportWidth, testUiMessages };

package/dist/testing/set-viewport-width.d.ts

@@ -0,0 +1 @@
+export declare const setViewportWidth: (width: number) => void;

package/dist/testing/set-viewport-width.js

@@ -0,0 +1,18 @@
+//#region src/testing/set-viewport-width.ts
+/**
+* Resizes the window the way a browser does: the `innerWidth` value AND the `resize` event.
+* The layer's desktop flag (`layout.ts`) is reactive and updates on that event — assigning
+* `innerWidth` alone leaves it frozen, and a spec without the event asserts a stale value.
+* @param width - Ширина окна в пикселях.
+* @example
+* setViewportWidth(320)
+*/
+var setViewportWidth = (width) => {
+	Object.defineProperty(globalThis.window, "innerWidth", {
+		configurable: true,
+		value: width
+	});
+	globalThis.window.dispatchEvent(new Event("resize"));
+};
+//#endregion
+export { setViewportWidth };

package/dist/testing/submit-form.d.ts

@@ -0,0 +1 @@
+export declare const runSubmitPipeline: (act: () => unknown) => Promise<void>;

package/dist/testing/submit-form.js

@@ -0,0 +1,25 @@
+import { flushPromises } from "@vue/test-utils";
+import { vi } from "vitest";
+//#region src/testing/submit-form.ts
+/**
+* Runs a vee-validate submit and waits out its validation pipeline.
+*
+* Пайплайн валидации растягивается на несколько макротасков, и `flushPromises` его не
+* дожидается: спек читал бы список событий раньше, чем форма решила, что отправлять есть что.
+* Фейковые таймеры прогоняют его детерминированно — вместо гонки «сколько тиков подождать».
+*
+* Живёт здесь, а не копией в каждом спеке: форм на `useForm` в проекте больше десятка
+* (`docs/ui-patterns.md`, «Форма с валидацией»), и ожидание у них одно и то же.
+* @param act - Действие, запускающее отправку: submit формы либо клик по кнопке.
+* @example
+* await runSubmitPipeline(() => wrapper.get('form').trigger('submit'))
+*/
+var runSubmitPipeline = async (act) => {
+	vi.useFakeTimers();
+	await act();
+	await vi.runAllTimersAsync();
+	vi.useRealTimers();
+	await flushPromises();
+};
+//#endregion
+export { runSubmitPipeline };

package/dist/testing/ui-messages.fixture.d.ts

@@ -0,0 +1,2 @@
+import type { UiMessagesInterface } from '../messages/ui-messages';
+export declare const testUiMessages: UiMessagesInterface;

package/dist/testing/ui-messages.fixture.js

@@ -0,0 +1,26 @@
+//#region src/testing/ui-messages.fixture.ts
+var testUiMessages = {
+	dateRangeFilter: {
+		clear: "Clear",
+		lastMonth: "Month",
+		lastSixMonths: "6 months",
+		lastWeek: "Week",
+		placeholder: "Date range"
+	},
+	errorPage: {
+		copied: "Copied",
+		copy: "Copy",
+		goToDashboard: "Go to dashboard",
+		supportIdTitle: "Support ID"
+	},
+	table: {
+		empty: "Nothing found.",
+		error: "Could not load the list.",
+		loading: "Loading data. Please wait.",
+		loadingMore: "Loading more…",
+		searchPlaceholder: "Search",
+		selectFilterPlaceholder: "Any"
+	}
+};
+//#endregion
+export { testUiMessages };

package/dist/testing/vendor-plugins.d.ts

@@ -0,0 +1,2 @@
+import type { App as VueApp } from 'vue';
+export declare const installVendorPlugins: (app: VueApp) => void;

package/dist/testing/vendor-plugins.js

@@ -0,0 +1,22 @@
+import { UI_DESCRIBE_REQUEST_ERROR, UI_ICON_CLASS, UI_MESSAGES } from "../plugin/ui-injection.js";
+import { installToastService } from "../components/toast/install-toast-service.js";
+import { testUiMessages } from "./ui-messages.fixture.js";
+import UiVendor from "openvue/config";
+//#region src/testing/vendor-plugins.ts
+/**
+* Installs the vendor plugins and everything the package receives from the app in specs: texts,
+* icon classes and the request-error description. Swapping the vendor does not touch every spec.
+* Works both via `global.plugins` of `\@vue/test-utils` and as a direct call on `createSSRApp`.
+* @param app - Vue.js app created by a spec.
+* @example
+* mount(Checkbox, { global: { plugins: [installVendorPlugins] } })
+*/
+var installVendorPlugins = (app) => {
+	app.use(UiVendor);
+	app.provide(UI_MESSAGES, testUiMessages);
+	app.provide(UI_ICON_CLASS, (name) => `test-icon test-icon--${name}`);
+	app.provide(UI_DESCRIBE_REQUEST_ERROR, (_error, fallbackMessage) => fallbackMessage);
+	installToastService(app);
+};
+//#endregion
+export { installVendorPlugins };

package/dist/utils/datetime.d.ts

@@ -0,0 +1,10 @@
+import type { DurationUnit } from 'date-fns';
+export declare const formatDistance: (from: Date, to: Date) => string;
+export declare const formatDate: (date: Date, formatString?: string) => string;
+export declare const getDifferenceInHours: (start: Date, end: Date) => number;
+export declare const formatDuration: (start: Date, end: Date, fff?: DurationUnit[]) => string;
+export interface SignificantDurationInterface {
+    text: string;
+    truncated: boolean;
+}
+export declare const formatSignificantDuration: (start: Date, end: Date) => SignificantDurationInterface;

package/dist/utils/datetime.js

@@ -0,0 +1,53 @@
+import { differenceInHours, format, formatDistanceStrict, formatDuration, intervalToDuration } from "date-fns";
+//#region src/utils/datetime.ts
+var formatDistance = (from, to) => formatDistanceStrict(from, to, { addSuffix: true });
+var formatDate = (date, formatString = "Pp") => format(date, formatString);
+var getDifferenceInHours = (start, end) => differenceInHours(start, end);
+var ALL_DURATION_UNITS = [
+	"years",
+	"months",
+	"days",
+	"hours",
+	"minutes",
+	"seconds"
+];
+var SIGNIFICANT_FORMATS = [
+	{
+		format: ["years"],
+		unit: "years"
+	},
+	{
+		format: ["months"],
+		unit: "months"
+	},
+	{
+		format: ["days", "hours"],
+		unit: "days"
+	},
+	{
+		format: ["hours"],
+		unit: "hours"
+	}
+];
+/**
+* Duration, усечённый до значимых единиц: «6 years 8 months 2 days …» → text «6 years»,
+* «2 days 6 hours 44 minutes …» → text «2 days 6 hours»; минуты/секунды — без усечения.
+* @param start - Левая граница (обычно timestamp события во внешнем источнике).
+* @param end - Правая граница (обычно createdAt записи у нас).
+* @returns Text по значимым единицам + флаг truncated (ненулевой хвост отброшен — caller добавляет «more than»).
+* @example
+* formatSignificantDuration(start, end) // { text: '2 days 6 hours', truncated: true }
+*/
+var formatSignificantDuration = (start, end) => {
+	const duration = intervalToDuration({
+		end,
+		start
+	});
+	const units = SIGNIFICANT_FORMATS.find(({ unit }) => (duration[unit] ?? 0) > 0)?.format ?? ["minutes", "seconds"];
+	return {
+		text: formatDuration(duration, { format: units }),
+		truncated: ALL_DURATION_UNITS.some((unit) => !units.includes(unit) && (duration[unit] ?? 0) > 0)
+	};
+};
+//#endregion
+export { formatDate, formatDistance, formatSignificantDuration, getDifferenceInHours };

package/dist/utils/truncate-string.d.ts

@@ -0,0 +1,2 @@
+export declare const truncateStringInTheMiddle: (string: string, length: number, delimiter?: string) => string;
+export declare const truncateStringAtTheBeginning: (string: string, length: number, beginning?: string) => string;

package/dist/utils/truncate-string.js

@@ -0,0 +1,10 @@
+//#region src/utils/truncate-string.ts
+var truncateStringInTheMiddle = (string, length, delimiter = "...") => {
+	if (string.length <= length) return string;
+	const charsToShow = length - delimiter.length;
+	const frontChars = Math.ceil(charsToShow / 2);
+	const backChars = Math.floor(charsToShow / 2);
+	return string.slice(0, Math.max(0, frontChars)) + delimiter + string.slice(Math.max(0, string.length - backChars));
+};
+//#endregion
+export { truncateStringInTheMiddle };

package/package.json

@@ -1,6 +1,96 @@
 {
   "name": "@application-kit/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "Vue-обёртки над UI-вендором, мост токенов оформления и тестовые помощники без продуктовых словарей",
+  "keywords": [
+    "design-tokens",
+    "ssr",
+    "ui-kit",
+    "vue"
+  ],
+  "homepage": "https://gitlab.com/application-kit/application-kit/-/tree/main/packages/ui",
+  "bugs": "https://gitlab.com/application-kit/application-kit/-/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/application-kit/application-kit.git",
+    "directory": "packages/ui"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "application-kit"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    "./styles/tokens.scss": "./dist/styles/_tokens.scss",
+    "./styles/variables.scss": "./dist/styles/_variables.scss",
+    "./testing": {
+      "import": {
+        "types": "./dist/testing/index.d.ts",
+        "default": "./dist/testing/index.js"
+      }
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf ./dist && vite build && vue-tsc --project tsconfig.build.json && mkdir -p ./dist/styles && cp ./src/styles/_tokens.scss ./src/styles/_variables.scss ./dist/styles/",
+    "lint:tsc": "vue-tsc --noEmit --pretty --project .",
+    "test:mutation": "stryker run",
+    "test:unit": "vitest run"
+  },
+  "dependencies": {
+    "@application-kit/typeorm": "^0.1.0",
+    "@openvue/themes": "1.0.0-rc.0",
+    "date-fns": "^4.4.0"
+  },
+  "devDependencies": {
+    "@stryker-mutator/core": "^10.0.0",
+    "@stryker-mutator/vitest-runner": "^10.0.0",
+    "@types/node": "^26.2.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^30.0.1",
+    "openvue": "1.0.0-rc.0",
+    "pinia": "^4.0.3",
+    "sass-embedded": "^1.102.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.1",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.41",
+    "vue-router": "^5.2.0",
+    "vue-tsc": "^3.3.11"
+  },
+  "peerDependencies": {
+    "openvue": "1.0.0-rc.0",
+    "pinia": "^4.0.0",
+    "vitest": "^4.0.0",
+    "vue": "^3.5.0",
+    "vue-router": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vitest": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }