From 1b4073f2cb4ee3177ba2780bd52535e42609f9f4 Mon Sep 17 00:00:00 2001 From: David Thorpe Date: Tue, 16 Apr 2024 13:31:13 +0200 Subject: [PATCH 1/3] Added spacers --- .eslintrc.yml | 9 -- config/eslint.config.mjs | 7 + package-lock.json | 20 ++- package.json | 6 +- src/component/layout/RowElement.js | 201 ++++++++++++++++++++++++++++- src/component/nav/NavBarElement.js | 1 - src/css/document.css | 1 + src/index.html | 44 ++++--- src/index.js | 20 ++- 9 files changed, 267 insertions(+), 42 deletions(-) delete mode 100644 .eslintrc.yml create mode 100644 config/eslint.config.mjs diff --git a/.eslintrc.yml b/.eslintrc.yml deleted file mode 100644 index 3974f09..0000000 --- a/.eslintrc.yml +++ /dev/null @@ -1,9 +0,0 @@ -env: - browser: true - es2021: true -extends: - - airbnb-base -parserOptions: - ecmaVersion: 12 - sourceType: module -rules: {} diff --git a/config/eslint.config.mjs b/config/eslint.config.mjs new file mode 100644 index 0000000..f49cc62 --- /dev/null +++ b/config/eslint.config.mjs @@ -0,0 +1,7 @@ +import globals from "globals"; +import pluginJs from "@eslint/js"; + +export default [ + {languageOptions: { globals: globals.browser }}, + pluginJs.configs.recommended, +]; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index cb600cd..acd1bca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,10 @@ "lit": "^3.1.2" }, "devDependencies": { + "@eslint/js": "^9.0.0", "esbuild": "^0.20.2", "eslint": "^9.0.0", + "globals": "^15.0.0", "jsdoc": "^4.0.2" } }, @@ -466,6 +468,18 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", + "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@eslint/js": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.0.0.tgz", @@ -1081,9 +1095,9 @@ } }, "node_modules/globals": { - "version": "14.0.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", - "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", + "version": "15.0.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-15.0.0.tgz", + "integrity": "sha512-m/C/yR4mjO6pXDTm9/R/SpYTAIyaUB4EOzcaaMEl7mds7Mshct9GfejiJNQGjHHbdMPey13Kpu4TMbYi9ex1pw==", "dev": true, "engines": { "node": ">=18" diff --git a/package.json b/package.json index d5b0997..0cd290d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "serve": "rm -fr dist && install -d dist && esbuild src/index.html src/index.js --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy --watch --serve", "build": "rm -fr dist && install -d dist && esbuild src/index.js --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy", - "lint": "eslint js", + "lint": "eslint -c config/eslint.config.mjs src/*.js", "docs": "jsdoc -c config/jsdoc.config.json" }, "repository": { @@ -23,8 +23,10 @@ }, "homepage": "https://github.com/djthorpe/js-framework#readme", "devDependencies": { + "@eslint/js": "^9.0.0", "esbuild": "^0.20.2", "eslint": "^9.0.0", + "globals": "^15.0.0", "jsdoc": "^4.0.2" }, "dependencies": { @@ -34,4 +36,4 @@ "files": [ "dist/**/*.{js,map,woff,woff2,txt,ttf,css,html,svg}" ] -} \ No newline at end of file +} diff --git a/src/component/layout/RowElement.js b/src/component/layout/RowElement.js index 8155264..ce8b52e 100644 --- a/src/component/layout/RowElement.js +++ b/src/component/layout/RowElement.js @@ -1,5 +1,5 @@ -import { LitElement, html, css } from 'lit'; +import { LitElement, html, css, nothing } from 'lit'; /** * A row element which allows you to create a row with cells, either populating @@ -10,7 +10,7 @@ import { LitElement, html, css } from 'lit'; * Example: * * ```html - * + * * * * @@ -22,13 +22,206 @@ export class RowElement extends LitElement { constructor() { super(); + this.backgroundColor = ''; + } + static get properties() { + return { + /** + * The badge background color. One of the following: primary, secondary, success, warning, danger, light, dark + * @type {String} + * @memberof BadgeElement + */ + backgroundColor: { type: String }, + }; } static get styles() { - return css``; + return css` + slot { + position: relative; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + } + .bg-color-primary { + background-color: var(--primary-color); + color: var(--light-color); + } + .bg-color-secondary { + background-color: var(--secondary-color); + color: var(--dark-color); + } + .bg-color-success { + background-color: var(--success-color); + color: var(--light-color); + } + .bg-color-warning { + background-color: var(--warning-color); + color: var(--light-color); + } + .bg-color-error { + background-color: var(--error-color); + color: var(--light-color); + } + .bg-color-light { + background-color: var(--light-color); + color: var(--dark-color); + } + .bg-color-dark { + background-color: var(--dark-color); + color: var(--light-color); + } + `; } render() { return html` -
+ `; } } + +export class RowCellElement extends LitElement { + static localName = 'wc-row-cell'; + + constructor() { + super(); + this.width = 0; + } + static get properties() { + return { + /** + * The width of the cell, in a 12 column grid + * @type {Number} + * @memberof RowCellElement + */ + width: { type: Number }, + }; + } + get flexBasis() { + if (this.width <= 12) { + return `${this.width * (100 / 12)}%`; + } + return 'none'; + } + + get display() { + return this.width ? 'block' : 'none'; + } + render() { + this.style.maxWidth = `${this.flexBasis}`; + this.style.flexBasis = `${this.flexBasis}`; + this.style.display = `${this.display}`; + return html` + + `; + } +} + +export class RowCell1Element extends RowCellElement { + static localName = 'wc-row-1'; + + constructor() { + super(); + this.width = 1; + } +} + +export class RowCell2Element extends RowCellElement { + static localName = 'wc-row-2'; + + constructor() { + super(); + this.width = 2; + } +} + +export class RowCell3Element extends RowCellElement { + static localName = 'wc-row-3'; + + constructor() { + super(); + this.width = 3; + } +} + +export class RowCell4Element extends RowCellElement { + static localName = 'wc-row-4'; + + constructor() { + super(); + this.width = 4; + } +} + +export class RowCell5Element extends RowCellElement { + static localName = 'wc-row-5'; + + constructor() { + super(); + this.width = 5; + } +} + +export class RowCell6Element extends RowCellElement { + static localName = 'wc-row-6'; + + constructor() { + super(); + this.width = 6; + } +} + +export class RowCell7Element extends RowCellElement { + static localName = 'wc-row-7'; + + constructor() { + super(); + this.width = 7; + } +} + +export class RowCell8Element extends RowCellElement { + static localName = 'wc-row-8'; + + constructor() { + super(); + this.width = 8; + } +} + +export class RowCell9Element extends RowCellElement { + static localName = 'wc-row-9'; + + constructor() { + super(); + this.width = 9; + } +} + +export class RowCell10Element extends RowCellElement { + static localName = 'wc-row-10'; + + constructor() { + super(); + this.width = 10; + } +} + +export class RowCell11Element extends RowCellElement { + static localName = 'wc-row-11'; + + constructor() { + super(); + this.width = 11; + } +} + + +export class RowCell12Element extends RowCellElement { + static localName = 'wc-row-12'; + + constructor() { + super(); + this.width = 12; + } +} diff --git a/src/component/nav/NavBarElement.js b/src/component/nav/NavBarElement.js index 771cf0e..9813c1c 100644 --- a/src/component/nav/NavBarElement.js +++ b/src/component/nav/NavBarElement.js @@ -20,7 +20,6 @@ export class NavBarElement extends LitElement { disabled: { type: Boolean }, }; } - static get styles() { return css` nav { diff --git a/src/css/document.css b/src/css/document.css index 2e426ca..63466e6 100644 --- a/src/css/document.css +++ b/src/css/document.css @@ -82,3 +82,4 @@ div.container { .m-6 { margin: var(--spacer-6) !important; } + diff --git a/src/index.html b/src/index.html index c94e9d5..a7e8022 100644 --- a/src/index.html +++ b/src/index.html @@ -105,20 +105,28 @@

Modal

Form

- - - Name - - Email Address - - Address - - Date of Birth - - - Save - Cancel - + + + Name + + Email Address + + Date of Birth + + + Address + + + + + + + Save + Cancel + + + +
@@ -128,7 +136,7 @@

Form

Row Layout

Two Columns

- + Left Hand Side @@ -180,13 +188,13 @@

Six Columns

Col 3 - + Col 4 - + Col 5 - + Col 6 diff --git a/src/index.js b/src/index.js index 1eeff78..26019f3 100644 --- a/src/index.js +++ b/src/index.js @@ -16,7 +16,6 @@ import './component/badge/BadgeGroupElement'; customElements.define(BadgeElement.localName, BadgeElement); // wc-badge - // Icons import './component/icon/IconElement'; @@ -34,11 +33,23 @@ import './component/form/FormTextElement'; import './component/form/FormDateElement'; // Layout Elements -import './component/layout/SpacerElement.js'; -import './component/layout/RowElement.js'; +import { SpacerElement } from './component/layout/SpacerElement'; +import { RowElement, RowCell1Element, RowCell2Element,RowCell3Element,RowCell4Element,RowCell5Element,RowCell6Element,RowCell7Element,RowCell8Element,RowCell9Element,RowCell10Element,RowCell11Element,RowCell12Element } from './component/layout/RowElement'; customElements.define(SpacerElement.localName, SpacerElement); // wc-spacer customElements.define(RowElement.localName, RowElement); // wc-row +customElements.define(RowCell1Element.localName, RowCell1Element); // wc-row-1 +customElements.define(RowCell2Element.localName, RowCell2Element); // wc-row-2 +customElements.define(RowCell3Element.localName, RowCell3Element); // wc-row-3 +customElements.define(RowCell4Element.localName, RowCell4Element); // wc-row-4 +customElements.define(RowCell5Element.localName, RowCell5Element); // wc-row-5 +customElements.define(RowCell6Element.localName, RowCell6Element); // wc-row-6 +customElements.define(RowCell7Element.localName, RowCell7Element); // wc-row-7 +customElements.define(RowCell8Element.localName, RowCell8Element); // wc-row-8 +customElements.define(RowCell9Element.localName, RowCell9Element); // wc-row-9 +customElements.define(RowCell10Element.localName, RowCell10Element); // wc-row-10 +customElements.define(RowCell11Element.localName, RowCell11Element); // wc-row-11 +customElements.define(RowCell12Element.localName, RowCell12Element); // wc-row-12 // CSS import './css/core.css'; @@ -46,6 +57,5 @@ import './css/document.css'; // Other import './esbuild.js'; -import './test.js';import { BadgeElement } from './component/badge/BadgeElement'; -import { SpacerElement } from './component/layout/SpacerElement.js'; +import './test.js'; import { BadgeElement } from './component/badge/BadgeElement'; From 7890c4f6091ca154d6e2127bd1bd96dfb377a238 Mon Sep 17 00:00:00 2001 From: David Thorpe Date: Tue, 16 Apr 2024 14:09:10 +0200 Subject: [PATCH 2/3] Updated --- src/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.html b/src/index.html index a7e8022..da721a4 100644 --- a/src/index.html +++ b/src/index.html @@ -131,7 +131,6 @@

Form

-

Row Layout

From 91080a0bfec2c56532dafc23f9f2768e42172272 Mon Sep 17 00:00:00 2001 From: David Thorpe Date: Wed, 17 Apr 2024 09:15:05 +0200 Subject: [PATCH 3/3] Updates --- package.json | 4 ++-- src/index.html | 4 ++-- src/index.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 0cd290d..65b7ef8 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "description": "Javascript Framework", "main": "dist/index.js", "scripts": { - "serve": "rm -fr dist && install -d dist && esbuild src/index.html src/index.js --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy --watch --serve", - "build": "rm -fr dist && install -d dist && esbuild src/index.js --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy", + "serve": "rm -fr dist && install -d dist && esbuild src/index.html src/index.js --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy --watch --serve", + "build": "rm -fr dist && install -d dist && esbuild src/index.js --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file", "lint": "eslint -c config/eslint.config.mjs src/*.js", "docs": "jsdoc -c config/jsdoc.config.json" }, diff --git a/src/index.html b/src/index.html index da721a4..a161b66 100644 --- a/src/index.html +++ b/src/index.html @@ -5,8 +5,8 @@ Storybook - - + + diff --git a/src/index.js b/src/index.js index 26019f3..1e59dca 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ import './component/button/ButtonGroupElement'; import './component/button/CloseButtonElement'; // Badges -import './component/badge/BadgeElement'; +import { BadgeElement } from './component/badge/BadgeElement'; import './component/badge/BadgeGroupElement'; customElements.define(BadgeElement.localName, BadgeElement); // wc-badge @@ -57,5 +57,5 @@ import './css/document.css'; // Other import './esbuild.js'; -import './test.js'; import { BadgeElement } from './component/badge/BadgeElement'; +import './test.js';