@boobooking/dashboard-ui-components 0.1.0 → 1.0.0

package/README.md

@@ -14,6 +14,9 @@ import '@boobooking/dashboard-ui-components/style.css'
 
 Стили пакета подключаются **до** стилей приложения.
 
+Пример использует только экспорты, доступные в этой версии, — полным списком он
+не является и обновляется вместе с составом экспортов.
+
 ## Требования
 
 Vue не ниже 3.2, ESM, сборщик, умеющий импорт CSS из пакета.
@@ -21,127 +24,7 @@ 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
+## SelectSingle
 
     <select-single
         header="Вендор"
@@ -151,28 +34,8 @@ Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в C
     />
 
 `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.
+`null`, если не выбрано. Событие `changed` приходит на каждое изменение выбора,
+включая очистку.
 
 ## Что пакет берёт у приложения
 

package/dist/index.js

@@ -171,9 +171,9 @@ var I = {
 		Popup: D,
 		Eraser: N
 	},
-	emits: ["update:modelValue", "changed"],
+	emits: ["update:day"],
 	props: {
-		modelValue: {
+		day: {
 			type: String,
 			required: !0
 		},
@@ -235,7 +235,7 @@ var I = {
 				]
 			},
 			onSelect: (e) => {
-				this.popupIsOpen = !1, this.$emit("update:modelValue", P(e)), this.$emit("changed");
+				this.popupIsOpen = !1, this.$emit("update:day", P(e));
 			}
 		});
 	},
@@ -245,10 +245,10 @@ var I = {
 	data() {
 		return {
 			popupIsOpen: !1,
-			dayValue: this.modelValue
+			dayValue: this.day
 		};
 	},
-	watch: { modelValue(e) {
+	watch: { day(e) {
 		this.dayValue = e, this.syncPicker(e);
 	} },
 	methods: {
@@ -261,12 +261,12 @@ var I = {
 			this.picker.setDate(t, !0);
 		},
 		clearPicker() {
-			this.$emit("update:modelValue", ""), this.dayValue = "", this.picker.clear(), this.$emit("changed");
+			this.$emit("update:day", ""), this.dayValue = "", this.picker.clear();
 		}
 	},
 	computed: {
 		hasValue() {
-			return this.modelValue.length > 0;
+			return this.day.length > 0;
 		},
 		needsEraser() {
 			return !this.withEraser || this.popupIsOpen ? !1 : this.hasValue;
@@ -368,11 +368,7 @@ var ne = 400, re = 3, ie = {
 		},
 		header: {
 			type: String,
-			required: !0
-		},
-		isRequired: {
-			type: Boolean,
-			default: !1
+			default: "Телефон"
 		},
 		isLoading: {
 			type: Boolean,
@@ -449,13 +445,8 @@ 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", {
+	}, null, 8, ["text", "is-loading"]), a("div", se, [a("label", ce, [a("input", {
 		ref: "input",
 		type: "tel",
 		inputmode: "tel",
@@ -484,7 +475,7 @@ var ue = /*#__PURE__*/ x(ie, [["render", le]]), de = {
 		},
 		header: {
 			type: String,
-			required: !0
+			default: ""
 		},
 		isRequired: {
 			type: Boolean,
@@ -543,15 +534,17 @@ var _e = /*#__PURE__*/ x(de, [["render", ge]]), ve = {
 	emits: [
 		"update:dateFrom",
 		"update:dateTo",
-		"changed"
+		"updated"
 	],
 	props: {
 		dateFrom: {
 			type: String,
+			default: "",
 			required: !0
 		},
 		dateTo: {
 			type: String,
+			default: "",
 			required: !0
 		},
 		header: {
@@ -581,10 +574,10 @@ var _e = /*#__PURE__*/ x(de, [["render", ge]]), ve = {
 			this.userDateTo = e;
 		},
 		userDateFrom(e) {
-			this.$emit("update:dateFrom", e), this.dateFrom !== e && this.$emit("changed");
+			this.$emit("update:dateFrom", e), this.dateFrom !== e && this.$emit("updated");
 		},
 		userDateTo(e) {
-			this.$emit("update:dateTo", e), this.dateTo !== e && this.$emit("changed");
+			this.$emit("update:dateTo", e), this.dateTo !== e && this.$emit("updated");
 		}
 	}
 }, 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" };
@@ -599,16 +592,16 @@ function Ce(e, t, n, r, s, c) {
 		"is-required",
 		"is-loading"
 	]), a("div", Se, [o(d, {
-		modelValue: s.userDateFrom,
-		"onUpdate:modelValue": t[0] ||= (e) => s.userDateFrom = e,
+		day: s.userDateFrom,
+		"onUpdate:day": 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,
+	}, null, 8, ["day"]), o(d, {
+		day: s.userDateTo,
+		"onUpdate:day": t[1] ||= (e) => s.userDateTo = e,
 		class: "flex-1 min-w-36 pl-3",
 		"placeholder-text": "до"
-	}, null, 8, ["modelValue"])])])])]);
+	}, null, 8, ["day"])])])])]);
 }
 var we = /*#__PURE__*/ x(ve, [["render", Ce]]), Te = {
 	components: {

package/package.json

@@ -1,15 +1,7 @@
 {
     "name": "@boobooking/dashboard-ui-components",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "description": "Компоненты фильтров дашборда на Vue 3",
-    "keywords": [
-        "vue",
-        "vue3",
-        "components",
-        "dashboard",
-        "filters",
-        "tailwind"
-    ],
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -21,8 +13,7 @@
     ],
     "exports": {
         ".": "./dist/index.js",
-        "./style.css": "./dist/style.css",
-        "./package.json": "./package.json"
+        "./style.css": "./dist/style.css"
     },
     "scripts": {
         "build": "vite build",