@profitliga/ui 2.0.2 → 2.0.4

package/dist/components/v2/index.js

@@ -3,16 +3,16 @@ import '../../styles/tokens.css';
 import { default as t } from "./ConfirmDialog/ConfirmDialog.vue.js";
 import { default as f } from "./InputPhone/InputPhone.vue.js";
 import { default as p } from "./InputSelect/InputSelect.vue.js";
-import { default as m } from "./Accordion/Accordion.vue.js";
+import { default as d } from "./Accordion/Accordion.vue.js";
 import { default as u } from "./AlertDialog/AlertDialog.vue.js";
 import { default as i } from "./Badge/Badge.vue.js";
 import { default as D } from "./BottomSheet/BottomSheet.vue.js";
 import { default as S } from "./Breadcrumb/Breadcrumb.vue.js";
 import { default as A } from "./Button/Button.vue.js";
-import { default as c } from "./Calendar/Calendar.vue.js";
+import { default as L } from "./Calendar/Calendar.vue.js";
 import { default as _ } from "./Checkbox/Checkbox.vue.js";
-import { default as P } from "./Combobox/Combobox.vue.js";
-import { DEFAULT_DAY_LABELS as I, DEFAULT_DAY_SHORT_LABELS as F, SCHEDULE_DAYS as U } from "./Schedule/Schedule.util.js";
+import { default as I } from "./Combobox/Combobox.vue.js";
+import { DEFAULT_DAY_LABELS as E, DEFAULT_DAY_SHORT_LABELS as F, SCHEDULE_DAYS as U } from "./Schedule/Schedule.util.js";
 import { default as B } from "./DataTable/DataTable.vue.js";
 import { default as H } from "./DataTable/DataTableBody.vue.js";
 import { default as R } from "./DataTable/DataTableFooter.vue.js";
@@ -29,49 +29,52 @@ import { default as ae } from "./File/File.vue.js";
 import { default as te } from "./File/FilePreviewDialog.vue.js";
 import { default as fe } from "./FileUpload/FileUpload.vue.js";
 import { default as pe } from "./FileUpload/FileUploadInline.vue.js";
-import { default as me } from "./Indicator/Indicator.vue.js";
-import { default as ue } from "./Input/Input.vue.js";
-import { default as ie } from "./InputNumber/InputNumber.vue.js";
-import { default as De } from "./Message/Message.vue.js";
-import { default as Se } from "./OTPCode/OTPCode.vue.js";
-import { PHONE_MASK_PLACEHOLDER as Ae, extractPhoneDigits as Le, formatPhone as ce } from "./InputPhone/phoneMask.util.js";
-import { default as _e } from "./Pagination/Pagination.vue.js";
-import { default as Pe } from "./Pagination/PaginationPageSize.vue.js";
-import { default as Ie } from "./Popover/Popover.vue.js";
-import { default as Ue } from "./Radio/Radio.vue.js";
-import { default as Be } from "./Radio/RadioGroup.vue.js";
-import { default as He } from "./Radio/RadioMarker.vue.js";
-import { default as Re } from "./Schedule/Schedule.vue.js";
-import { default as we } from "./Select/Select.vue.js";
-import { default as Ne } from "./Stepper/Stepper.vue.js";
-import { default as ye } from "./Stepper/StepperItem.vue.js";
-import { default as Ge } from "./Switch/Switch.vue.js";
-import { TOAST_DEFAULT_DURATION_MS as je, TOAST_DEFAULT_LIMIT as qe, toast as Je, useToast as Qe } from "./Toast/useToast.js";
-import { default as We } from "./Tabs/Tabs.vue.js";
-import { default as Ze } from "./Tabs/TabsContent.vue.js";
-import { default as ea } from "./Tabs/TabsCounter.vue.js";
-import { default as oa } from "./Tabs/TabsList.vue.js";
-import { default as ra } from "./Tabs/TabsTrigger.vue.js";
-import { default as la } from "./Tag/Tag.vue.js";
-import { default as da } from "./Textarea/Textarea.vue.js";
-import { default as sa } from "./Toast/Toast.vue.js";
-import { default as xa } from "./Toast/Toaster.vue.js";
-import { default as Ta } from "./Tooltip/Tooltip.vue.js";
-import { confirmState as na, useConfirm as Sa } from "./ConfirmDialog/useConfirm.js";
-import { createDataTableColumns as Aa } from "./DataTable/DataTable.columns.js";
-import { vTooltip as ca } from "./Tooltip/vTooltip.directive.js";
+import { default as de } from "./FormField/FormField.vue.js";
+import { default as ue } from "./Image/Image.vue.js";
+import { default as ie } from "./Image/ImageList.vue.js";
+import { default as De } from "./Indicator/Indicator.vue.js";
+import { default as Se } from "./Input/Input.vue.js";
+import { default as Ae } from "./InputNumber/InputNumber.vue.js";
+import { default as Le } from "./Message/Message.vue.js";
+import { default as _e } from "./OTPCode/OTPCode.vue.js";
+import { PHONE_MASK_PLACEHOLDER as Ie, extractPhoneDigits as Pe, formatPhone as Ee } from "./InputPhone/phoneMask.util.js";
+import { default as Ue } from "./Pagination/Pagination.vue.js";
+import { default as Be } from "./Pagination/PaginationPageSize.vue.js";
+import { default as He } from "./Popover/Popover.vue.js";
+import { default as Re } from "./Radio/Radio.vue.js";
+import { default as we } from "./Radio/RadioGroup.vue.js";
+import { default as Ne } from "./Radio/RadioMarker.vue.js";
+import { default as ye } from "./Schedule/Schedule.vue.js";
+import { default as Ge } from "./Select/Select.vue.js";
+import { default as je } from "./Stepper/Stepper.vue.js";
+import { default as Je } from "./Stepper/StepperItem.vue.js";
+import { default as Ve } from "./Switch/Switch.vue.js";
+import { TOAST_DEFAULT_DURATION_MS as Xe, TOAST_DEFAULT_LIMIT as Ze, toast as $e, useToast as ea } from "./Toast/useToast.js";
+import { default as oa } from "./Tabs/Tabs.vue.js";
+import { default as ra } from "./Tabs/TabsContent.vue.js";
+import { default as la } from "./Tabs/TabsCounter.vue.js";
+import { default as ma } from "./Tabs/TabsList.vue.js";
+import { default as sa } from "./Tabs/TabsTrigger.vue.js";
+import { default as xa } from "./Tag/Tag.vue.js";
+import { default as Ta } from "./Textarea/Textarea.vue.js";
+import { default as na } from "./Toast/Toast.vue.js";
+import { default as ba } from "./Toast/Toaster.vue.js";
+import { default as ga } from "./Tooltip/Tooltip.vue.js";
+import { confirmState as ca, useConfirm as _a } from "./ConfirmDialog/useConfirm.js";
+import { createDataTableColumns as Ia } from "./DataTable/DataTable.columns.js";
+import { vTooltip as Ea } from "./Tooltip/vTooltip.directive.js";
 export {
-  m as Accordion,
+  d as Accordion,
   u as AlertDialog,
   i as Badge,
   D as BottomSheet,
   S as Breadcrumb,
   A as Button,
-  c as Calendar,
+  L as Calendar,
   _ as Checkbox,
-  P as Combobox,
+  I as Combobox,
   t as ConfirmDialog,
-  I as DEFAULT_DAY_LABELS,
+  E as DEFAULT_DAY_LABELS,
   F as DEFAULT_DAY_SHORT_LABELS,
   B as DataTable,
   H as DataTableBody,
@@ -89,44 +92,47 @@ export {
   te as FilePreviewDialog,
   fe as FileUpload,
   pe as FileUploadInline,
-  me as Indicator,
-  ue as Input,
-  ie as InputNumber,
+  de as FormField,
+  ue as Image,
+  ie as ImageList,
+  De as Indicator,
+  Se as Input,
+  Ae as InputNumber,
   f as InputPhone,
   p as InputSelect,
-  De as Message,
-  Se as OTPCode,
-  Ae as PHONE_MASK_PLACEHOLDER,
-  _e as Pagination,
-  Pe as PaginationPageSize,
-  Ie as Popover,
-  Ue as Radio,
-  Be as RadioGroup,
-  He as RadioMarker,
+  Le as Message,
+  _e as OTPCode,
+  Ie as PHONE_MASK_PLACEHOLDER,
+  Ue as Pagination,
+  Be as PaginationPageSize,
+  He as Popover,
+  Re as Radio,
+  we as RadioGroup,
+  Ne as RadioMarker,
   U as SCHEDULE_DAYS,
-  Re as Schedule,
-  we as Select,
-  Ne as Stepper,
-  ye as StepperItem,
-  Ge as Switch,
-  je as TOAST_DEFAULT_DURATION_MS,
-  qe as TOAST_DEFAULT_LIMIT,
-  We as Tabs,
-  Ze as TabsContent,
-  ea as TabsCounter,
-  oa as TabsList,
-  ra as TabsTrigger,
-  la as Tag,
-  da as Textarea,
-  sa as Toast,
-  xa as Toaster,
-  Ta as Tooltip,
-  na as confirmState,
-  Aa as createDataTableColumns,
-  Le as extractPhoneDigits,
-  ce as formatPhone,
-  Je as toast,
-  Sa as useConfirm,
-  Qe as useToast,
-  ca as vTooltip
+  ye as Schedule,
+  Ge as Select,
+  je as Stepper,
+  Je as StepperItem,
+  Ve as Switch,
+  Xe as TOAST_DEFAULT_DURATION_MS,
+  Ze as TOAST_DEFAULT_LIMIT,
+  oa as Tabs,
+  ra as TabsContent,
+  la as TabsCounter,
+  ma as TabsList,
+  sa as TabsTrigger,
+  xa as Tag,
+  Ta as Textarea,
+  na as Toast,
+  ba as Toaster,
+  ga as Tooltip,
+  ca as confirmState,
+  Ia as createDataTableColumns,
+  Pe as extractPhoneDigits,
+  Ee as formatPhone,
+  $e as toast,
+  _a as useConfirm,
+  ea as useToast,
+  Ea as vTooltip
 };

package/dist/components/v2/shared/isHtmlElement.util.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Проверка «это элемент DOM», пригодная для рендера на сервере.
+ *
+ * Писать `node instanceof HTMLElement` напрямую нельзя: в Node глобального
+ * `HTMLElement` нет, и само обращение к имени роняет рендер с
+ * `ReferenceError`. Ловушка не теоретическая — `watchEffect` без коллбэка Vue
+ * выполняет один раз и на сервере, поэтому любая такая проверка в эффекте
+ * срабатывает при SSR, когда ref шаблона ещё null.
+ *
+ * `typeof` — единственная конструкция, которой необъявленный идентификатор не
+ * страшен, поэтому порядок операндов важен и менять его нельзя.
+ */
+export declare function isHtmlElement(node: unknown): node is HTMLElement;
+/** То же самое для `<input>`: на сервере `HTMLInputElement` тоже отсутствует. */
+export declare function isHtmlInputElement(node: unknown): node is HTMLInputElement;

package/dist/components/v2/shared/isHtmlElement.util.js

@@ -0,0 +1,10 @@
+function n(e) {
+  return typeof HTMLElement < "u" && e instanceof HTMLElement;
+}
+function t(e) {
+  return typeof HTMLInputElement < "u" && e instanceof HTMLInputElement;
+}
+export {
+  n as isHtmlElement,
+  t as isHtmlInputElement
+};

package/dist/components/v2/shared/useIsMobile.util.d.ts

@@ -0,0 +1,13 @@
+import { ComputedRef } from 'vue';
+import { TBreakpointMobile } from '../../../types/global.types';
+/**
+ * Единая точка, где проп `breakpointMobile` превращается в «сейчас мобильный
+ * вид». Нужна из-за значения `false`: у `useBreakpoints` порога «никогда»
+ * нет, поэтому выключение приходится обрабатывать до обращения к нему.
+ *
+ * Значение читается один раз при вызове — как и было у прямых вызовов
+ * `breakpoints.smaller(props.breakpointMobile)`: смена самого брейкпоинта на
+ * лету не поддерживалась и раньше, реагировать нужно на ширину экрана, а не
+ * на правку пропа.
+ */
+export declare function useIsMobile(breakpoint: TBreakpointMobile): ComputedRef<boolean>;

package/dist/components/v2/shared/useIsMobile.util.js

@@ -0,0 +1,8 @@
+import { computed as e } from "vue";
+import { breakpoints as o } from "../../../utils/breakpoints.util.js";
+function m(r) {
+  return r === !1 ? e(() => !1) : o.smaller(r);
+}
+export {
+  m as useIsMobile
+};

package/dist/components/v2/shared/useTriggerAria.util.js

@@ -1,4 +1,5 @@
 import { watchEffect as i } from "vue";
+import { isHtmlElement as o } from "./isHtmlElement.util.js";
 const n = [
   "button",
   '[role="button"]',
@@ -10,9 +11,9 @@ const n = [
 ].join(", ");
 function a(e) {
   const t = e?.firstElementChild;
-  return t instanceof HTMLElement ? t.matches(n) ? t : t.querySelector(n) : null;
+  return o(t) ? t.matches(n) ? t : t.querySelector(n) : null;
 }
-function s(e) {
+function l(e) {
   i(() => {
     const t = a(e.host());
     if (!t) return;
@@ -21,5 +22,5 @@ function s(e) {
   });
 }
 export {
-  s as useTriggerAria
+  l as useTriggerAria
 };

package/dist/types/global.types.d.ts

@@ -1,3 +1,13 @@
 export type TVariants = 'success' | 'secondary' | 'warning' | 'danger' | 'info';
 export type TSize = 'extrasmall' | 'small' | 'medium' | 'large' | 'extralarge';
 export type TBreakpoints = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+/**
+ * Брейкпоинт, ниже которого компонент переключается на мобильный вид (обычно
+ * — на шторку снизу). `false` выключает переключение совсем: компонент
+ * остаётся десктопным на любой ширине.
+ *
+ * Отключение нужно там, где мобильный макет не шторка: например
+ * полноэкранная модалка авторизации. Самый мелкий брейкпоинт `sm` — это
+ * 640px, поэтому «поставить порог поменьше» вместо выключения не работает.
+ */
+export type TBreakpointMobile = TBreakpoints | false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@profitliga/ui",
-	"version": "2.0.2",
+	"version": "2.0.4",
 	"author": "Profit League<dev@pr-lg.ru>",
 	"license": "MIT",
 	"description": "Vue 3 UI component library with TypeScript and SCSS",
@@ -54,6 +54,8 @@
 		"format:check": "prettier --check \"src/**/*.{ts,tsx,vue,scss,css,json}\"",
 		"check": "npm run type-check && npm run lint && npm run format:check",
 		"test:a11y": "vitest run --project=storybook",
+		"test:ssr": "vite build --config scripts/ssr-smoke/vite.config.ts && node node_modules/.ssr-smoke/entry.js",
+		"check:css-leak": "node scripts/check-css-leak.mjs",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
 		"prepare": "husky"