@boobooking/dashboard-ui-components 0.1.0

package/README.md

@@ -0,0 +1,196 @@
+# @boobooking/dashboard-ui-components
+
+Компоненты фильтров дашборда на Vue 3: телефон, поиск, выпадающий список,
+интервал дат.
+
+## Установка
+
+    npm install @boobooking/dashboard-ui-components
+
+```js
+import { RussianMobileFilter, SelectDateInterval } from '@boobooking/dashboard-ui-components'
+import '@boobooking/dashboard-ui-components/style.css'
+```
+
+Стили пакета подключаются **до** стилей приложения.
+
+## Требования
+
+Vue не ниже 3.2, ESM, сборщик, умеющий импорт CSS из пакета.
+
+Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в CSS приложения
+пакету не нужны.
+
+## Компоненты
+
+Пакет экспортирует семь компонентов: `Popup`, `Dot`, `PickDay`,
+`RussianMobileFilter`, `Search`, `SelectDateInterval`, `SelectSingle`. В
+архив пакета (`files: ["dist"]`) исходники не попадают, поэтому контракт
+каждого компонента — здесь и в playground, а не в исходном коде.
+
+### Popup
+
+Всплывающее меню с оверлеем, закрывающим по клику вне, и переходом на
+открытие/закрытие. `PickDay` и `SelectSingle` держат его внутри как обёртку
+над своим содержимым.
+
+    <popup v-model:is-open="isOpen" align="right">
+        …содержимое меню…
+    </popup>
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `isOpen` | `Boolean` | `false` | Открыто ли меню |
+| `align` | `String` | `"left"` | `"left"` или `"right"` — с какой стороны прижать меню |
+
+Событие: `update:isOpen` — при каждом открытии и закрытии, включая клик по
+оверлею.
+
+### Dot
+
+Индикатор-точка: красная или зелёная, с пульсацией или без.
+
+    <dot color="green" :add-pulse="isLive" />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `color` | `String` | обязателен | `"red"` или `"green"` |
+| `addPulse` | `Boolean` | `false` | Добавляет анимацию пульсации |
+
+Событий нет.
+
+### PickDay
+
+Поле выбора одной даты на Pikaday, с ластиком очистки.
+
+    <pick-day v-model="date" placeholder-text="от" />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | обязателен | Текущая дата |
+| `withEraser` | `Boolean` | `true` | Показывать ли ластик очистки |
+| `placeholderText` | `String` | `""` | Текст подсказки в пустом поле |
+
+События: `update:modelValue` — при выборе даты в календаре и при очистке
+(пустой строкой); `changed` — в тех же двух случаях, для использования наравне
+с остальными фильтрами.
+
+### RussianMobileFilter
+
+Поле ввода российского мобильного номера с маской `+7 (000) 000 00 00` и
+дебаунсом перед отправкой.
+
+    <russian-mobile-filter v-model="phone" header="Телефон" @changed="reload" />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | `""` | Номер: цифры вместе с кодом страны, без «+» (например, `79031234567`), либо пустая строка |
+| `header` | `String` | обязателен | Подпись поля |
+| `isRequired` | `Boolean` | `false` | Пометка обязательности в заголовке |
+| `isLoading` | `Boolean` | `false` | Индикатор загрузки в заголовке |
+
+«+» — неудачный символ для URL, поэтому в параметре только цифры; плюс к
+номеру дописывает бэкенд.
+
+События: `update:modelValue` — на каждое принятое маской изменение;
+`changed` — через 400 мс паузы после ввода, начиная с третьей цифры (раньше
+событие не летит вовсе), а также сразу — без дебаунса — при опустевшем поле,
+по клику на ластик, по Enter и по уходу фокуса. Дублей не бывает: компонент
+помнит последнее отправленное значение и не шлёт его повторно.
+
+### Search
+
+Текстовое поле поиска с ластиком очистки.
+
+    <search v-model="query" header="Поиск" @changed="reload" />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | `""` | Текущий текст поиска |
+| `header` | `String` | обязателен | Подпись поля |
+| `isRequired` | `Boolean` | `false` | Пометка обязательности в заголовке |
+| `isLoading` | `Boolean` | `false` | Индикатор загрузки в заголовке |
+
+События: `update:modelValue` и `changed` — оба на каждый ввод.
+
+### SelectDateInterval
+
+Пара `PickDay` под одним заголовком — интервал дат «от» и «до».
+
+    <select-date-interval
+        header="Период"
+        :date-from="dateFrom"
+        :date-to="dateTo"
+        @update:date-from="dateFrom = $event"
+        @update:date-to="dateTo = $event"
+        @changed="reload"
+    />
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `dateFrom` | `String` | обязателен | Начало интервала |
+| `dateTo` | `String` | обязателен | Конец интервала |
+| `header` | `String` | обязателен | Подпись поля |
+| `isRequired` | `Boolean` | `false` | Пометка обязательности в заголовке |
+| `isLoading` | `Boolean` | `false` | Индикатор загрузки в заголовке |
+
+`dateFrom` и `dateTo` обязательны без умолчания — потребитель должен
+передавать обе даты явно.
+
+События: `update:dateFrom`, `update:dateTo` — на каждый выбор в
+соответствующем `PickDay`; `changed` — когда новое значение отличается от
+переданного пропса (отдельно для каждой из двух дат).
+
+### SelectSingle
+
+    <select-single
+        header="Вендор"
+        :items="[{ id: 'a', name: 'Первый' }]"
+        v-model="vendor"
+        @changed="reload"
+    />
+
+`items` — массив объектов `{ id, name }`. `v-model` держит `id` выбранного или
+`null`, если не выбрано.
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `items` | `Array` | обязателен | Массив `{ id, name }` |
+| `modelValue` | `String \| Number` | `null` | `id` выбранного элемента или `null` |
+| `header` | `String` | обязателен | Подпись поля |
+| `isRequired` | `Boolean` | `false` | Пометка обязательности в заголовке |
+| `isLoading` | `Boolean` | `false` | Индикатор загрузки в заголовке |
+
+События: `update:modelValue` и `changed` — при выборе элемента (повторный
+клик по уже выбранному снимает выбор) и при очистке через ластик.
+
+## Playground
+
+    npm run playground
+
+Поднимает демо-страницы со всеми семью компонентами в двух окружениях:
+голом (без Tailwind и стилей приложения) и в окружении приложения (с
+Tailwind, `@tailwindcss/forms` и типографикой, как у потребителя). Это
+основной способ посмотреть, как компоненты выглядят и ведут себя, а не
+угадывать по исходникам или по этому README.
+
+## Что пакет берёт у приложения
+
+Базовую типографику — семейство шрифта, размер, `line-height`. Он наследует её
+намеренно, чтобы не навязывать свой шрифт дашборду с собственным. В приложении,
+которое типографику не задаёт, компоненты отрисуются браузерными умолчаниями:
+рабочими, но чужими на вид.
+
+Компоненты русскоязычные: названия месяцев, подписи и правила номера телефона
+зашиты.
+
+## Ограничение
+
+Пакет отдаёт скомпилированные утилиты Tailwind — те же имена классов, что
+генерирует Tailwind приложения. При стоковой палитре правила совпадают. Если
+приложение переопределит стоковый цвет, одноимённые правила столкнутся и
+победит подключённое позже, то есть компоненты возьмут палитру приложения.
+
+Ресет пакета распространяется и на содержимое слотов — разметку приложения
+внутри `Popup`. В приложении с preflight это ничего не меняет; без него
+содержимое слота получит `box-sizing` и снятые границы.

package/dist/index.js

@@ -0,0 +1,794 @@
+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, vModelText as m, vShow as h, withCtx as g, withDirectives as _, withKeys as v, withModifiers as y } from "vue";
+import ee from "pikaday";
+import b from "imask";
+//#region \0plugin-vue:export-helper
+var x = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, S = {
+	props: {
+		isOpen: {
+			type: Boolean,
+			default: !1
+		},
+		isTransparent: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:isOpen", "escaped"],
+	methods: {
+		closeOverlay() {
+			this.$emit("update:isOpen", !1), this.$emit("escaped");
+		},
+		handleEscape(e) {
+			this.isOpen && (e.key === "Esc" || e.key === "Escape") && this.closeOverlay();
+		}
+	},
+	mounted() {
+		document.addEventListener("keydown", this.handleEscape);
+	},
+	beforeUnmount() {
+		document.removeEventListener("keydown", this.handleEscape);
+	}
+};
+function C(e, t, n, r, a, o) {
+	return _((l(), i("button", {
+		tabindex: "-1",
+		onClick: t[0] ||= y((...e) => o.closeOverlay && o.closeOverlay(...e), ["prevent"]),
+		class: c(["fixed inset-0 w-full h-full cursor-default flex items-start", {
+			"z-20": n.isOpen,
+			"bg-transparent": n.isTransparent,
+			"bg-gray-900 opacity-75": !n.isTransparent
+		}])
+	}, null, 2)), [[h, n.isOpen]]);
+}
+//#endregion
+//#region src/components/Popup.vue
+var w = {
+	components: { Overlay: /* @__PURE__ */ x(S, [["render", C]]) },
+	inheritAttrs: !1,
+	emits: ["update:isOpen"],
+	props: {
+		isOpen: {
+			type: Boolean,
+			default: !1
+		},
+		align: {
+			type: String,
+			default: "left"
+		}
+	},
+	data() {
+		return { overlayIsOpen: this.isOpen };
+	},
+	watch: {
+		isOpen: function(e) {
+			this.overlayIsOpen = e;
+		},
+		overlayIsOpen(e) {
+			this.$emit("update:isOpen", e);
+		}
+	},
+	computed: {
+		alignLeft() {
+			return this.align === "left";
+		},
+		alignRight() {
+			return this.align === "right";
+		}
+	}
+}, T = { class: "bb-dashboard-ui relative" };
+function E(e, n, r, c, u, p) {
+	let m = f("overlay");
+	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, {
+		"enter-active-class": "transition ease-out duration-100",
+		"enter-from-class": "opacity-0 scale-95",
+		"enter-to-class": "opacity-100 scale-100",
+		"leave-active-class": "transition ease-in duration-75",
+		"leave-from-class": "opacity-100 scale-100",
+		"leave-to-class": "opacity-0 scale-95"
+	}, {
+		default: g(() => [_(a("div", s(e.$attrs, { class: ["absolute z-20", {
+			"left-0": p.alignLeft,
+			"right-0": p.alignRight
+		}] }), [d(e.$slots, "default")], 16), [[h, r.isOpen]])]),
+		_: 3
+	})]);
+}
+var D = /*#__PURE__*/ x(w, [["render", E]]), O = {
+	props: {
+		addPulse: {
+			type: Boolean,
+			default: !1
+		},
+		color: {
+			type: String,
+			required: !0,
+			validator: (e) => ["red", "green"].indexOf(e) !== -1
+		}
+	},
+	computed: {
+		isRed() {
+			return this.color === "red";
+		},
+		isGreen() {
+			return this.color === "green";
+		}
+	}
+};
+function te(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,
+		"animate-pulse": n.addPulse
+	}]) }, [...t[0] ||= [a("svg", {
+		class: "fill-current w-2 h-2",
+		viewBox: "0 0 120 120"
+	}, [a("circle", {
+		cx: "60",
+		cy: "60",
+		r: "45"
+	})], -1)]], 2);
+}
+var k = /*#__PURE__*/ x(O, [["render", te]]), A = {}, j = {
+	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", {
+		class: "w-6 h-6 stroke-current",
+		fill: "none",
+		viewBox: "0 0 24 24"
+	}, [a("path", {
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M6 18L18 6M6 6l12 12"
+	})], -1)]]);
+}
+var N = /*#__PURE__*/ x(A, [["render", M]]);
+//#endregion
+//#region src/date.js
+function P(e) {
+	return `${String(e.getDate()).padStart(2, "0")}.${String(e.getMonth() + 1).padStart(2, "0")}.${String(e.getFullYear()).padStart(4, "0")}`;
+}
+function F(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);
+	return a.setFullYear(i, r - 1, n), a.setHours(0, 0, 0, 0), a.getDate() !== n || a.getMonth() !== r - 1 || a.getFullYear() !== i ? null : a;
+}
+//#endregion
+//#region src/components/PickDay.vue
+var I = {
+	components: {
+		Popup: D,
+		Eraser: N
+	},
+	emits: ["update:modelValue", "changed"],
+	props: {
+		modelValue: {
+			type: String,
+			required: !0
+		},
+		withEraser: {
+			type: Boolean,
+			default: !0
+		},
+		placeholderText: {
+			type: String,
+			default: ""
+		}
+	},
+	created() {
+		this.picker = null;
+	},
+	mounted() {
+		this.picker = new ee({
+			field: this.$refs.field,
+			container: this.$refs.container,
+			keyboardInput: !1,
+			bound: !1,
+			firstDay: 1,
+			parse: (e) => F(e),
+			toString: (e) => P(e),
+			i18n: {
+				previousMonth: "Предыдущий месяц",
+				nextMonth: "Следующий месяц",
+				months: [
+					"Январь",
+					"Февраль",
+					"Март",
+					"Апрель",
+					"Май",
+					"Июнь",
+					"Июль",
+					"Август",
+					"Сентябрь",
+					"Октябрь",
+					"Ноябрь",
+					"Декабрь"
+				],
+				weekdays: [
+					"Воскресенье",
+					"Понедельник",
+					"Вторник",
+					"Среда",
+					"Четверг",
+					"Пятница",
+					"Суббота"
+				],
+				weekdaysShort: [
+					"Вс",
+					"Пн",
+					"Вт",
+					"Ср",
+					"Чт",
+					"Пт",
+					"Сб"
+				]
+			},
+			onSelect: (e) => {
+				this.popupIsOpen = !1, this.$emit("update:modelValue", P(e)), this.$emit("changed");
+			}
+		});
+	},
+	beforeUnmount() {
+		this.picker?.destroy();
+	},
+	data() {
+		return {
+			popupIsOpen: !1,
+			dayValue: this.modelValue
+		};
+	},
+	watch: { modelValue(e) {
+		this.dayValue = e, this.syncPicker(e);
+	} },
+	methods: {
+		syncPicker(e) {
+			let t = F(e);
+			if (t === null) {
+				this.picker.clear();
+				return;
+			}
+			this.picker.setDate(t, !0);
+		},
+		clearPicker() {
+			this.$emit("update:modelValue", ""), this.dayValue = "", this.picker.clear(), this.$emit("changed");
+		}
+	},
+	computed: {
+		hasValue() {
+			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 = [
+	"disabled",
+	"value",
+	"placeholder"
+], V = {
+	ref: "container",
+	class: "flex mt-1 bg-white border border-gray-200 rounded-md shadow-lg"
+};
+function H(e, t, s, u, d, p) {
+	let m = f("eraser"), h = f("popup");
+	return l(), i("div", L, [a("div", R, [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", {
+		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, {
+		key: 0,
+		onClick: p.clearPicker,
+		class: "z-10 h-full pr-2"
+	}, null, 8, ["onClick"])) : r("", !0)]), o(h, {
+		"is-open": d.popupIsOpen,
+		"onUpdate:isOpen": t[1] ||= (e) => d.popupIsOpen = e
+	}, {
+		default: g(() => [a("div", V, null, 512)]),
+		_: 1
+	}, 8, ["is-open"])]);
+}
+var U = /*#__PURE__*/ x(I, [["render", H]]), W = {
+	components: { Dot: k },
+	props: {
+		text: {
+			type: String,
+			required: !0
+		},
+		isRequired: {
+			type: Boolean,
+			default: !1
+		},
+		isLoading: {
+			type: Boolean,
+			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) {
+	let u = f("dot");
+	return l(), i("div", G, [
+		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),
+		_(o(u, {
+			color: "red",
+			"add-pulse": !0,
+			class: "ml-3"
+		}, null, 512), [[h, n.isLoading]]),
+		_(o(u, {
+			color: "red",
+			class: "ml-3"
+		}, null, 512), [[h, n.isRequired]])
+	]);
+}
+var J = /*#__PURE__*/ x(W, [["render", q]]), Y = 10;
+function X(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);
+}
+function Z(e) {
+	return e === "" ? "" : `7${e}`;
+}
+function Q(e) {
+	let t = e.startsWith("+") ? e.slice(1) : e;
+	return t.startsWith("7") ? t.slice(1) : t;
+}
+//#endregion
+//#region src/components/RussianMobileFilter.vue
+var ne = 400, re = 3, ie = {
+	components: {
+		ElementHeader: J,
+		Eraser: N
+	},
+	emits: ["update:modelValue", "changed"],
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		header: {
+			type: String,
+			required: !0
+		},
+		isRequired: {
+			type: Boolean,
+			default: !1
+		},
+		isLoading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	data() {
+		return { digits: Q(this.modelValue) };
+	},
+	created() {
+		this.mask = null, this.debounceTimer = null, this.isWritingProgrammatically = !1, this.lastCommitted = Q(this.modelValue);
+	},
+	mounted() {
+		this.mask = b(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.syncFromModelValue(this.modelValue);
+	},
+	beforeUnmount() {
+		clearTimeout(this.debounceTimer), this.mask?.destroy();
+	},
+	watch: { modelValue(e) {
+		e !== Z(this.digits) && this.syncFromModelValue(e);
+	} },
+	methods: {
+		syncFromModelValue(e) {
+			this.writeToMask(Q(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));
+		},
+		writeToMask(e) {
+			if (this.isWritingProgrammatically = !0, e === "") this.mask.value = "";
+			else {
+				let t = this.mask.masked.lazy;
+				this.mask.updateOptions({ lazy: !1 }), this.mask.unmaskedValue = e, this.mask.updateOptions({ lazy: t });
+			}
+			this.isWritingProgrammatically = !1;
+		},
+		setLazy(e) {
+			this.isWritingProgrammatically = !0, this.mask.updateOptions({ lazy: e }), this.isWritingProgrammatically = !1;
+		},
+		onFocus() {
+			this.setLazy(!1), this.$nextTick(() => {
+				let e = this.$refs.input.value.indexOf("_");
+				e !== -1 && this.$refs.input.setSelectionRange(e, e);
+			});
+		},
+		onBlur() {
+			this.setLazy(!0), this.digits === "" && this.writeToMask(""), this.commit();
+		},
+		onPaste(e) {
+			this.applyUserDigits(X(e.clipboardData?.getData("text") ?? "")), this.scheduleCommit();
+		},
+		clear() {
+			this.applyUserDigits(""), this.commit();
+		},
+		scheduleCommit() {
+			if (clearTimeout(this.debounceTimer), this.digits.length === 0) {
+				this.commit();
+				return;
+			}
+			this.digits.length < re || (this.debounceTimer = setTimeout(() => this.commit(), ne));
+		},
+		commit() {
+			clearTimeout(this.debounceTimer), this.digits !== this.lastCommitted && (this.lastCommitted = this.digits, this.$emit("changed"));
+		}
+	}
+}, ae = { class: "bb-dashboard-ui flex flex-none" }, oe = { class: "flex w-full flex-col border border-white bg-white" }, se = { class: "relative flex h-full w-full" }, ce = { class: "flex w-full h-full items-center justify-center" };
+function le(e, t, n, r, s, c) {
+	let u = f("element-header"), d = f("eraser");
+	return l(), i("div", ae, [a("div", oe, [o(u, {
+		text: n.header,
+		"is-required": n.isRequired,
+		"is-loading": n.isLoading
+	}, null, 8, [
+		"text",
+		"is-required",
+		"is-loading"
+	]), a("div", se, [a("label", ce, [a("input", {
+		ref: "input",
+		type: "tel",
+		inputmode: "tel",
+		autocomplete: "off",
+		class: "flex w-phone h-full px-3 py-2 cursor-pointer truncate hover:bg-blue-100 focus:bg-white focus:outline-hidden border-none",
+		onFocus: t[0] ||= (...e) => c.onFocus && c.onFocus(...e),
+		onBlur: t[1] ||= (...e) => c.onBlur && c.onBlur(...e),
+		onKeydown: t[2] ||= v((...e) => c.commit && c.commit(...e), ["enter"]),
+		onPaste: t[3] ||= y((...e) => c.onPaste && c.onPaste(...e), ["prevent"])
+	}, null, 544), _(o(d, {
+		onMousedown: t[4] ||= y(() => {}, ["prevent"]),
+		onClick: c.clear,
+		class: "pr-2 h-full"
+	}, null, 8, ["onClick"]), [[h, s.digits.length > 0]])])])])]);
+}
+var ue = /*#__PURE__*/ x(ie, [["render", le]]), de = {
+	components: {
+		ElementHeader: J,
+		Eraser: N
+	},
+	emits: ["update:modelValue", "changed"],
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		header: {
+			type: String,
+			required: !0
+		},
+		isRequired: {
+			type: Boolean,
+			default: !1
+		},
+		isLoading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	data() {
+		return { search: this.modelValue };
+	},
+	computed: { inputNeedsEraser() {
+		return this.search.length > 0;
+	} },
+	watch: {},
+	methods: {
+		clearInput() {
+			this.search = "", this.startSearch();
+		},
+		startSearch() {
+			this.$emit("update:modelValue", this.search), this.$emit("changed");
+		}
+	}
+}, fe = { class: "bb-dashboard-ui flex flex-none" }, pe = { class: "flex w-full flex-col border border-white bg-white" }, me = { class: "relative flex h-full w-full" }, he = { class: "flex w-full h-full items-center justify-center" };
+function ge(e, t, n, r, s, c) {
+	let u = f("element-header"), d = f("eraser");
+	return l(), i("div", fe, [a("div", pe, [o(u, {
+		text: n.header,
+		"is-required": n.isRequired,
+		"is-loading": n.isLoading
+	}, null, 8, [
+		"text",
+		"is-required",
+		"is-loading"
+	]), a("div", me, [a("label", he, [_(a("input", {
+		class: "flex w-full h-full px-3 py-2 cursor-pointer truncate hover:bg-blue-100 focus:bg-white focus:outline-hidden border-none",
+		"onUpdate:modelValue": t[0] ||= (e) => s.search = e,
+		onInput: t[1] ||= (...e) => c.startSearch && c.startSearch(...e)
+	}, null, 544), [[
+		m,
+		s.search,
+		void 0,
+		{ trim: !0 }
+	]]), _(o(d, {
+		onClick: c.clearInput,
+		class: "pr-2 h-full"
+	}, null, 8, ["onClick"]), [[h, c.inputNeedsEraser]])])])])]);
+}
+var _e = /*#__PURE__*/ x(de, [["render", ge]]), ve = {
+	components: {
+		ElementHeader: J,
+		PickDay: U
+	},
+	emits: [
+		"update:dateFrom",
+		"update:dateTo",
+		"changed"
+	],
+	props: {
+		dateFrom: {
+			type: String,
+			required: !0
+		},
+		dateTo: {
+			type: String,
+			required: !0
+		},
+		header: {
+			type: String,
+			required: !0
+		},
+		isRequired: {
+			type: Boolean,
+			default: !1
+		},
+		isLoading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	data() {
+		return {
+			userDateFrom: this.dateFrom,
+			userDateTo: this.dateTo
+		};
+	},
+	watch: {
+		dateFrom(e) {
+			this.userDateFrom = e;
+		},
+		dateTo(e) {
+			this.userDateTo = e;
+		},
+		userDateFrom(e) {
+			this.$emit("update:dateFrom", e), this.dateFrom !== e && this.$emit("changed");
+		},
+		userDateTo(e) {
+			this.$emit("update:dateTo", e), this.dateTo !== e && this.$emit("changed");
+		}
+	}
+}, ye = { class: "bb-dashboard-ui flex" }, be = { class: "flex border border-white" }, xe = { class: "flex flex-col min-w-72 w-72 bg-white h-full" }, Se = { class: "flex h-full divide-x divide-gray-200" };
+function Ce(e, t, n, r, s, c) {
+	let u = f("element-header"), d = f("pick-day");
+	return l(), i("div", ye, [a("div", be, [a("div", xe, [o(u, {
+		text: n.header,
+		"is-required": n.isRequired,
+		"is-loading": n.isLoading
+	}, null, 8, [
+		"text",
+		"is-required",
+		"is-loading"
+	]), a("div", Se, [o(d, {
+		modelValue: s.userDateFrom,
+		"onUpdate:modelValue": t[0] ||= (e) => s.userDateFrom = e,
+		class: "flex-1 min-w-36 pl-3",
+		"placeholder-text": "от"
+	}, null, 8, ["modelValue"]), o(d, {
+		modelValue: s.userDateTo,
+		"onUpdate:modelValue": t[1] ||= (e) => s.userDateTo = e,
+		class: "flex-1 min-w-36 pl-3",
+		"placeholder-text": "до"
+	}, null, 8, ["modelValue"])])])])]);
+}
+var we = /*#__PURE__*/ x(ve, [["render", Ce]]), Te = {
+	components: {
+		Popup: D,
+		Eraser: N
+	},
+	emits: ["update:isOpen", "erased"],
+	props: {
+		isOpen: {
+			type: Boolean,
+			default: !1
+		},
+		title: {
+			type: String,
+			default: null
+		},
+		hasValue: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	data() {
+		return { popupIsOpen: this.isOpen };
+	},
+	watch: {
+		isOpen(e) {
+			this.popupIsOpen = e;
+		},
+		popupIsOpen(e) {
+			this.$emit("update:isOpen", e);
+		}
+	},
+	computed: { needsEraser() {
+		return !this.isOpen && this.hasValue;
+	} }
+}, Ee = { class: "flex flex-col grow bg-white" }, De = { class: "relative flex w-full h-full" }, $ = ["textContent"];
+function Oe(e, t, s, u, m, h) {
+	let _ = f("eraser"), v = f("popup");
+	return l(), i("div", Ee, [a("div", De, [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] ||= y((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, $)], 2), h.needsEraser ? (l(), n(_, {
+		key: 0,
+		onClick: t[1] ||= (t) => e.$emit("erased"),
+		class: "pr-2 h-full"
+	})) : r("", !0)]), o(v, {
+		"is-open": m.popupIsOpen,
+		"onUpdate:isOpen": t[2] ||= (e) => m.popupIsOpen = e
+	}, {
+		default: g(() => [d(e.$slots, "default")]),
+		_: 3
+	}, 8, ["is-open"])]);
+}
+var ke = /*#__PURE__*/ x(Te, [["render", Oe]]), Ae = {
+	props: {
+		isChecked: {
+			type: Boolean,
+			default: !1
+		},
+		name: { type: String }
+	},
+	emits: ["clicked"],
+	methods: { toggle() {
+		this.$emit("clicked");
+	} }
+}, je = { class: "flex w-9 h-9 items-center justify-center" }, Me = {
+	class: "w-5 h-5 fill-current text-green-300",
+	viewBox: "0 0 20 20"
+}, Ne = ["textContent"];
+function Pe(e, t, n, r, o, s) {
+	return l(), i("button", {
+		type: "button",
+		onClick: t[0] ||= y((...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", je, [_((l(), i("svg", Me, [...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)), [[h, n.isChecked]])]), a("span", {
+		class: "flex h-9 justify-center items-center pr-6 whitespace-nowrap select-none",
+		textContent: p(n.name)
+	}, null, 8, Ne)]);
+}
+//#endregion
+//#region src/components/SelectSingle.vue
+var Fe = {
+	components: {
+		ElementHeader: J,
+		DropdownButton: ke,
+		ListElement: /* @__PURE__ */ x(Ae, [["render", Pe]])
+	},
+	emits: ["update:modelValue", "changed"],
+	props: {
+		items: {
+			type: Array,
+			required: !0
+		},
+		modelValue: {
+			type: [String, Number],
+			default: null
+		},
+		header: {
+			type: String,
+			required: !0
+		},
+		isRequired: {
+			type: Boolean,
+			default: !1
+		},
+		isLoading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	data() {
+		return { isOpen: !1 };
+	},
+	computed: {
+		activeItem() {
+			return this.items.find((e) => e.id === this.modelValue) ?? null;
+		},
+		activeItemName() {
+			return this.activeItem === null ? null : this.activeItem.name;
+		},
+		hasItems() {
+			return this.items.length > 0;
+		},
+		hasValue() {
+			return this.activeItem !== null;
+		}
+	},
+	methods: {
+		itemClicked(e) {
+			this.isOpen = !1, this.$emit("update:modelValue", e.id === this.modelValue ? null : e.id), this.$emit("changed");
+		},
+		clear() {
+			this.$emit("update:modelValue", null), this.$emit("changed");
+		}
+	}
+}, Ie = { class: "bb-dashboard-ui flex flex-none" }, Le = { class: "flex w-full flex-col border border-white bg-white" }, Re = { 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 ze(t, s, c, d, p, m) {
+	let h = f("element-header"), _ = f("list-element"), v = f("dropdown-button");
+	return l(), i("div", Ie, [a("div", Le, [o(h, {
+		text: c.header,
+		"is-required": c.isRequired,
+		"is-loading": c.isLoading
+	}, null, 8, [
+		"text",
+		"is-required",
+		"is-loading"
+	]), m.hasItems ? (l(), n(v, {
+		key: 0,
+		title: m.activeItemName,
+		"is-open": p.isOpen,
+		"onUpdate:isOpen": s[0] ||= (e) => p.isOpen = e,
+		"has-value": m.hasValue,
+		onErased: m.clear
+	}, {
+		default: g(() => [a("div", Re, [(l(!0), i(e, null, u(c.items, (e) => (l(), n(_, {
+			name: e.name,
+			key: e.id,
+			"is-checked": e.id === c.modelValue,
+			onClicked: (t) => m.itemClicked(e)
+		}, null, 8, [
+			"name",
+			"is-checked",
+			"onClicked"
+		]))), 128))])]),
+		_: 1
+	}, 8, [
+		"title",
+		"is-open",
+		"has-value",
+		"onErased"
+	])) : r("", !0)])]);
+}
+var Be = /*#__PURE__*/ x(Fe, [["render", ze]]);
+//#endregion
+export { k as Dot, U as PickDay, D as Popup, ue as RussianMobileFilter, _e as Search, we as SelectDateInterval, Be as SelectSingle };

package/dist/style.css

@@ -0,0 +1,2 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--color-red-500:oklch(63.7% .237 25.331);--color-green-300:oklch(87.1% .15 154.449);--color-green-500:oklch(72.3% .219 149.579);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-500:oklch(62.3% .214 259.815);--color-indigo-100:oklch(93% .034 272.788);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--leading-tight:1.25;--radius-md:.375rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--container-phone:calc(19ch + 16px)}}@layer base;@layer components{.bb-dashboard-ui,.bb-dashboard-ui *,.bb-dashboard-ui :before,.bb-dashboard-ui :after{box-sizing:border-box;border:0 solid;margin:0;padding:0}.bb-dashboard-ui button,.bb-dashboard-ui input{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.bb-dashboard-ui button{appearance:button}.bb-dashboard-ui input{appearance:none}.bb-dashboard-ui input:focus{box-shadow:none}.bb-dashboard-ui ::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){.bb-dashboard-ui ::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}.bb-dashboard-ui ::placeholder{opacity:1}}@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mt-1{margin-top:var(--spacing)}.ml-3{margin-left:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.h-2{height:calc(var(--spacing) * 2)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-9{height:calc(var(--spacing) * 9)}.h-full{height:100%}.w-2{width:calc(var(--spacing) * 2)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-9{width:calc(var(--spacing) * 9)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.w-phone{width:var(--container-phone)}.min-w-24{min-width:calc(var(--spacing) * 24)}.min-w-36{min-width:calc(var(--spacing) * 36)}.min-w-72{min-width:calc(var(--spacing) * 72)}.flex-1{flex:1}.flex-none{flex:none}.grow{flex-grow:1}.origin-top-right{transform-origin:100% 0}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-dashed>:not(:last-child)){--tw-border-style:dashed;border-style:dashed}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-gray-200{border-color:var(--color-gray-200)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.fill-current{fill:currentColor}.stroke-current{stroke:currentColor}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pl-3{padding-left:calc(var(--spacing) * 3)}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.whitespace-nowrap{white-space:nowrap}.text-gray-300{color:var(--color-gray-300)}.text-gray-500{color:var(--color-gray-500)}.text-green-300{color:var(--color-green-300)}.text-green-500{color:var(--color-green-500)}.text-red-500{color:var(--color-red-500)}.placeholder-gray-300::placeholder{color:var(--color-gray-300)}.opacity-0{opacity:0}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-75{--tw-duration:75ms;transition-duration:75ms}.duration-100{--tw-duration:.1s;transition-duration:.1s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-sm::placeholder{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}@media (hover:hover){.hover\:bg-blue-100:hover{background-color:var(--color-blue-100)}.hover\:bg-indigo-100:hover{background-color:var(--color-indigo-100)}.hover\:text-gray-400:hover{color:var(--color-gray-400)}}.focus\:z-10:focus{z-index:10}.focus\:bg-white:focus{background-color:var(--color-white)}.focus\:ring-3:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-500\/50:focus{--tw-ring-color:#3080ff80}@supports (color:color-mix(in lab, red, red)){.focus\:ring-blue-500\/50:focus{--tw-ring-color:color-mix(in oklab, var(--color-blue-500) 50%, transparent)}}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}.pika-single{z-index:9999;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;display:block;position:relative}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{text-align:center;position:relative}.pika-label{z-index:9999;background-color:#fff;margin:0;padding:5px 3px;font-size:14px;font-weight:700;line-height:20px;display:inline-block;position:relative;overflow:hidden}.pika-title select{cursor:pointer;z-index:9998;opacity:0;margin:0;position:absolute;top:5px;left:0}.pika-prev,.pika-next{cursor:pointer;text-indent:20px;white-space:nowrap;opacity:.5;background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:75% 75%;border:0;outline:none;width:20px;height:30px;padding:0;display:block;position:relative;overflow:hidden}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pika-select{display:inline-block}.pika-table{border-collapse:collapse;border-spacing:0;border:0;width:100%}.pika-table th,.pika-table td{width:14.2857%;padding:0}.pika-table th{color:#999;text-align:center;font-size:12px;font-weight:700;line-height:25px}.pika-button{cursor:pointer;box-sizing:border-box;color:#666;text-align:right;width:100%;height:initial;background:#f5f5f5;border:0;outline:none;margin:0;padding:5px;font-size:12px;line-height:15px;display:block}.pika-week{color:#999;font-size:11px}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;background:#3af;border-radius:3px;font-weight:700;box-shadow:inset 0 1px 3px #178fe5}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#d5e9f7}.is-startrange .pika-button{color:#fff;box-shadow:none;background:#6cb31d;border-radius:3px}.is-endrange .pika-button{color:#fff;box-shadow:none;background:#3af;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;box-shadow:none;background:#ff8000;border-radius:3px}.pika-table abbr{cursor:help;border-bottom:none}
+/*$vite$:1*/

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@boobooking/dashboard-ui-components",
+    "version": "0.1.0",
+    "description": "Компоненты фильтров дашборда на Vue 3",
+    "keywords": [
+        "vue",
+        "vue3",
+        "components",
+        "dashboard",
+        "filters",
+        "tailwind"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/boobooking/dashboard-ui-components.git"
+    },
+    "type": "module",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": "./dist/index.js",
+        "./style.css": "./dist/style.css",
+        "./package.json": "./package.json"
+    },
+    "scripts": {
+        "build": "vite build",
+        "test": "vitest run --passWithNoTests",
+        "playground": "npm run build && vite --config vite.playground.config.js"
+    },
+    "peerDependencies": {
+        "vue": "^3.2"
+    },
+    "dependencies": {
+        "imask": "^7.6.1",
+        "pikaday": "^1.8.2"
+    },
+    "devDependencies": {
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/vite": "^4.3.3",
+        "@vitejs/plugin-vue": "^6.0.8",
+        "tailwindcss": "^4.3.3",
+        "vite": "^8.3.0",
+        "vitest": "^5.0.0",
+        "vue": "^3.5.35"
+    }
+}