@boobooking/dashboard-ui-components 0.13.0 → 0.14.0

package/README.md

@@ -226,6 +226,18 @@ Chrome 114+, Firefox 125+. В браузерах старше меню видн
 События: `update:modelValue` и `changed` — при выборе элемента (повторный
 клик по уже выбранному снимает выбор) и при очистке через ластик.
 
+С клавиатуры: пока список открыт, стрелки вверх и вниз переводят фокус по
+пунктам и страницу не прокручивают. Отсчёт идёт от выбранного пункта: вниз —
+следующий за ним, вверх — предыдущий; без выбранного вниз — первый пункт,
+вверх — последний; с краёв — по кругу. Enter или пробел выбирают пункт под
+фокусом так же, как клик, Escape закрывает список. После закрытия фокус
+возвращается на кнопку фильтра. У закрытого списка стрелки прокручивают
+страницу.
+
+Подсветка пункта — это фокус, и мышь ведёт тот же фокус: движение по пункту
+ставит фокус на него, стрелки продолжают от пункта под курсором. Подсвечен
+всегда один пункт — тот, на который последними указали клавиатура или мышь.
+
 ### SmallBadge
 
 Бейдж-пилюля с коротким текстом. Текст не переносится.
@@ -316,19 +328,45 @@ ConfirmationModal нет v-model».
 ### DropdownButtonWithAction
 
 Кнопка с меню дополнительных действий: основная часть — слот `button`, стрелка
-справа открывает меню из слота `actions`. Без слота `actions` стрелки нет, и
+справа открывает меню из пунктов пропа `actions`. Без пунктов стрелки нет, и
 кнопка скругляется с обеих сторон.
 
-    <dropdown-button-with-action v-model="menuIsOpen">
+    <dropdown-button-with-action
+        v-model="menuIsOpen"
+        :actions="[
+            { label: 'Поменять пароль', href: route('user.password.edit', { user: row.getId() }) },
+            { label: 'Удалить', danger: true, onSelect: () => prepareUserDelete(row) },
+        ]"
+    >
         <template #button>…основное действие…</template>
-        <template #actions>…пункты меню…</template>
     </dropdown-button-with-action>
 
 | Проп | Тип | По умолчанию | Описание |
 | --- | --- | --- | --- |
+| `actions` | `Array` | `[]` | Пункты меню, см. ниже |
 | `modelValue` | `Boolean` | `false` | Открыто ли меню |
 | `lang` | `String` | язык плагина | `"ru"` или `"en"` |
 
+Пункт меню — объект одной из двух форм: переход (`href` без `onSelect`) или
+действие (`onSelect` без `href`). Поле со значением `undefined` считается
+отсутствующим.
+
+| Поле | Тип | Описание |
+| --- | --- | --- |
+| `label` | `String`, обязательно | Текст пункта |
+| `href` | `String` | Переход: обычный клик уходит в `navigate` плагина `dashboardUi`, клик с Cmd/Ctrl/Shift и средней кнопкой — браузеру; без `navigate` — обычная ссылка |
+| `onSelect` | `Function` | Действие: вызывается без аргументов при выборе пункта |
+| `danger` | `Boolean` | Опасный пункт — красный; по умолчанию `false` |
+
+Неверный список Vue отмечает предупреждением о пропе в режиме разработки,
+а компонент не падает: элементы-необъекты пропускает, кнопка без функции
+`onSelect` только закрывает меню. `null` — пустой список.
+
+Вид пунктов задаёт компонент: страница передаёт данные, а не разметку,
+и классов пунктам не даёт. Обычный пункт — серый текст, при подсветке —
+серый фон; опасный — красный фон, при подсветке темнее. Слота `actions`
+нет с версии 0.14.0 — см. «Обновление с 0.13».
+
 Событие: `update:modelValue` — только когда меню открыл или закрыл сам
 компонент или браузер: клик по стрелке, клик вне меню, Escape, клик
 по пункту меню, прокрутка, изменение размера окна. Значение, пришедшее
@@ -342,6 +380,14 @@ ConfirmationModal нет v-model».
 по любому пункту, прокруткой страницы или таблицы и изменением размера
 окна. Открытие другого меню закрывает предыдущее.
 
+Пока меню открыто, стрелки вверх и вниз переводят фокус по пунктам и
+страницу не прокручивают: вниз — на первый пункт, вверх — на последний,
+дальше — по соседним, с краёв — по кругу. Enter на пункте под фокусом
+выбирает его. Подсветка пункта — это фокус, и мышь ведёт тот же фокус:
+движение по пункту ставит фокус на него, стрелки продолжают от пункта под
+курсором. Подсвечен всегда один пункт — тот, на который последними указали
+клавиатура или мышь.
+
 ### DataTable
 
 Список данных: бейдж «Найдено X: N», таблица в карточке с горизонтальной
@@ -739,6 +785,41 @@ Tailwind, `@tailwindcss/forms` и типографикой, как у потре
 Правила номера телефона в `RussianMobileFilter` — российские; язык текстов
 задаётся, см. «Языки».
 
+## Обновление с 0.13
+
+- `DropdownButtonWithAction`: пункты меню передаются пропом `actions`,
+  слот `actions` убран, и страница больше не оформляет пункты — вид задаёт
+  компонент. Было:
+
+      <template v-slot:actions>
+          <Link
+              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              :href="route('user.password.edit', {'user': row.getId()})"
+          >
+              Поменять пароль
+          </Link>
+          <a
+              href="#"
+              @click.prevent="prepareUserDelete(row)"
+              class="block px-4 py-2 text-sm bg-red-400 hover:bg-red-500 text-white"
+              role="menuitem"
+          >
+              Удалить
+          </a>
+      </template>
+
+  Стало — проп на самом `dropdown-button-with-action`:
+
+      :actions="[
+          { label: 'Поменять пароль', href: route('user.password.edit', { user: row.getId() }) },
+          { label: 'Удалить', danger: true, onSelect: () => prepareUserDelete(row) },
+      ]"
+
+  Меню со старым слотом остаётся без пунктов и без стрелки; в режиме
+  разработки компонент пишет об этом в консоль.
+- `0.14.0` не подтянется по `^0.13.0`: для версий `0.x` знак `^` пропускает
+  только патчи. Обновление — `npm install @boobooking/dashboard-ui-components@^0.14.0`.
+
 ## Обновление с 0.12
 
 - Крестик `PageCard` больше не ходит по истории: подключите `currentUrl`