Initial version.

2022-04-29 20:32:37 +02:00 · 2022-04-29 20:32:37 +02:00 · 59c098ef43
commit 59c098ef43
parent 8b2cad82e0
5 changed files with 226 additions and 40 deletions
--- a/README.md
+++ b/README.md
@ -1 +1 @@
-# tp-element
+# tp-radio
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,109 @@
+{
+  "name": "@tp/tp-radio",
+  "version": "0.0.1",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@tp/tp-radio",
+      "version": "0.0.1",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@tp/helpers": "^1.1.3",
+        "lit": "^2.2.0"
+      }
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.3.2",
+      "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.2.tgz",
+      "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@tp/helpers": {
+      "version": "1.1.3",
+      "resolved": "https://verdaccio.codeblob.work/@tp%2fhelpers/-/helpers-1.1.3.tgz",
+      "integrity": "sha512-WDj3meXgCjF9/4eyPQMk2YEderVDUD3IVJrjds0i4seABVI5yyaMWVNtxxH+w8O9eIDgwxiuyQqaI7bdyNaCoA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
+      "license": "MIT"
+    },
+    "node_modules/lit": {
+      "version": "2.2.3",
+      "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.3.tgz",
+      "integrity": "sha512-5/v+r9dH3Pw/o0rhp/qYk3ERvOUclNF31bWb0FiW6MPgwdQIr+/KCt/p3zcd8aPl8lIGnxdGrVcZA+gWS6oFOQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.2.0",
+      "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
+      "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.2.3",
+      "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.3.tgz",
+      "integrity": "sha512-vI4j3eWwtQaR8q/O63juZVliBIFMio716X719/lSsGH4UWPy2/7Qf377jsNs4cx3gCHgIbx8yxFgXFQ/igZyXQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    }
+  },
+  "dependencies": {
+    "@lit/reactive-element": {
+      "version": "1.3.2",
+      "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.2.tgz",
+      "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA=="
+    },
+    "@tp/helpers": {
+      "version": "1.1.3",
+      "resolved": "https://verdaccio.codeblob.work/@tp%2fhelpers/-/helpers-1.1.3.tgz",
+      "integrity": "sha512-WDj3meXgCjF9/4eyPQMk2YEderVDUD3IVJrjds0i4seABVI5yyaMWVNtxxH+w8O9eIDgwxiuyQqaI7bdyNaCoA=="
+    },
+    "@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
+    "lit": {
+      "version": "2.2.3",
+      "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.3.tgz",
+      "integrity": "sha512-5/v+r9dH3Pw/o0rhp/qYk3ERvOUclNF31bWb0FiW6MPgwdQIr+/KCt/p3zcd8aPl8lIGnxdGrVcZA+gWS6oFOQ==",
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-element": {
+      "version": "3.2.0",
+      "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
+      "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-html": {
+      "version": "2.2.3",
+      "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.3.tgz",
+      "integrity": "sha512-vI4j3eWwtQaR8q/O63juZVliBIFMio716X719/lSsGH4UWPy2/7Qf377jsNs4cx3gCHgIbx8yxFgXFQ/igZyXQ==",
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -1,18 +1,19 @@
 {
-  "name": "@tp/tp-element",
-  "version": "0.0.1",
+  "name": "@tp/tp-radio",
+  "version": "1.0.0",
  "description": "",
-  "main": "tp-element.js",
+  "main": "tp-radio.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
-    "url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
+    "url": "https://gitea.codeblob.work/tp-elements/tp-radio.git"
  },
  "author": "trading_peter",
  "license": "Apache-2.0",
  "dependencies": {
+    "@tp/helpers": "^1.1.3",
    "lit": "^2.2.0"
  }
 }
--- a/tp-element.js
+++ b/tp-element.js
@ -1,35 +0,0 @@
-/**
-@license
-Copyright (c) 2022 trading_peter
-This program is available under Apache License Version 2.0
-*/
-
-import { LitElement, html, css } from 'lit';
-
-class TpElement extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-        }
-      `
-    ];
-  }
-
-  render() {
-    const { } = this;
-
-    return html`
-
-    `;
-  }
-
-  static get properties() {
-    return { };
-  }
-
-
-}
-
-window.customElements.define('tp-element', TpElement);
--- a/tp-radio.js
+++ b/tp-radio.js
@ -0,0 +1,111 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { FormElement } from '@tp/helpers/form-element.js';
+import { ControlState } from '@tp/helpers/control-state.js';
+import { Inert } from '@tp/helpers/inert';
+import { LitElement, html, css } from 'lit';
+
+class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          cursor: pointer;
+        }
+
+        [hidden] {
+          display: none;
+        }
+
+        .circle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: solid 1px var(--tp-radio-color, #000);
+          background: #fff;
+          border-radius: 100%;
+          width: var(--tp-radio-width, 18px);
+          height: var(--tp-radio-height, 18px);
+        }
+
+        .dot {
+          border-radius: 100%;
+          background: var(--tp-radio-color, #000);
+          width: calc(var(--tp-radio-width, 18px) - 4px);
+          height: calc(var(--tp-radio-height, 18px) - 4px);
+        }
+
+        .wrap {
+          display: flex;
+          align-items: center;
+        }
+
+        .label {
+          margin-left: 8px;
+        }
+      `
+    ];
+  }
+
+  render() {
+    const { checked } = this;
+
+    return html`
+      <div class="wrap" part="wrap" @click=${this.check}>
+        <div class="circle" part="circle">
+          <div class="dot" ?hidden=${!checked}></div>
+        </div>
+        <div class="label" part="label"><slot></slot></div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      checked: { type: Boolean, reflect: true },
+      role: { type: String, reflect: true },
+      _value: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.role = 'radio';
+    this.checked = false;
+    this._value = '';
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.setAttribute('tabindex', '0');
+  }
+
+  check() {
+    this.checked = true;
+    this.dispatchEvent(new CustomEvent('checked', { detail: this.checked, bubbles: true, composed: true }));
+  }
+
+  updated(changes) {
+    if (changes.has('checked')) {
+      this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.checked, bubbles: true, composed: true }));
+    }
+  }
+
+  get value() {
+    if (this._value !== '') {
+      return this._value;
+    }
+    return this.checked;
+  }
+
+  set value(val) {
+    this._value = val;
+  }
+}
+
+window.customElements.define('tp-radio', TpRadio);