kevinjump / earlyadopters.umbraco.templates Goto Github PK

{
	// Place your Fundrella.Web.UI.Client workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
	// Placeholders with the same ids are connected.
	// Example:
	"New Lit Element": {
		"description": "create a new lit element",
		"scope": "javascript,typescript",
		"prefix": "litnew",
		"body": [
			"import { LitElement,css,html,customElement,property} from '@newsletter-studio/lit';",
			"import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';",
			"import { UmbTextStyles } from '@umbraco-cms/backoffice/style';",
			//"import {classMap} from 'lit/directives/class-map.js'",
			"",
			"/**",
			"* ${TM_FILENAME_BASE/(.*)\\..+$/$1/} description",
			"* @element ${TM_FILENAME_BASE/(.*)\\..+$/$1/}",
			"* @fires CustomEvent#change - lorem ipsum ",
			"* @cssprop --ns-foo-bar - Color of lorem",
			"*/",
			"",
			"@customElement('${TM_FILENAME_BASE/(.*)\\..+$/$1/}')",
			"export class ${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element extends UmbElementMixin(LitElement) {",
			"",
			"\t/**",
			"\t* Description ",
			"\t*/",
			"\t@property({type:Boolean})",
			"\tdisabled : boolean = false;",
			"",
			"\trender() {",
			"\t\treturn html`",
			"\t\t\t<div>",
			"\t\t\t\t${TM_FILENAME_BASE/(.*)\\..+$/$1/}$1",
			"\t\t\t</div>",
			"\t\t`",
			"",
			"\t}",
			"",
			"\tstatic styles = [UmbTextStyles, css`",
			"",
			"\t\t:host {",
			"\t\t--lorem-ipsum : var(--lorem-ipsum2,#ff00ff);",
			"\t\t}",
			"\t`]",
			"}",
			"",
			"export default ${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element;",
			"",
			"declare global {",
			"\tinterface HTMLElementTagNameMap {",
			"\t\t'${TM_FILENAME_BASE/(.*)\\..+$/$1/}': ${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element;",
			"\t}",
			"}"
		]
	},
	"New Storybook Story": {
		"description": "Creates a new storybook story component.",
		"scope": "javascript,typescript",
		"prefix": "storynew",
		"body": [
			"import type { Meta, StoryObj } from '@storybook/web-components';",
			//"import { html } from 'lit-html';",
			"import type { ${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element } from './${TM_FILENAME_BASE/(.*)\\..+$/$1/}.element.js';",
			"import '@newsletter-studio/components';",
			//"import './${TM_FILENAME_BASE/(.*)\\..+$/$1/}.element';",
			"",
			//"/**",
			//"* ${TM_FILENAME_BASE/(.*)\\..+$/$1/}",
			//"* ${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element extends LitElement",
			//"*/",
			"export default {",
			"\tid: '${TM_FILENAME_BASE/(.*)\\..+$/$1/}',",
			"\tcomponent: '${TM_FILENAME_BASE/(.*)\\..+$/$1/}',",
			"\ttitle: 'Components/${TM_FILENAME_BASE/(.*)\\..+$/$1/}',",
			//MJ: 240404: Remove these auto docs, not needed thanks to preview.ts/main.ts settings.
			//"\ttags: ['autodocs'],",
			//"\tdecorators: [",
			//"\t\t(Story: ()=>string) => html`<div class='app-container'>${Story()}</div>`,",
			//"\t],",
			"\t",
			"} as Meta<${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element>;",
			"",
			"export const Primary : StoryObj<${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element> = {",
			"\t ",
			"}"
		]
	},
	"Umbraco Lit Localize Term" : {
		"description": "",
		"scope" :"html",
		"prefix" : "umblocalize",
		"body" : [
			"${this.localize.term('ns_${1}')}"
		]
	},
    "Lit When" : {
		"description": "",
		"scope" :"html",
		"prefix" : "lwhen",
		"body" : [
			"${when(${1},()=>html``)}"
		]
	}
}