79c01ca473
* web: update to ESLint 9 ESLint 9 has been out for awhile now, and all of the plug-ins that we use have caught up, so it is time to bite the bullet and upgrade. This commit: - upgrades to ESLint 9, and upgrades all associated plugins - Replaces the `.eslintrc` and `.eslintignore` files with the new, "flat" configuration file, "eslint.config.mjs". - Places the previous "precommit" and "nightmare" rules in `./scripts/eslint.precommit.mjs` and `./scripts/eslint.nightmare.mjs`, respectively - Replaces the scripted wrappers for eslint (`eslint`, `eslint-precommit`) with a single executable that takes the arguments `--precommit`, which applies a stricter set of rules, and `--nightmare`, which applies an even more terrifyingly strict set of rules. - Provides the scripted wrapper `./scripts/eslint.mjs` so that eslint can be run from `bun`, if one so chooses. - Fixes *all* of the lint `eslint.config.mjs` now finds, including removing all of the `eslint` styling rules and overrides because Eslint now proudly leaves that entirely up to Prettier. To shut Dependabot up about ESLint. * Added explanation for no-console removal. * web: did not need the old and unmaintained nightmare mode; it can be configured directly.
101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
import "@goauthentik/elements/messages/MessageContainer";
|
|
import { Meta, StoryObj } from "@storybook/web-components";
|
|
|
|
import { TemplateResult, html } from "lit";
|
|
|
|
import "../components/ak-dual-select-controls";
|
|
import { AkDualSelectControls } from "../components/ak-dual-select-controls";
|
|
|
|
const metadata: Meta<AkDualSelectControls> = {
|
|
title: "Elements / Dual Select / Control Panel",
|
|
component: "ak-dual-select-controls",
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: "The vertical panel separating two dual-select elements.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
addActive: {
|
|
type: "boolean",
|
|
description:
|
|
"Highlighted if the sample panel has something to move to the result panel.",
|
|
},
|
|
removeActive: {
|
|
type: "boolean",
|
|
description:
|
|
"Highlighted if the result panel has something to move to the sample panel.",
|
|
},
|
|
selectAll: {
|
|
type: "boolean",
|
|
description: "Enable if you want both the 'move all visible' buttons.",
|
|
},
|
|
},
|
|
};
|
|
|
|
export default metadata;
|
|
|
|
const container = (testItem: TemplateResult) =>
|
|
html` <div style="background: #fff; padding: 2em">
|
|
<style>
|
|
li {
|
|
display: block;
|
|
}
|
|
p {
|
|
margin-top: 1em;
|
|
}
|
|
</style>
|
|
<ak-message-container></ak-message-container>
|
|
${testItem}
|
|
<p>Messages received from the button:</p>
|
|
<ul id="action-button-message-pad" style="margin-top: 1em"></ul>
|
|
</div>`;
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const displayMessage = (result: any) => {
|
|
const doc = new DOMParser().parseFromString(`<li><i>Event</i>: ${result}</li>`, "text/xml");
|
|
const target = document.querySelector("#action-button-message-pad");
|
|
target!.appendChild(doc.firstChild!);
|
|
};
|
|
|
|
window.addEventListener("ak-dual-select-add", () => displayMessage("add"));
|
|
window.addEventListener("ak-dual-select-remove", () => displayMessage("remove"));
|
|
window.addEventListener("ak-dual-select-add-all", () => displayMessage("add all"));
|
|
window.addEventListener("ak-dual-select-remove-all", () => displayMessage("remove all"));
|
|
|
|
type Story = StoryObj;
|
|
|
|
export const Default: Story = {
|
|
render: () => container(html` <ak-dual-select-controls></ak-dual-select-controls>`),
|
|
};
|
|
|
|
export const AddActive: Story = {
|
|
render: () => container(html` <ak-dual-select-controls add-active></ak-dual-select-controls>`),
|
|
};
|
|
|
|
export const RemoveActive: Story = {
|
|
render: () =>
|
|
container(html` <ak-dual-select-controls remove-active></ak-dual-select-controls>`),
|
|
};
|
|
|
|
export const AddAllActive: Story = {
|
|
render: () =>
|
|
container(
|
|
html` <ak-dual-select-controls
|
|
enable-select-all
|
|
add-all-active
|
|
></ak-dual-select-controls>`,
|
|
),
|
|
};
|
|
|
|
export const RemoveAllActive: Story = {
|
|
render: () =>
|
|
container(
|
|
html` <ak-dual-select-controls
|
|
enable-select-all
|
|
remove-all-active
|
|
></ak-dual-select-controls>`,
|
|
),
|
|
};
|