tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update first half of custom elements to be defined at their class dfns

Browse Source
This commit is contained in:
emma 2023-11-15 18:14:17 -05:00
parent 7d985a9688
commit d8f8e6db73
24 changed files with 78 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/account-settings.ts
View File

@ -1,5 +1,5 @@
import { LitElement } from "lit";
import { state, queryAsync, property } from "lit/decorators.js";
import { state, queryAsync, property, customElement } from "lit/decorators.js";
import { msg, str, localized } from "@lit/localize";
import debounce from "lodash/fp/debounce";
import { when } from "lit/directives/when.js";
@ -91,6 +91,7 @@ customElements.define("btrix-request-verify", RequestVerify);
@needLogin
@localized()
@customElement("btrix-account-settings")
export class AccountSettings extends LiteElement {
@property({ type: Object })
authState?: AuthState;

3
frontend/src/components/alert.ts
View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import { property, customElement } from "lit/decorators.js";
/**
* Alert used inline, e.g. for form server errors
@ -10,6 +10,7 @@ import { property } from "lit/decorators.js";
* <btrix-alert id="error_message>${errorMessage}</btrix-alert>
* ```
*/
@customElement("btrix-alert")
export class Alert extends LitElement {
@property({ type: String })
variant: "success" | "warning" | "danger" | "info" = "info";

3
frontend/src/components/badge.ts
View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import { customElement, property } from "lit/decorators.js";
/**
* Show numeric value in a label
@ -9,6 +9,7 @@ import { property } from "lit/decorators.js";
* <btrix-badge aria-describedby="text">10</btrix-badge>
* ```
*/
@customElement("btrix-badge")
export class Badge extends LitElement {
@property({ type: String })
variant: "success" | "warning" | "danger" | "neutral" = "neutral";

3
frontend/src/components/button.ts
View File

@ -2,7 +2,7 @@
/* eslint-disable lit/no-invalid-html */
import { LitElement, css } from "lit";
import { html, literal } from "lit/static-html.js";
import { property } from "lit/decorators.js";
import { customElement, property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -14,6 +14,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
* <btrix-button>Click me</btrix-button>
* ```
*/
@customElement("btrix-button")
export class Button extends LitElement {
@property({ type: String })
type: "submit" | "button" = "button";

4
frontend/src/components/checkbox-list.ts
View File

@ -1,6 +1,7 @@
import { SlCheckbox } from "@shoelace-style/shoelace";
import { LitElement, html, css } from "lit";
import {
customElement,
property,
query,
queryAssignedElements,
@ -21,6 +22,7 @@ const hostVars = css`
/**
* @event on-change CheckboxChangeEvent
*/
@customElement("btrix-checkbox-list-item")
export class CheckboxListItem extends LitElement {
static styles = [
hostVars,
@ -129,6 +131,7 @@ export class CheckboxListItem extends LitElement {
}
}
@customElement("btrix-checkbox-group-list")
export class CheckboxGroupList extends LitElement {
static styles = [
hostVars,
@ -173,6 +176,7 @@ export class CheckboxGroupList extends LitElement {
}
}
@customElement("btrix-checkbox-list")
export class CheckboxList extends LitElement {
static styles = [
hostVars,

3
frontend/src/components/code.ts
View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import { customElement, property } from "lit/decorators.js";
import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";
@ -8,6 +8,7 @@ import xml from "highlight.js/lib/languages/xml";
/**
* Syntax highlighting for javascript and HTML (XML)
*/
@customElement("btrix-code")
export class Code extends LitElement {
static styles = [
css`

3
frontend/src/components/collections-add.ts
View File

@ -1,4 +1,4 @@
import { state, property } from "lit/decorators.js";
import { state, property, customElement } from "lit/decorators.js";
import { msg, localized, str } from "@lit/localize";
import { when } from "lit/directives/when.js";
import debounce from "lodash/fp/debounce";
@ -39,6 +39,7 @@ export type CollectionsChangeEvent = CustomEvent<{
* @events collections-change
*/
@localized()
@customElement("btrix-collections-add")
export class CollectionsAdd extends LiteElement {
@property({ type: Object })
authState!: AuthState;

2
frontend/src/components/combobox.ts
View File

@ -4,6 +4,7 @@ import {
property,
query,
queryAssignedElements,
customElement,
} from "lit/decorators.js";
import {
SlInput,
@ -24,6 +25,7 @@ import { dropdown } from "../utils/css";
*
* @event request-close
*/
@customElement("btrix-combobox")
export class Combobox extends LitElement {
static styles = [
dropdown,

3
frontend/src/components/config-details.ts
View File

@ -1,5 +1,5 @@
import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
import { state, property } from "lit/decorators.js";
import { state, property, customElement } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { msg, localized, str } from "@lit/localize";
import RegexColorize from "regex-colorize";
@ -22,6 +22,7 @@ import { RelativeDuration } from "./relative-duration";
* ```
*/
@localized()
@customElement("btrix-config-details")
export class ConfigDetails extends LiteElement {
@property({ type: Object })
authState!: AuthState;

3
frontend/src/components/config-editor.ts
View File

@ -1,4 +1,4 @@
import { property, state, query } from "lit/decorators.js";
import { property, state, query, customElement } from "lit/decorators.js";
import { msg, localized } from "@lit/localize";
import {
parse as yamlToJson,
@ -21,6 +21,7 @@ import LiteElement, { html } from "../utils/LiteElement";
* @event on-change
*/
@localized()
@customElement("btrix-config-editor")
export class ConfigEditor extends LiteElement {
@property({ type: String })
value = "";

3
frontend/src/components/copy-button.ts
View File

@ -1,5 +1,5 @@
import { LitElement, html } from "lit";
import { property, state } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { msg, localized } from "@lit/localize";
/**
@ -17,6 +17,7 @@ import { msg, localized } from "@lit/localize";
* @event on-copied
*/
@localized()
@customElement("btrix-copy-button")
export class CopyButton extends LitElement {
@property({ type: String })
value?: string;

3
frontend/src/components/crawl-list.ts
View File

@ -13,6 +13,7 @@
*/
import { LitElement, html, css } from "lit";
import {
customElement,
property,
query,
queryAssignedElements,
@ -72,6 +73,7 @@ const hostVars = css`
`;
@localized()
@customElement("btrix-crawl-list-item")
export class CrawlListItem extends LitElement {
static styles = [
truncate,
@ -458,6 +460,7 @@ export class CrawlListItem extends LitElement {
}
@localized()
@customElement("btrix-crawl-list")
export class CrawlList extends LitElement {
static styles = [
srOnly,

3
frontend/src/components/crawl-logs.ts
View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from "lit";
import { property, state } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { msg, localized, str } from "@lit/localize";
@ -15,6 +15,7 @@ type CrawlLog = {
};
@localized()
@customElement("btrix-crawl-logs")
export class CrawlLogs extends LitElement {
static styles = [
truncate,

3
frontend/src/components/crawl-metadata-editor.ts
View File

@ -1,4 +1,4 @@
import { state, property } from "lit/decorators.js";
import { state, property, customElement } from "lit/decorators.js";
import { msg, localized, str } from "@lit/localize";
import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
import Fuse from "fuse.js";
@ -25,6 +25,7 @@ import type { Crawl } from "../types/crawler";
* @event updated
*/
@localized()
@customElement("btrix-crawl-metadata-editor")
export class CrawlMetadataEditor extends LiteElement {
@property({ type: Object })
authState?: AuthState;

3
frontend/src/components/crawl-pending-exclusions.ts
View File

@ -1,4 +1,4 @@
import { property, state } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { msg, localized, str } from "@lit/localize";
import LiteElement, { html } from "../utils/LiteElement";
@ -16,6 +16,7 @@ type URLs = string[];
* ```
*/
@localized()
@customElement("btrix-crawl-pending-exclusions")
export class CrawlPendingExclusions extends LiteElement {
@property({ type: Array })
matchedURLs: URLs | null = null;

3
frontend/src/components/crawl-queue.ts
View File

@ -1,4 +1,4 @@
import { property, state } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { msg, localized, str } from "@lit/localize";
import { when } from "lit/directives/when.js";
import throttle from "lodash/fp/throttle";
@ -30,6 +30,7 @@ const POLL_INTERVAL_SECONDS = 5;
* ```
*/
@localized()
@customElement("btrix-crawl-queue")
export class CrawlQueue extends LiteElement {
@property({ type: Object })
authState?: AuthState;

7
frontend/src/components/crawl-status.ts
View File

@ -1,5 +1,9 @@
import { LitElement, html, css, TemplateResult } from "lit";
import { property, queryAssignedElements } from "lit/decorators.js";
import {
customElement,
property,
queryAssignedElements,
} from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { msg, localized, str } from "@lit/localize";
import startCase from "lodash/fp/startCase";
@ -8,6 +12,7 @@ import type { CrawlState } from "../types/crawler";
import { animatePulse } from "../utils/css";
@localized()
@customElement("btrix-crawl-status")
export class CrawlStatus extends LitElement {
@property({ type: String })
state?: CrawlState;

3
frontend/src/components/data-table.ts
View File

@ -1,5 +1,5 @@
import { LitElement, html, css, TemplateResult } from "lit";
import { property } from "lit/decorators.js";
import { customElement, property } from "lit/decorators.js";
type CellContent = string | TemplateResult;
@ -19,6 +19,7 @@ type CellContent = string | TemplateResult;
* </btrix-data-table>
* ```
*/
@customElement("btrix-data-table")
export class DataTable extends LitElement {
static styles = css`
:host {

4
frontend/src/components/desc-list.ts
View File

@ -15,9 +15,10 @@
* ```
*/
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import { customElement, property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
@customElement("btrix-desc-list-item")
export class DescListItem extends LitElement {
static styles = css`
:host {
@ -65,6 +66,7 @@ export class DescListItem extends LitElement {
}
}
@customElement("btrix-desc-list")
export class DescList extends LitElement {
static styles = css`
dl {

3
frontend/src/components/details.ts
View File

@ -1,5 +1,5 @@
import { LitElement, html, css, unsafeCSS } from "lit";
import { property } from "lit/decorators.js";
import { customElement, property } from "lit/decorators.js";
import caretDownFillSvg from "../assets/images/caret-down-fill.svg";
import caretRightFillSvg from "../assets/images/caret-right-fill.svg";
@ -17,6 +17,7 @@ import caretRightFillSvg from "../assets/images/caret-right-fill.svg";
*
* @event on-toggle { open: boolean; }
*/
@customElement("btrix-details")
export class Details extends LitElement {
@property({ type: Boolean })
open? = false;

2
frontend/src/components/dialog.ts
View File

@ -1,12 +1,14 @@
import { css } from "lit";
import SLDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
import dialogStyles from "@shoelace-style/shoelace/dist/components/dialog/dialog.styles.js";
import { customElement } from "lit/decorators";
/**
* Customized <sl-dialog>
*
* Usage: see https://shoelace.style/components/dialog
*/
@customElement("btrix-dialog")
export class Dialog extends SLDialog {
static styles = css`
${dialogStyles} .dialog__panel {

3
frontend/src/components/exclusion-editor.ts
View File

@ -1,4 +1,4 @@
import { property, state } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { msg, localized, str } from "@lit/localize";
import type { ExclusionRemoveEvent } from "./queue-exclusion-table";
@ -34,6 +34,7 @@ type ResponseData = {
* @event on-success On successful edit
*/
@localized()
@customElement("btrix-exclusion-editor")
export class ExclusionEditor extends LiteElement {
@property({ type: Object })
authState?: AuthState;

3
frontend/src/components/file-list.ts
View File

@ -1,5 +1,6 @@
import { LitElement, html, css } from "lit";
import {
customElement,
property,
query,
queryAssignedElements,
@ -15,6 +16,7 @@ export type FileRemoveEvent = CustomEvent<{
/**
* @event on-remove FileRemoveEvent
*/
@customElement("btrix-file-list-item")
export class FileListItem extends LitElement {
static styles = [
truncate,
@ -119,6 +121,7 @@ export class FileListItem extends LitElement {
};
}
@customElement("btrix-file-list")
export class FileList extends LitElement {
static styles = [
css`

101
frontend/src/components/index.ts
View File

@ -1,24 +1,16 @@
import { Alert } from "./alert";
import "./alert";
import { Input } from "./input/input";
import { TimeInput } from "./time-input";
import("./details").then(({ Details }) => {
customElements.define("btrix-details", Details);
});
import("./details");
import("./locale-picker").then(({ LocalePicker }) => {
customElements.define("btrix-locale-picker", LocalePicker);
});
import("./account-settings").then(({ AccountSettings }) => {
customElements.define("btrix-account-settings", AccountSettings);
});
import("./config-editor").then(({ ConfigEditor }) => {
customElements.define("btrix-config-editor", ConfigEditor);
});
import("./account-settings");
import("./config-editor");
import("./orgs-list").then(({ OrgsList }) => {
customElements.define("btrix-orgs-list", OrgsList);
});
import("./copy-button").then(({ CopyButton }) => {
customElements.define("btrix-copy-button", CopyButton);
});
import("./copy-button");
import("./invite-form").then(({ InviteForm }) => {
customElements.define("btrix-invite-form", InviteForm);
});
@ -56,24 +48,11 @@ import("./numbered-list").then(
import("./pagination").then(({ Pagination }) => {
customElements.define("btrix-pagination", Pagination);
});
import("./crawl-queue").then(({ CrawlQueue }) => {
customElements.define("btrix-crawl-queue", CrawlQueue);
});
import("./exclusion-editor").then(({ ExclusionEditor }) => {
customElements.define("btrix-exclusion-editor", ExclusionEditor);
});
import("./crawl-pending-exclusions").then(({ CrawlPendingExclusions }) => {
customElements.define(
"btrix-crawl-pending-exclusions",
CrawlPendingExclusions
);
});
import("./badge").then(({ Badge }) => {
customElements.define("btrix-badge", Badge);
});
import("./button").then(({ Button }) => {
customElements.define("btrix-button", Button);
});
import("./crawl-queue");
import("./exclusion-editor");
import("./crawl-pending-exclusions");
import("./badge");
import("./button");
import("./language-select").then(({ LanguageSelect }) => {
customElements.define("btrix-language-select", LanguageSelect);
});
@ -82,74 +61,41 @@ import("./tab-list").then(({ Tab, TabList, TabPanel }) => {
customElements.define("btrix-tab-list", TabList);
customElements.define("btrix-tab-panel", TabPanel);
});
import("./desc-list").then(({ DescListItem, DescList }) => {
customElements.define("btrix-desc-list-item", DescListItem);
customElements.define("btrix-desc-list", DescList);
});
import("./checkbox-list").then(
({ CheckboxListItem, CheckboxGroupList, CheckboxList }) => {
customElements.define("btrix-checkbox-list-item", CheckboxListItem);
customElements.define("btrix-checkbox-group-list", CheckboxGroupList);
customElements.define("btrix-checkbox-list", CheckboxList);
}
);
import("./crawl-list").then(({ CrawlListItem, CrawlList }) => {
customElements.define("btrix-crawl-list-item", CrawlListItem);
customElements.define("btrix-crawl-list", CrawlList);
});
import("./desc-list");
import("./checkbox-list");
import("./crawl-list");
import("./workflow-list").then(({ WorkflowListItem, WorkflowList }) => {
customElements.define("btrix-workflow-list-item", WorkflowListItem);
customElements.define("btrix-workflow-list", WorkflowList);
});
import("./crawl-logs").then(({ CrawlLogs }) => {
customElements.define("btrix-crawl-logs", CrawlLogs);
});
import("./crawl-logs");
import("./section-heading").then(({ SectionHeading }) => {
customElements.define("btrix-section-heading", SectionHeading);
});
import("./config-details").then(({ ConfigDetails }) => {
customElements.define("btrix-config-details", ConfigDetails);
});
import("./config-details");
import("./tag-input").then(({ TagInput }) => {
customElements.define("btrix-tag-input", TagInput);
});
import("./tag").then(({ Tag }) => {
customElements.define("btrix-tag", Tag);
});
import("./dialog").then(({ Dialog }) => {
customElements.define("btrix-dialog", Dialog);
});
import("./data-table").then(({ DataTable }) => {
customElements.define("btrix-data-table", DataTable);
});
import("./crawl-status").then(({ CrawlStatus }) => {
customElements.define("btrix-crawl-status", CrawlStatus);
});
import("./crawl-metadata-editor").then(({ CrawlMetadataEditor }) => {
customElements.define("btrix-crawl-metadata-editor", CrawlMetadataEditor);
});
import("./dialog");
import("./data-table");
import("./crawl-status");
import("./crawl-metadata-editor");
import("./observable").then(({ Observable }) => {
customElements.define("btrix-observable", Observable);
});
import("./combobox").then(({ Combobox }) => {
customElements.define("btrix-combobox", Combobox);
});
import("./combobox");
import("./markdown-editor").then(({ MarkdownEditor }) => {
customElements.define("btrix-markdown-editor", MarkdownEditor);
});
import("./markdown-viewer").then(({ MarkdownViewer }) => {
customElements.define("btrix-markdown-viewer", MarkdownViewer);
});
import("./file-list").then(({ FileList, FileListItem }) => {
customElements.define("btrix-file-list", FileList);
customElements.define("btrix-file-list-item", FileListItem);
});
import("./collections-add").then(({ CollectionsAdd }) => {
customElements.define("btrix-collections-add", CollectionsAdd);
});
import("./code").then(({ Code }) => {
customElements.define("btrix-code", Code);
});
import("./file-list");
import("./collections-add");
import("./code");
import("./pw-strength-alert").then(({ PasswordStrengthAlert }) => {
customElements.define("btrix-pw-strength-alert", PasswordStrengthAlert);
});
@ -160,6 +106,5 @@ import("./meter").then(({ Meter, MeterBar }) => {
customElements.define("btrix-meter", Meter);
customElements.define("btrix-meter-bar", MeterBar);
});
customElements.define("btrix-alert", Alert);
customElements.define("btrix-input", Input);
customElements.define("btrix-time-input", TimeInput);