diff --git a/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets b/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets index b8907220b6..4920d8011b 100644 --- a/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets +++ b/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets @@ -1,30 +1,30 @@ { - "Create Lit Component": { - "prefix": "lit new", + "UmbNewLitElement": { + "prefix": "new umb element", "scope": "typescript", "body": [ - "import { UmbTextStyles } from '@umbraco-ui/backoffice/style';", - "import { css, html } from 'lit';", - "import { customElement } from 'lit/decorators.js';", + "import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';", "import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';", + "import { UmbTextStyles } from '@umbraco-cms/backoffice/style';", "", "@customElement('umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}')", - "export class Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element extends UmbLitElement {", - "\trender() {", - "\t\treturn html`${0:umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}}`;", + "export class Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element extends UmbLitElement {", + "\toverride render() {", + "\t\treturn html`$0`;", "\t}", "", - "\tstatic styles = [UmbTextStyles, css``];", + "\tstatic override readonly styles = [UmbTextStyles, css``];", "}", "", - "export default Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element", + "export { Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element as element };", "", "declare global {", "\tinterface HTMLElementTagNameMap {", - "\t\t'umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}': Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element;", + "\t\t'umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}': Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element;", "\t}", - "}" + "}", + "", ], - "description": "Create a new Lit Component" - } + "description": "Create a new Umbraco Lit element", + }, } diff --git a/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts index 988ad6197a..43be6cfdd4 100644 --- a/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts +++ b/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts @@ -1,11 +1,13 @@ import { css, html, customElement, state, when, nothing } from '@umbraco-cms/backoffice/external/lit'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { UmbInputManifestElement } from '@umbraco-cms/backoffice/components'; +import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; +import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; +// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name @customElement('example-manifest-picker-dashboard') +// eslint-disable-next-line local-rules/enforce-element-suffix-on-element-class-name, local-rules/umb-class-prefix export class ExampleManifestPickerDashboard extends UmbLitElement { #options: Array