@e280/quay/x/dom/components/sort/component.js

File-browser and outliner UI for the web

import { html, css } from "lit";
import { shadowElement, useHost, useStyles } from "@e280/sly";
import themeCss from "../../theme.css.js";
import { findLocalGroup } from "../../utils/find-local-group.js";
export const QuaySort = shadowElement(() => {
    const host = useHost();
    const group = findLocalGroup(host);
    useStyles(themeCss, css `
		sl-button sl-icon {
			font-size: var(--font-size-sm);
		}

		sl-menu {
			margin-top: var(--space-xs);

			.item {
				display: flex;
				align-items: center;
				gap: var(--space-sm);
			}
		}
	`);
    const onSelectSort = (e) => {
        const value = e.detail.item.value;
        group.selectedSort(value);
    };
    return html `
		<div class="panel">
			<sl-dropdown>
				<sl-button size="small" slot="trigger" caret>
					<sl-icon name="sort-down-alt"></sl-icon>
				</sl-button>
			<sl-menu @sl-select=${onSelectSort}>
				${[...group.config.sorts?.keys()].map(sort => html `
					<sl-menu-item value=${sort}>
						<div class=item>
							<sl-icon name="check" slot="prefix" style="visibility: ${sort === group.selectedSort() ? 'visible' : 'hidden'}"></sl-icon>
							<span>${sort}</span>
						</div>
					</sl-menu-item>
				`)}
			</sl-menu>
			</sl-dropdown>
		</div>`;
});
//# sourceMappingURL=component.js.map