@boobooking/dashboard-ui-components 0.5.0 → 0.6.0

package/README.md

@@ -24,10 +24,11 @@ Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в C
 
 ## Компоненты
 
-Пакет экспортирует тринадцать компонентов: `Popup`, `Dot`, `PickDay`,
+Пакет экспортирует четырнадцать компонентов: `Popup`, `Dot`, `PickDay`,
 `RussianMobileFilter`, `Search`, `SelectDateInterval`, `SelectSingle`,
-`SmallBadge`, `ErrorMessages`, `Closer`, `DownloadLink`, `ConfirmationModal`,
-`DropdownButtonWithAction`. В архив пакета (`files: ["dist"]`) исходники не
+`SmallBadge`, `ErrorMessages`, `Closer`, `DownloadLink`, `Modal`,
+`ConfirmationModal`, `DropdownButtonWithAction`. В архив пакета
+(`files: ["dist"]`) исходники не
 попадают, поэтому контракт каждого компонента — здесь и в playground, а не в
 исходном коде.
 
@@ -119,7 +120,9 @@ Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в C
 | `isRequired` | `Boolean` | `false` | Пометка обязательности в заголовке |
 | `isLoading` | `Boolean` | `false` | Индикатор загрузки в заголовке |
 
-События: `update:modelValue` и `changed` — оба на каждый ввод.
+События: `update:modelValue` и `changed` — оба на каждый ввод. Значение,
+изменённое родителем, поле показывает сразу и без событий: ответный
+`update:modelValue` вернул бы родителю его же значение.
 
 ### SelectDateInterval
 
@@ -199,7 +202,8 @@ Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в C
 ### Closer
 
 Кнопка-крестик закрытия. Размер и положение задаёт приложение классами на
-корне: без них у крестика нулевой размер.
+корне: без классов размера крестик получает размер SVG по умолчанию
+(300×300).
 
     <closer class="absolute top-0 right-0 w-8 h-8" @clicked="close" />
 
@@ -218,6 +222,38 @@ Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в C
 
 Событий нет.
 
+### Modal
+
+Оболочка модального окна: оверлей, панель и переходы открытия и закрытия.
+Заголовок, текст и кнопки кладёт в слот приложение. На этой оболочке построен
+`ConfirmationModal`.
+
+    <modal :is-open="isOpen" :heading-id="headingId">
+        <h3 :id="headingId">Заголовок</h3>
+        …содержимое…
+    </modal>
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `isOpen` | `Boolean` | `false` | Открыта ли модалка |
+| `headingId` | `String` | обязателен | `id` заголовка в слоте: им модалка подписывает диалог через `aria-labelledby` |
+
+Событий нет. Модалка не закрывается сама ни по клику на оверлей, ни по
+Escape: видимостью управляет родитель, как у `ConfirmationModal`. `id`
+заголовка удобно получать через `useId()` — тогда у двух модалок на одной
+странице он не совпадёт.
+
+Содержимое слота смонтировано всегда, а закрытая модалка его только прячет
+(`v-show`). Поэтому состояние внутри — выбор, введённый текст, ошибки —
+переживает закрытие, и сбрасывать его должен родитель.
+
+Панель белая, со скруглением `rounded-lg` и без внутренних отступов: их
+задаёт содержимое слота. На узком экране панель прижата к нижнему краю, а её
+ширина — по содержимому, но не больше экрана за вычетом полей; начиная с `sm`
+панель стоит по центру и занимает `max-w-lg`. `class` и другие атрибуты на
+`<modal>` попадают на полноэкранный корень, а не на панель: размер панели и
+атрибуты диалога вроде `aria-describedby` снаружи не задаются.
+
 ### ConfirmationModal
 
 Модалка подтверждения действия: заголовок, текст, кнопка действия и кнопка
@@ -286,6 +322,10 @@ ConfirmationModal нет v-model».
 - Проп-перечисление — ограниченный набор строковых значений, как `color` у
   `Dot` или `align` у `Popup`, — обязательно имеет `validator`,
   отклоняющий значения вне списка.
+- Компонент не падает ни на каком значении пропа. `null` и `undefined` там,
+  где ждут строку, объект или массив, он считает пустыми: пустой строкой,
+  отсутствием сообщений, пустым списком. Для обязательного пропа Vue при этом
+  предупредит о несовпадении типа, но компонент отрисуется.
 
 ## Почему у Popup и Dot нет события changed
 
@@ -320,7 +360,7 @@ ConfirmationModal нет v-model».
 
     npm run playground
 
-Поднимает демо-страницы со всеми тринадцатью компонентами в двух окружениях:
+Поднимает демо-страницы со всеми четырнадцатью компонентами в двух окружениях:
 голом (без Tailwind и стилей приложения) и в окружении приложения (с
 Tailwind, `@tailwindcss/forms` и типографикой, как у потребителя). Это
 основной способ посмотреть, как компоненты выглядят и ведут себя, а не
@@ -344,14 +384,34 @@ Tailwind, `@tailwindcss/forms` и типографикой, как у потре
 победит подключённое позже, то есть компоненты возьмут палитру приложения.
 
 Ресет пакета распространяется и на содержимое слотов — разметку приложения
-внутри `Popup` и `DropdownButtonWithAction`. В приложении с preflight это
-ничего не меняет; без него содержимое слота получит `box-sizing` и снятые
-границы.
+внутри `Popup`, `DropdownButtonWithAction` и `Modal`. Ресет лежит в слое
+`components`, поэтому внутри слота он сильнее всего, что приложение объявило
+в слое `base`: preflight, `@tailwindcss/forms` и собственных умолчаний
+приложения. В слоте он задаёт:
+
+- всем элементам — нулевые `margin` и `padding` и рамку `0 solid` цвета
+  `currentColor`. Умолчания приложения из слоя `base`, например цвет рамок,
+  внутри слота не действуют: голые `border` или `divide-*` получат цвет
+  текста;
+- кнопкам и полям `input` — унаследованные шрифт и цвет, нулевое
+  скругление, прозрачный фон и `opacity: 1`;
+- полям `input` — `appearance: none` и снятое кольцо фокуса (`box-shadow`).
+
+Обычная разметка в приложении с preflight почти не меняется — ресет
+повторяет preflight, а без preflight она получит `box-sizing`, нулевые
+отступы и снятые рамки. Поля из `@tailwindcss/forms` меняются заметно:
+текстовые поля, `select` и `textarea` теряют рамку и внутренние отступы,
+текстовые поля — ещё фон и размер шрифта; чекбоксы и радиокнопки теряют
+рамку, фон, цвет отметки и кольцо фокуса, радиокнопки — ещё и круглую форму.
+Вернуть оформление можно утилитами: слой `utilities` сильнее ресета.
+Например, чекбоксу: `border border-gray-300 bg-white text-indigo-600
+checked:bg-current checked:border-transparent focus:ring-2
+focus:ring-offset-2`.
 
 У `Closer` нет доступного имени, и он выключен из порядка табуляции
 (`tabindex="-1"`): скринридер его не назовёт, а с клавиатуры до него не
 добраться.
 
-`ConfirmationModal` не переносит фокус внутрь при открытии, не удерживает его
-внутри, не возвращает на прежнее место после закрытия и не закрывается по
-Escape.
+`Modal` и построенный на нём `ConfirmationModal` не переносят фокус внутрь при
+открытии, не удерживают его внутри, не возвращают на прежнее место после
+закрытия и не закрываются по Escape.

package/dist/index.js

@@ -1,12 +1,12 @@
 import { Fragment as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, mergeProps as s, normalizeClass as c, openBlock as l, renderList as u, renderSlot as d, resolveComponent as f, toDisplayString as p, useId as m, vModelText as h, vShow as g, withCtx as _, withDirectives as v, withKeys as y, withModifiers as b } from "vue";
 import ee from "pikaday";
-import x from "imask";
+import te from "imask";
 //#region \0plugin-vue:export-helper
-var S = (e, t) => {
+var x = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, C = {
+}, S = {
 	props: {
 		isOpen: {
 			type: Boolean,
@@ -33,7 +33,7 @@ var S = (e, t) => {
 		document.removeEventListener("keydown", this.handleEscape);
 	}
 };
-function w(e, t, n, r, a, o) {
+function C(e, t, n, r, a, o) {
 	return v((l(), i("button", {
 		tabindex: "-1",
 		onClick: t[0] ||= b((...e) => o.closeOverlay && o.closeOverlay(...e), ["prevent"]),
@@ -46,8 +46,8 @@ function w(e, t, n, r, a, o) {
 }
 //#endregion
 //#region src/components/Popup.vue
-var T = {
-	components: { Overlay: /* @__PURE__ */ S(C, [["render", w]]) },
+var w = {
+	components: { Overlay: /* @__PURE__ */ x(S, [["render", C]]) },
 	inheritAttrs: !1,
 	emits: ["update:modelValue"],
 	props: {
@@ -80,10 +80,10 @@ var T = {
 			return this.align === "right";
 		}
 	}
-}, E = { class: "bb-dashboard-ui relative" };
-function D(e, n, r, c, u, p) {
+}, T = { class: "bb-dashboard-ui relative" };
+function E(e, n, r, c, u, p) {
 	let m = f("overlay");
-	return l(), i("div", E, [o(m, {
+	return l(), i("div", T, [o(m, {
 		"is-open": u.overlayIsOpen,
 		"onUpdate:isOpen": n[0] ||= (e) => u.overlayIsOpen = e
 	}, null, 8, ["is-open"]), o(t, {
@@ -101,7 +101,7 @@ function D(e, n, r, c, u, p) {
 		_: 3
 	})]);
 }
-var O = /*#__PURE__*/ S(T, [["render", D]]), te = {
+var D = /*#__PURE__*/ x(w, [["render", E]]), ne = {
 	props: {
 		withPulse: {
 			type: Boolean,
@@ -122,7 +122,7 @@ var O = /*#__PURE__*/ S(T, [["render", D]]), te = {
 		}
 	}
 };
-function ne(e, t, n, r, o, s) {
+function re(e, t, n, r, o, s) {
 	return l(), i("div", { class: c(["bb-dashboard-ui flex h-full items-center leading-none text-4xl", {
 		"text-red-500": s.isRed,
 		"text-green-500": s.isGreen,
@@ -136,13 +136,13 @@ function ne(e, t, n, r, o, s) {
 		r: "45"
 	})], -1)]], 2);
 }
-var k = /*#__PURE__*/ S(te, [["render", ne]]), A = {}, j = {
+var O = /*#__PURE__*/ x(ne, [["render", re]]), k = {}, A = {
 	type: "button",
 	tabindex: "-1",
 	class: "absolute right-0 top-0 flex items-center justify-center bg-transparent cursor-pointer text-gray-300 hover:text-gray-400 focus:outline-hidden"
 };
-function M(e, t, n, r, o, s) {
-	return l(), i("button", j, [...t[0] ||= [a("svg", {
+function j(e, t, n, r, o, s) {
+	return l(), i("button", A, [...t[0] ||= [a("svg", {
 		class: "w-6 h-6 stroke-current",
 		fill: "none",
 		viewBox: "0 0 24 24"
@@ -153,13 +153,13 @@ function M(e, t, n, r, o, s) {
 		d: "M6 18L18 6M6 6l12 12"
 	})], -1)]]);
 }
-var N = /*#__PURE__*/ S(A, [["render", M]]);
+var M = /*#__PURE__*/ x(k, [["render", j]]);
 //#endregion
 //#region src/date.js
-function P(e) {
+function N(e) {
 	return `${String(e.getDate()).padStart(2, "0")}.${String(e.getMonth() + 1).padStart(2, "0")}.${String(e.getFullYear()).padStart(4, "0")}`;
 }
-function F(e) {
+function P(e) {
 	let t = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/.exec(e);
 	if (t === null) return null;
 	let [, n, r, i] = t.map(Number), a = /* @__PURE__ */ new Date(0);
@@ -167,10 +167,10 @@ function F(e) {
 }
 //#endregion
 //#region src/components/PickDay.vue
-var I = {
+var F = {
 	components: {
-		Popup: O,
-		Eraser: N
+		Popup: D,
+		Eraser: M
 	},
 	emits: ["update:modelValue", "changed"],
 	props: {
@@ -197,8 +197,8 @@ var I = {
 			keyboardInput: !1,
 			bound: !1,
 			firstDay: 1,
-			parse: (e) => F(e),
-			toString: (e) => P(e),
+			parse: (e) => P(e),
+			toString: (e) => N(e),
 			i18n: {
 				previousMonth: "Предыдущий месяц",
 				nextMonth: "Следующий месяц",
@@ -236,7 +236,7 @@ var I = {
 				]
 			},
 			onSelect: (e) => {
-				this.popupIsOpen = !1, this.$emit("update:modelValue", P(e)), this.$emit("changed");
+				this.popupIsOpen = !1, this.$emit("update:modelValue", N(e)), this.$emit("changed");
 			}
 		});
 	},
@@ -246,15 +246,16 @@ var I = {
 	data() {
 		return {
 			popupIsOpen: !1,
-			dayValue: this.modelValue
+			dayValue: this.modelValue ?? ""
 		};
 	},
 	watch: { modelValue(e) {
-		this.dayValue = e, this.syncPicker(e);
+		let t = e ?? "";
+		this.dayValue = t, this.syncPicker(t);
 	} },
 	methods: {
 		syncPicker(e) {
-			let t = F(e);
+			let t = P(e);
 			if (t === null) {
 				this.picker.clear();
 				return;
@@ -267,35 +268,35 @@ var I = {
 	},
 	computed: {
 		hasValue() {
-			return this.modelValue.length > 0;
+			return (this.modelValue ?? "").length > 0;
 		},
 		needsEraser() {
 			return !this.withEraser || this.popupIsOpen ? !1 : this.hasValue;
 		}
 	}
-}, L = { class: "bb-dashboard-ui flex flex-col" }, R = { class: "relative flex h-full cursor-pointer leading-none" }, z = { class: "min-w-24 w-full h-full" }, B = [
+}, I = { class: "bb-dashboard-ui flex flex-col" }, L = { class: "relative flex h-full cursor-pointer leading-none" }, R = { class: "min-w-24 w-full h-full" }, z = [
 	"disabled",
 	"value",
 	"placeholder"
-], V = {
+], B = {
 	ref: "container",
 	class: "flex mt-1 bg-white border border-gray-200 rounded-md shadow-lg"
 };
-function H(e, t, s, u, d, p) {
+function V(e, t, s, u, d, p) {
 	let m = f("eraser"), h = f("popup");
-	return l(), i("div", L, [a("div", R, [a("button", {
+	return l(), i("div", I, [a("div", L, [a("button", {
 		ref: "trigger",
 		type: "button",
 		class: c(["flex w-full items-center focus:outline-hidden", { "z-20": d.popupIsOpen }]),
 		onClick: t[0] ||= (e) => d.popupIsOpen = !d.popupIsOpen
-	}, [a("label", z, [a("input", {
+	}, [a("label", R, [a("input", {
 		disabled: d.popupIsOpen,
 		ref: "field",
 		type: "text",
 		value: d.dayValue,
 		placeholder: s.placeholderText,
 		class: "w-full h-full py-2 pr-3 leading-none border border-transparent whitespace-nowrap bg-transparent placeholder:text-sm placeholder-gray-300 cursor-pointer focus:outline-hidden"
-	}, null, 8, B)])], 2), p.needsEraser ? (l(), n(m, {
+	}, null, 8, z)])], 2), p.needsEraser ? (l(), n(m, {
 		key: 0,
 		onClick: p.clearPicker,
 		class: "z-10 h-full pr-2"
@@ -303,12 +304,12 @@ function H(e, t, s, u, d, p) {
 		modelValue: d.popupIsOpen,
 		"onUpdate:modelValue": t[1] ||= (e) => d.popupIsOpen = e
 	}, {
-		default: _(() => [a("div", V, null, 512)]),
+		default: _(() => [a("div", B, null, 512)]),
 		_: 1
 	}, 8, ["modelValue"])]);
 }
-var U = /*#__PURE__*/ S(I, [["render", H]]), W = {
-	components: { Dot: k },
+var H = /*#__PURE__*/ x(F, [["render", V]]), U = {
+	components: { Dot: O },
 	props: {
 		text: {
 			type: String,
@@ -323,14 +324,14 @@ var U = /*#__PURE__*/ S(I, [["render", H]]), W = {
 			default: !1
 		}
 	}
-}, G = { class: "flex h-6 px-3 bg-white items-center justify-between" }, K = ["textContent"];
-function q(e, t, n, r, s, c) {
+}, W = { class: "flex h-6 px-3 bg-white items-center justify-between" }, G = ["textContent"];
+function K(e, t, n, r, s, c) {
 	let u = f("dot");
-	return l(), i("div", G, [
+	return l(), i("div", W, [
 		a("div", {
 			class: "flex flex-1 h-full items-center text-xs text-gray-500 whitespace-nowrap truncate leading-tight select-none",
 			textContent: p(n.text)
-		}, null, 8, K),
+		}, null, 8, G),
 		v(o(u, {
 			color: "red",
 			"with-pulse": !0,
@@ -342,24 +343,24 @@ function q(e, t, n, r, s, c) {
 		}, null, 512), [[g, n.isRequired]])
 	]);
 }
-var J = /*#__PURE__*/ S(W, [["render", q]]), Y = 10;
-function X(e) {
+var q = /*#__PURE__*/ x(U, [["render", K]]), J = 10;
+function Y(e) {
 	let t = e.replace(/\D/g, "");
-	return (t.startsWith("7") || t.startsWith("8")) && t[1] === "9" && (t = t.slice(1)), t.slice(0, Y);
+	return (t.startsWith("7") || t.startsWith("8")) && t[1] === "9" && (t = t.slice(1)), t.slice(0, J);
 }
-function Z(e) {
+function X(e) {
 	return e === "" ? "" : `7${e}`;
 }
-function Q(e) {
-	let t = e.startsWith("+") ? e.slice(1) : e;
-	return t.startsWith("7") ? t.slice(1) : t;
+function Z(e) {
+	let t = e ?? "", n = t.startsWith("+") ? t.slice(1) : t;
+	return n.startsWith("7") ? n.slice(1) : n;
 }
 //#endregion
 //#region src/components/RussianMobileFilter.vue
-var re = 400, ie = 3, ae = {
+var ie = 400, ae = 3, oe = {
 	components: {
-		ElementHeader: J,
-		Eraser: N
+		ElementHeader: q,
+		Eraser: M
 	},
 	emits: ["update:modelValue", "changed"],
 	props: {
@@ -381,32 +382,32 @@ var re = 400, ie = 3, ae = {
 		}
 	},
 	data() {
-		return { digits: Q(this.modelValue) };
+		return { digits: Z(this.modelValue) };
 	},
 	created() {
-		this.mask = null, this.debounceTimer = null, this.isWritingProgrammatically = !1, this.lastCommitted = Q(this.modelValue);
+		this.mask = null, this.debounceTimer = null, this.isWritingProgrammatically = !1, this.lastCommitted = Z(this.modelValue);
 	},
 	mounted() {
-		this.mask = x(this.$refs.input, {
+		this.mask = te(this.$refs.input, {
 			mask: "+7 (000) 000 00 00",
 			lazy: !0,
 			prepare: (e, t) => t.unmaskedValue === "" && (e === "7" || e === "8") ? "" : e
 		}), this.mask.on("accept", () => {
-			this.isWritingProgrammatically || (this.digits = this.mask.unmaskedValue, this.$emit("update:modelValue", Z(this.digits)), this.scheduleCommit());
+			this.isWritingProgrammatically || (this.digits = this.mask.unmaskedValue, this.$emit("update:modelValue", X(this.digits)), this.scheduleCommit());
 		}), this.syncFromModelValue(this.modelValue);
 	},
 	beforeUnmount() {
 		clearTimeout(this.debounceTimer), this.mask?.destroy();
 	},
 	watch: { modelValue(e) {
-		e !== Z(this.digits) && this.syncFromModelValue(e);
+		e !== X(this.digits) && this.syncFromModelValue(e);
 	} },
 	methods: {
 		syncFromModelValue(e) {
-			this.writeToMask(Q(e)), this.digits = this.mask.unmaskedValue, this.lastCommitted = this.digits;
+			this.writeToMask(Z(e)), this.digits = this.mask.unmaskedValue, this.lastCommitted = this.digits;
 		},
 		applyUserDigits(e) {
-			this.writeToMask(e), this.digits = this.mask.unmaskedValue, this.$emit("update:modelValue", Z(this.digits));
+			this.writeToMask(e), this.digits = this.mask.unmaskedValue, this.$emit("update:modelValue", X(this.digits));
 		},
 		writeToMask(e) {
 			if (this.isWritingProgrammatically = !0, e === "") this.mask.value = "";
@@ -429,7 +430,7 @@ var re = 400, ie = 3, ae = {
 			this.setLazy(!0), this.digits === "" && this.writeToMask(""), this.commit();
 		},
 		onPaste(e) {
-			this.applyUserDigits(X(e.clipboardData?.getData("text") ?? "")), this.scheduleCommit();
+			this.applyUserDigits(Y(e.clipboardData?.getData("text") ?? "")), this.scheduleCommit();
 		},
 		clear() {
 			this.applyUserDigits(""), this.commit();
@@ -439,16 +440,16 @@ var re = 400, ie = 3, ae = {
 				this.commit();
 				return;
 			}
-			this.digits.length < ie || (this.debounceTimer = setTimeout(() => this.commit(), re));
+			this.digits.length < ae || (this.debounceTimer = setTimeout(() => this.commit(), ie));
 		},
 		commit() {
 			clearTimeout(this.debounceTimer), this.digits !== this.lastCommitted && (this.lastCommitted = this.digits, this.$emit("changed"));
 		}
 	}
-}, oe = { class: "bb-dashboard-ui flex flex-none" }, se = { class: "flex w-full flex-col border border-white bg-white" }, ce = { class: "relative flex h-full w-full" }, le = { class: "flex w-full h-full items-center justify-center" };
-function ue(e, t, n, r, s, c) {
+}, se = { class: "bb-dashboard-ui flex flex-none" }, ce = { class: "flex w-full flex-col border border-white bg-white" }, le = { class: "relative flex h-full w-full" }, ue = { class: "flex w-full h-full items-center justify-center" };
+function de(e, t, n, r, s, c) {
 	let u = f("element-header"), d = f("eraser");
-	return l(), i("div", oe, [a("div", se, [o(u, {
+	return l(), i("div", se, [a("div", ce, [o(u, {
 		text: n.header,
 		"is-required": n.isRequired,
 		"is-loading": n.isLoading
@@ -456,7 +457,7 @@ function ue(e, t, n, r, s, c) {
 		"text",
 		"is-required",
 		"is-loading"
-	]), a("div", ce, [a("label", le, [a("input", {
+	]), a("div", le, [a("label", ue, [a("input", {
 		ref: "input",
 		type: "tel",
 		inputmode: "tel",
@@ -472,10 +473,10 @@ function ue(e, t, n, r, s, c) {
 		class: "pr-2 h-full"
 	}, null, 8, ["onClick"]), [[g, s.digits.length > 0]])])])])]);
 }
-var de = /*#__PURE__*/ S(ae, [["render", ue]]), fe = {
+var fe = /*#__PURE__*/ x(oe, [["render", de]]), pe = {
 	components: {
-		ElementHeader: J,
-		Eraser: N
+		ElementHeader: q,
+		Eraser: M
 	},
 	emits: ["update:modelValue", "changed"],
 	props: {
@@ -497,12 +498,14 @@ var de = /*#__PURE__*/ S(ae, [["render", ue]]), fe = {
 		}
 	},
 	data() {
-		return { search: this.modelValue };
+		return { search: this.modelValue ?? "" };
 	},
 	computed: { inputNeedsEraser() {
 		return this.search.length > 0;
 	} },
-	watch: {},
+	watch: { modelValue(e) {
+		this.search = e ?? "";
+	} },
 	methods: {
 		clearInput() {
 			this.search = "", this.startSearch();
@@ -511,10 +514,10 @@ var de = /*#__PURE__*/ S(ae, [["render", ue]]), fe = {
 			this.$emit("update:modelValue", this.search), this.$emit("changed");
 		}
 	}
-}, pe = { class: "bb-dashboard-ui flex flex-none" }, me = { class: "flex w-full flex-col border border-white bg-white" }, he = { class: "relative flex h-full w-full" }, ge = { class: "flex w-full h-full items-center justify-center" };
-function _e(e, t, n, r, s, c) {
+}, me = { class: "bb-dashboard-ui flex flex-none" }, he = { class: "flex w-full flex-col border border-white bg-white" }, ge = { class: "relative flex h-full w-full" }, _e = { class: "flex w-full h-full items-center justify-center" };
+function ve(e, t, n, r, s, c) {
 	let u = f("element-header"), d = f("eraser");
-	return l(), i("div", pe, [a("div", me, [o(u, {
+	return l(), i("div", me, [a("div", he, [o(u, {
 		text: n.header,
 		"is-required": n.isRequired,
 		"is-loading": n.isLoading
@@ -522,7 +525,7 @@ function _e(e, t, n, r, s, c) {
 		"text",
 		"is-required",
 		"is-loading"
-	]), a("div", he, [a("label", ge, [v(a("input", {
+	]), a("div", ge, [a("label", _e, [v(a("input", {
 		class: "flex w-full h-full px-3 py-2 cursor-pointer truncate focus:outline-hidden border-none",
 		"onUpdate:modelValue": t[0] ||= (e) => s.search = e,
 		onInput: t[1] ||= (...e) => c.startSearch && c.startSearch(...e)
@@ -536,10 +539,10 @@ function _e(e, t, n, r, s, c) {
 		class: "pr-2 h-full"
 	}, null, 8, ["onClick"]), [[g, c.inputNeedsEraser]])])])])]);
 }
-var ve = /*#__PURE__*/ S(fe, [["render", _e]]), ye = {
+var ye = /*#__PURE__*/ x(pe, [["render", ve]]), be = {
 	components: {
-		ElementHeader: J,
-		PickDay: U
+		ElementHeader: q,
+		PickDay: H
 	},
 	emits: [
 		"update:dateFrom",
@@ -588,10 +591,10 @@ var ve = /*#__PURE__*/ S(fe, [["render", _e]]), ye = {
 			this.$emit("update:dateTo", e), this.dateTo !== e && this.$emit("changed");
 		}
 	}
-}, be = { class: "bb-dashboard-ui flex" }, xe = { class: "flex border border-white" }, Se = { class: "flex flex-col min-w-72 w-72 bg-white h-full" }, Ce = { class: "flex h-full divide-x divide-gray-200" };
-function we(e, t, n, r, s, c) {
+}, xe = { class: "bb-dashboard-ui flex" }, Se = { class: "flex border border-white" }, Ce = { class: "flex flex-col min-w-72 w-72 bg-white h-full" }, we = { class: "flex h-full divide-x divide-gray-200" };
+function Te(e, t, n, r, s, c) {
 	let u = f("element-header"), d = f("pick-day");
-	return l(), i("div", be, [a("div", xe, [a("div", Se, [o(u, {
+	return l(), i("div", xe, [a("div", Se, [a("div", Ce, [o(u, {
 		text: n.header,
 		"is-required": n.isRequired,
 		"is-loading": n.isLoading
@@ -599,7 +602,7 @@ function we(e, t, n, r, s, c) {
 		"text",
 		"is-required",
 		"is-loading"
-	]), a("div", Ce, [o(d, {
+	]), a("div", we, [o(d, {
 		modelValue: s.userDateFrom,
 		"onUpdate:modelValue": t[0] ||= (e) => s.userDateFrom = e,
 		class: "flex-1 min-w-36 pl-3",
@@ -611,10 +614,10 @@ function we(e, t, n, r, s, c) {
 		"placeholder-text": "до"
 	}, null, 8, ["modelValue"])])])])]);
 }
-var Te = /*#__PURE__*/ S(ye, [["render", we]]), Ee = {
+var Ee = /*#__PURE__*/ x(be, [["render", Te]]), De = {
 	components: {
-		Popup: O,
-		Eraser: N
+		Popup: D,
+		Eraser: M
 	},
 	emits: ["update:isOpen", "erased"],
 	props: {
@@ -645,17 +648,17 @@ var Te = /*#__PURE__*/ S(ye, [["render", we]]), Ee = {
 	computed: { needsEraser() {
 		return !this.isOpen && this.hasValue;
 	} }
-}, De = { class: "flex flex-col grow bg-white" }, Oe = { class: "relative flex w-full h-full" }, ke = ["textContent"];
-function Ae(e, t, s, u, m, h) {
+}, Oe = { class: "flex flex-col grow bg-white" }, ke = { class: "relative flex w-full h-full" }, Ae = ["textContent"];
+function je(e, t, s, u, m, h) {
 	let g = f("eraser"), v = f("popup");
-	return l(), i("div", De, [a("div", Oe, [a("button", {
+	return l(), i("div", Oe, [a("div", ke, [a("button", {
 		type: "button",
 		class: c(["flex w-full h-full items-center focus:outline-hidden cursor-pointer", { "z-20": s.isOpen }]),
 		onClick: t[0] ||= b((t) => e.$emit("update:isOpen", !s.isOpen), ["prevent"])
 	}, [a("span", {
 		class: "flex w-full h-full pl-3 pr-12 py-2 items-center whitespace-nowrap leading-none",
 		textContent: p(s.title)
-	}, null, 8, ke)], 2), h.needsEraser ? (l(), n(g, {
+	}, null, 8, Ae)], 2), h.needsEraser ? (l(), n(g, {
 		key: 0,
 		onClick: t[1] ||= (t) => e.$emit("erased"),
 		class: "pr-2 h-full"
@@ -667,7 +670,7 @@ function Ae(e, t, s, u, m, h) {
 		_: 3
 	}, 8, ["modelValue"])]);
 }
-var je = /*#__PURE__*/ S(Ee, [["render", Ae]]), Me = {
+var Me = /*#__PURE__*/ x(De, [["render", je]]), Ne = {
 	props: {
 		isChecked: {
 			type: Boolean,
@@ -679,31 +682,31 @@ var je = /*#__PURE__*/ S(Ee, [["render", Ae]]), Me = {
 	methods: { toggle() {
 		this.$emit("clicked");
 	} }
-}, Ne = { class: "flex w-9 h-9 items-center justify-center" }, Pe = {
+}, Pe = { class: "flex w-9 h-9 items-center justify-center" }, Fe = {
 	class: "w-5 h-5 fill-current text-green-300",
 	viewBox: "0 0 20 20"
-}, Fe = ["textContent"];
-function Ie(e, t, n, r, o, s) {
+}, Ie = ["textContent"];
+function Le(e, t, n, r, o, s) {
 	return l(), i("button", {
 		type: "button",
 		onClick: t[0] ||= b((...e) => s.toggle && s.toggle(...e), ["prevent"]),
 		class: "flex w-full bg-white hover:bg-indigo-100 cursor-pointer focus:outline-hidden focus:ring-3 focus:z-10 focus:ring-blue-500/50"
-	}, [a("span", Ne, [v((l(), i("svg", Pe, [...t[1] ||= [a("path", {
+	}, [a("span", Pe, [v((l(), i("svg", Fe, [...t[1] ||= [a("path", {
 		d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
 		"clip-rule": "evenodd",
 		"fill-rule": "evenodd"
 	}, null, -1)]], 512)), [[g, n.isChecked]])]), a("span", {
 		class: "flex h-9 justify-center items-center pr-6 whitespace-nowrap select-none",
 		textContent: p(n.name)
-	}, null, 8, Fe)]);
+	}, null, 8, Ie)]);
 }
 //#endregion
 //#region src/components/SelectSingle.vue
-var Le = {
+var Re = {
 	components: {
-		ElementHeader: J,
-		DropdownButton: je,
-		ListElement: /* @__PURE__ */ S(Me, [["render", Ie]])
+		ElementHeader: q,
+		DropdownButton: Me,
+		ListElement: /* @__PURE__ */ x(Ne, [["render", Le]])
 	},
 	emits: ["update:modelValue", "changed"],
 	props: {
@@ -732,14 +735,17 @@ var Le = {
 		return { isOpen: !1 };
 	},
 	computed: {
+		itemList() {
+			return this.items ?? [];
+		},
 		activeItem() {
-			return this.items.find((e) => e.id === this.modelValue) ?? null;
+			return this.itemList.find((e) => e.id === this.modelValue) ?? null;
 		},
 		activeItemName() {
 			return this.activeItem === null ? null : this.activeItem.name;
 		},
 		hasItems() {
-			return this.items.length > 0;
+			return this.itemList.length > 0;
 		},
 		hasValue() {
 			return this.activeItem !== null;
@@ -753,10 +759,10 @@ var Le = {
 			this.$emit("update:modelValue", null), this.$emit("changed");
 		}
 	}
-}, Re = { class: "bb-dashboard-ui flex flex-none" }, ze = { class: "flex w-full flex-col border border-white bg-white" }, Be = { class: "flex flex-col py-1 mt-1 bg-white border border-gray-200 rounded-md shadow-lg divide-y divide-gray-200 divide-dashed" };
-function Ve(t, s, c, d, p, m) {
+}, ze = { class: "bb-dashboard-ui flex flex-none" }, Be = { class: "flex w-full flex-col border border-white bg-white" }, Ve = { class: "flex flex-col py-1 mt-1 bg-white border border-gray-200 rounded-md shadow-lg divide-y divide-gray-200 divide-dashed" };
+function He(t, s, c, d, p, m) {
 	let h = f("element-header"), g = f("list-element"), v = f("dropdown-button");
-	return l(), i("div", Re, [a("div", ze, [o(h, {
+	return l(), i("div", ze, [a("div", Be, [o(h, {
 		text: c.header,
 		"is-required": c.isRequired,
 		"is-loading": c.isLoading
@@ -772,7 +778,7 @@ function Ve(t, s, c, d, p, m) {
 		"has-value": m.hasValue,
 		onErased: m.clear
 	}, {
-		default: _(() => [a("div", Be, [(l(!0), i(e, null, u(c.items, (e) => (l(), n(g, {
+		default: _(() => [a("div", Ve, [(l(!0), i(e, null, u(m.itemList, (e) => (l(), n(g, {
 			name: e.name,
 			key: e.id,
 			"is-checked": e.id === c.modelValue,
@@ -790,7 +796,7 @@ function Ve(t, s, c, d, p, m) {
 		"onErased"
 	])) : r("", !0)])]);
 }
-var He = /*#__PURE__*/ S(Le, [["render", Ve]]), Ue = {
+var Ue = /*#__PURE__*/ x(Re, [["render", He]]), We = {
 	props: {
 		text: {
 			type: String,
@@ -829,8 +835,8 @@ var He = /*#__PURE__*/ S(Le, [["render", Ve]]), Ue = {
 			return this.color === "yellow";
 		}
 	}
-}, We = ["textContent"];
-function Ge(e, t, n, r, a, o) {
+}, Ge = ["textContent"];
+function Ke(e, t, n, r, a, o) {
 	return l(), i("span", {
 		class: c(["bb-dashboard-ui inline-flex items-center px-3 py-2 rounded-full text-xs font-medium leading-none select-none whitespace-nowrap", {
 			"bg-green-50 text-gray-700": o.isGreen,
@@ -841,9 +847,9 @@ function Ge(e, t, n, r, a, o) {
 			"bg-yellow-100 text-yellow-800": o.isYellow
 		}]),
 		textContent: p(n.text)
-	}, null, 10, We);
+	}, null, 10, Ge);
 }
-var Ke = /*#__PURE__*/ S(Ue, [["render", Ge]]), qe = {
+var qe = /*#__PURE__*/ x(We, [["render", Ke]]), Je = {
 	props: {
 		messages: {
 			type: [Object, Array],
@@ -857,18 +863,18 @@ var Ke = /*#__PURE__*/ S(Ue, [["render", Ge]]), qe = {
 	},
 	computed: {
 		hasErrors() {
-			return Object.keys(this.messages).length > 0;
+			return Object.keys(this.messages ?? {}).length > 0;
 		},
 		isDangerous() {
 			return this.type === "dangerous";
 		}
 	}
-}, Je = { class: "flex" }, Ye = { class: "shrink-0" }, Xe = { class: "ml-3" }, Ze = ["textContent"];
-function Qe(t, n, o, s, d, f) {
+}, Ye = { class: "flex" }, Xe = { class: "shrink-0" }, Ze = { class: "ml-3" }, Qe = ["textContent"];
+function $e(t, n, o, s, d, f) {
 	return f.hasErrors ? (l(), i("div", {
 		key: 0,
 		class: c(["bb-dashboard-ui border-l-4 p-4", f.isDangerous ? "bg-red-50 border-red-400" : "bg-yellow-50 border-yellow-400"])
-	}, [a("div", Je, [a("div", Ye, [(l(), i("svg", {
+	}, [a("div", Ye, [a("div", Xe, [(l(), i("svg", {
 		class: c(["h-5 w-5", f.isDangerous ? "text-red-400" : "text-yellow-400"]),
 		viewBox: "0 0 20 20",
 		fill: "currentColor"
@@ -876,14 +882,14 @@ function Qe(t, n, o, s, d, f) {
 		"fill-rule": "evenodd",
 		d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
 		"clip-rule": "evenodd"
-	}, null, -1)]], 2))]), a("div", Xe, [(l(!0), i(e, null, u(o.messages, (e, t) => (l(), i("p", {
+	}, null, -1)]], 2))]), a("div", Ze, [(l(!0), i(e, null, u(o.messages, (e, t) => (l(), i("p", {
 		class: c(["text-sm leading-5", f.isDangerous ? "text-red-700" : "text-yellow-700"]),
 		key: t,
 		textContent: p(e)
-	}, null, 10, Ze))), 128))])])], 2)) : r("", !0);
+	}, null, 10, Qe))), 128))])])], 2)) : r("", !0);
 }
-var $e = /*#__PURE__*/ S(qe, [["render", Qe]]), et = { emits: ["clicked"] };
-function tt(e, t, n, r, o, s) {
+var et = /*#__PURE__*/ x(Je, [["render", $e]]), tt = { emits: ["clicked"] };
+function nt(e, t, n, r, o, s) {
 	return l(), i("button", {
 		type: "button",
 		tabindex: "-1",
@@ -900,15 +906,15 @@ function tt(e, t, n, r, o, s) {
 		d: "M6 18L18 6M6 6l12 12"
 	})], -1)]]);
 }
-var nt = /*#__PURE__*/ S(et, [["render", tt]]), rt = {}, it = {
+var rt = /*#__PURE__*/ x(tt, [["render", nt]]), it = {}, at = {
 	class: "w-4 h-4",
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg"
 };
-function at(e, t, n, r, o, s) {
-	return l(), i("svg", it, [...t[0] ||= [a("path", {
+function ot(e, t, n, r, o, s) {
+	return l(), i("svg", at, [...t[0] ||= [a("path", {
 		"stroke-linecap": "round",
 		"stroke-linejoin": "round",
 		"stroke-width": "2",
@@ -917,8 +923,8 @@ function at(e, t, n, r, o, s) {
 }
 //#endregion
 //#region src/components/DownloadLink.vue
-var ot = {
-	components: { "download-icon": /* @__PURE__ */ S(rt, [["render", at]]) },
+var st = {
+	components: { "download-icon": /* @__PURE__ */ x(it, [["render", ot]]) },
 	props: {
 		url: {
 			type: String,
@@ -929,16 +935,16 @@ var ot = {
 			default: "Скачать"
 		}
 	}
-}, st = ["href", "title"], ct = { class: "ml-1" };
-function lt(e, t, n, r, s, c) {
+}, ct = ["href", "title"], lt = { class: "ml-1" };
+function ut(e, t, n, r, s, c) {
 	let u = f("download-icon");
 	return l(), i("a", {
 		href: n.url,
 		title: n.title,
 		class: "bb-dashboard-ui inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium leading-none select-none bg-purple-100 text-purple-800 hover:text-purple-600"
-	}, [o(u), a("span", ct, p(n.title), 1)], 8, st);
+	}, [o(u), a("span", lt, p(n.title), 1)], 8, ct);
 }
-var ut = /*#__PURE__*/ S(ot, [["render", lt]]), dt = { props: {
+var dt = /*#__PURE__*/ x(st, [["render", ut]]), ft = { props: {
 	isOpen: {
 		type: Boolean,
 		default: !1
@@ -947,9 +953,9 @@ var ut = /*#__PURE__*/ S(ot, [["render", lt]]), dt = { props: {
 		type: String,
 		required: !0
 	}
-} }, ft = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" }, pt = { class: "fixed inset-0 transition-opacity" }, mt = ["aria-labelledby"];
-function ht(e, n, r, s, u, f) {
-	return l(), i("div", { class: c(["bb-dashboard-ui fixed inset-0 overflow-y-auto z-20", { "pointer-events-none": !r.isOpen }]) }, [a("div", ft, [
+} }, pt = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" }, mt = { class: "fixed inset-0 transition-opacity" }, ht = ["aria-labelledby"];
+function gt(e, n, r, s, u, f) {
+	return l(), i("div", { class: c(["bb-dashboard-ui fixed inset-0 overflow-y-auto z-20", { "pointer-events-none": !r.isOpen }]) }, [a("div", pt, [
 		o(t, {
 			"enter-active-class": "ease-out duration-300",
 			"enter-from-class": "opacity-0",
@@ -958,7 +964,7 @@ function ht(e, n, r, s, u, f) {
 			"leave-from-class": "opacity-100",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: _(() => [v(a("div", pt, [...n[0] ||= [a("div", { class: "absolute inset-0 bg-gray-500 opacity-75" }, null, -1)]], 512), [[g, r.isOpen]])]),
+			default: _(() => [v(a("div", mt, [...n[0] ||= [a("div", { class: "absolute inset-0 bg-gray-500 opacity-75" }, null, -1)]], 512), [[g, r.isOpen]])]),
 			_: 1
 		}),
 		n[1] ||= a("span", { class: "hidden sm:inline-block sm:align-middle sm:h-screen" }, null, -1),
@@ -975,12 +981,12 @@ function ht(e, n, r, s, u, f) {
 				role: "dialog",
 				"aria-modal": "true",
 				"aria-labelledby": r.headingId
-			}, [d(e.$slots, "default")], 8, mt), [[g, r.isOpen]])]),
+			}, [d(e.$slots, "default")], 8, ht), [[g, r.isOpen]])]),
 			_: 3
 		})
 	])], 2);
 }
-var gt = /*#__PURE__*/ S(dt, [["render", ht]]), _t = {}, vt = {
+var Q = /*#__PURE__*/ x(ft, [["render", gt]]), _t = {}, vt = {
 	class: "h-7 w-7 text-red-600",
 	xmlns: "http://www.w3.org/2000/svg",
 	fill: "none",
@@ -996,7 +1002,7 @@ function yt(e, t, n, r, o, s) {
 		d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
 	}, null, -1)]]);
 }
-var bt = /*#__PURE__*/ S(_t, [["render", yt]]), xt = {}, St = {
+var bt = /*#__PURE__*/ x(_t, [["render", yt]]), xt = {}, St = {
 	class: "h-7 w-7 text-yellow-400",
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 20 20",
@@ -1014,9 +1020,9 @@ function Ct(e, t, n, r, o, s) {
 //#region src/components/ConfirmationModal.vue
 var wt = {
 	components: {
-		Modal: gt,
+		Modal: Q,
 		Dangerous: bt,
-		Warning: /* @__PURE__ */ S(xt, [["render", Ct]])
+		Warning: /* @__PURE__ */ x(xt, [["render", Ct]])
 	},
 	emits: ["actionConfirmed", "actionCanceled"],
 	props: {
@@ -1085,8 +1091,8 @@ function jt(e, t, i, o, s, u) {
 		_: 1
 	}, 8, ["is-open", "heading-id"]);
 }
-var Mt = /*#__PURE__*/ S(wt, [["render", jt]]), Nt = {
-	components: { Popup: O },
+var Mt = /*#__PURE__*/ x(wt, [["render", jt]]), Nt = {
+	components: { Popup: D },
 	emits: ["update:modelValue"],
 	props: { modelValue: {
 		type: Boolean,
@@ -1143,6 +1149,6 @@ function Rt(e, t, n, s, u, p) {
 		_: 3
 	}, 8, ["model-value", "onUpdate:modelValue"])])) : r("", !0)]);
 }
-var zt = /*#__PURE__*/ S(Nt, [["render", Rt]]);
+var zt = /*#__PURE__*/ x(Nt, [["render", Rt]]);
 //#endregion
-export { nt as Closer, Mt as ConfirmationModal, k as Dot, ut as DownloadLink, zt as DropdownButtonWithAction, $e as ErrorMessages, U as PickDay, O as Popup, de as RussianMobileFilter, ve as Search, Te as SelectDateInterval, He as SelectSingle, Ke as SmallBadge };
+export { rt as Closer, Mt as ConfirmationModal, O as Dot, dt as DownloadLink, zt as DropdownButtonWithAction, et as ErrorMessages, Q as Modal, H as PickDay, D as Popup, fe as RussianMobileFilter, ye as Search, Ee as SelectDateInterval, Ue as SelectSingle, qe as SmallBadge };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@boobooking/dashboard-ui-components",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Компоненты дашборда на Vue 3",
     "keywords": [
         "vue",