Выбор профиля

<sf-profile-picker> — один способ работать с профилями: профилями меню, видами записи и всем, у чего есть профили. В свёрнутом виде это кнопка, похожая на поле: «Профиль: Обычный». В открытой панели всё делается на месте.

Пример

<div class="flex flex-col gap-2 items-start">
  <sf-profile-picker id="profile-picker-demo" label="Профиль" resettable></sf-profile-picker>
  <output class="text-1/2 color-on-surface-variant" id="profile-picker-log" aria-live="polite"></output>
</div>

// The page plays the host: it keeps the profiles and answers every request
// with a new list, as a site would after saving.
const initializeProfilePicker = async () => {
  const picker = document.querySelector('#profile-picker-demo');
  const log = document.querySelector('#profile-picker-log');
  if (!picker || picker.dataset.exampleReady === 'true') return;
  picker.dataset.exampleReady = 'true';
  await customElements.whenDefined('sf-profile-picker');
  let profiles = [
    {id: 'regular', label: 'Обычный', shared: true, builtin: true},
    {id: 'editors', label: 'Редакторы', shared: true},
    {id: 'mine', label: 'Мой', shared: false},
  ];
  let next = 1;
  const answer = (current, note) => {
    picker.profiles = profiles;
    picker.rights = {create: {personal: !profiles.some((p) => !p.shared), shared: true}};
    if (current) picker.setAttribute('current', current);
    log.textContent = note;
  };
  answer('regular', '');

  picker.addEventListener('sf-profile-select', ({detail}) => answer(detail.id, `Выбран профиль ${detail.id}`));
  picker.addEventListener('sf-profile-create', ({detail}) => {
    const id = `profile-${next++}`;
    profiles = [...profiles, {id, label: detail.label, shared: detail.shared}];
    answer(id, `Создан профиль «${detail.label}» — копия ${detail.from}`);
  });
  picker.addEventListener('sf-profile-rename', ({detail}) => {
    profiles = profiles.map((p) => (p.id === detail.id ? {...p, label: detail.label} : p));
    answer(null, `Профиль переименован в «${detail.label}»`);
  });
  picker.addEventListener('sf-profile-delete', ({detail}) => {
    profiles = profiles.filter((p) => p.id !== detail.id);
    answer('regular', 'Профиль удалён');
  });
  picker.addEventListener('sf-profile-reset', ({detail}) => answer(detail.id, 'Профиль сброшен к стандартному'));
};
initializeProfilePicker();

Применение

Что в панели

• Строка на каждый профиль: значок (человек — личный, группа — общий), название и подпись «Личный» или «Для всех». Текущий отмечен галочкой.
• «Переименовать» и «Удалить» в самой строке; удаление переспрашивает прямо в строке. У профиля без прав стоит замок, у стандартного этих действий нет.
• «Новый профиль…» открывает форму в списке: название и «Личный / Для всех». Новый профиль — копия текущего.
• «Сбросить к стандартному» внизу, если задан resettable.

Профили и права принадлежат сайту

Компонент не меняет свой список сам. Он сообщает, что попросил человек, а сайт отвечает новым списком profiles и атрибутом current или текстом отказа в message.

const picker = document.querySelector('sf-profile-picker');
picker.profiles = [
  {id: 'regular', label: 'Обычный', shared: true, builtin: true},
  {id: 'editors', label: 'Редакторы', shared: true},
  {id: 'mine', label: 'Мой', shared: false},
];
picker.rights = {create: {personal: false, shared: true}};
picker.setAttribute('current', 'regular');
picker.addEventListener('sf-profile-select', (event) => openProfile(event.detail.id));

• profiles — список {id, label, shared, builtin, editable}. editable: false — профиль можно выбрать, но нельзя менять; builtin — стандартный профиль, его не переименовывают и не удаляют.
• rights.create — {personal, shared}: какие профили человек может создать. Личный профиль у человека один: если он уже есть, сайт передаёт personal: false.
• size — 1/2 (по умолчанию) или 1.

Им пользуются меню администратора и представление свойств Larena.

Доступность

• Стрелки, Home и End ходят по строкам, Enter выбирает, F2 переименовывает, Delete удаляет.
• Escape закрывает форму, а затем панель.
• Подписи по умолчанию — на языке страницы.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• label — string, по умолчанию пусто. Как здесь называется профиль («Профиль», «Вид»); без значения — «Профиль» на языке страницы.
• size — string, по умолчанию 1/2, значения: 1/2, 1.
• current — string, по умолчанию пусто. Идентификатор текущего профиля.
• resettable — boolean, по умолчанию false. Показывает внизу «Сбросить к стандартному».
• message — string, по умолчанию пусто. Почему хост отказал в последнем действии; показывается в панели.
• disabled — boolean, по умолчанию false.
• root-class — string, по умолчанию пусто.
• template — string, по умолчанию default.

Методы

Публичных методов нет.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

• sf-profile-select — detail: { id: string }. Человек выбрал профиль.
• sf-profile-create — detail: { label: string, shared: boolean, from?: string }. Человек попросил новый профиль — копию текущего.
• sf-profile-rename — detail: { id: string, label: string }. Человек переименовал профиль.
• sf-profile-delete — detail: { id: string }. Человек подтвердил удаление профиля.
• sf-profile-reset — detail: { id: string }. Человек попросил вернуть текущему профилю стандартный вид.

Доступность

• Роль: меню (menu).
• Доступное имя: рекомендуется.
• Клавиши: ArrowUp, ArrowDown, Home, End, Enter, Space, F2, Delete, Escape.
• Фокус: Кнопка открытия — с aria-haspopup=menu; строки панели — menuitemradio, текущая отмечена. Стрелки, Home и End ходят по строкам, Enter выбирает, F2 переименовывает, Delete спрашивает об удалении, Escape закрывает форму, а затем панель и возвращает фокус на кнопку.

Минимальная разметка

<sf-profile-picker label="Профиль" current="regular" resettable></sf-profile-picker>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/profile-picker
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-profile-picker

См. также

• Представление свойств
• Меню администратора