tp-elements/tp-color-picker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tp-elements:1f2c24160040785ee2d899dcd3f30fb56a96d957
Branches Tags
tp-elements:main
...
compare: tp-elements:main
Branches Tags
tp-elements:main

3 Commits
1f2c241600 ... main

Author SHA1 Message Date
pk
e6143d272a Add styling part 2025-03-07 09:51:31 +01:00
pk
8c26fe50e3 Add random color method 2025-02-09 17:08:31 +01:00
pk
1dd10a2044 Fix color palate flex direction 2025-02-03 18:12:26 +01:00
2 changed files with 9 additions and 2 deletions
Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-color-picker", "name": "@tp/tp-color-picker",
"version": "1.0.0", "version": "1.2.0",
"description": "", "description": "",
"main": "tp-color-picker.js", "main": "tp-color-picker.js",
"scripts": { "scripts": {

9
tp-color-picker.js
View File

@ -31,6 +31,7 @@ class TpColorPicker extends FormElement(DomQuery(LitElement)) {
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
height: 200px; height: 200px;
width: 360px; width: 360px;
@ -83,7 +84,7 @@ class TpColorPicker extends FormElement(DomQuery(LitElement)) {
return html` return html`
<tp-popup id="popup" part="popup" @is-open-changed=${e => this.isOpen = e.detail}> <tp-popup id="popup" part="popup" @is-open-changed=${e => this.isOpen = e.detail}>
<div slot="toggle" part="selection" style="${this._showPickedColor(this.value)}"></div> <div slot="toggle" part="selection" style="${this._showPickedColor(this.value)}"></div>
<div slot="content" @click="${this._selectColor}"> <div slot="content" part="selector" @click="${this._selectColor}">
<div class="wrap"> <div class="wrap">
${this.colorList.map(color => html` ${this.colorList.map(color => html`
<div color style="${this._bgColor(color)}"></div> <div color style="${this._bgColor(color)}"></div>
@ -123,6 +124,12 @@ class TpColorPicker extends FormElement(DomQuery(LitElement)) {
]; ];
} }
randomColor() {
const randomColor = this.colorList[Math.floor(Math.random() * this.colorList.length)];
this.value = randomColor;
return randomColor;
}
_selectColor(e) { _selectColor(e) {
const target = e.composedPath()[0]; const target = e.composedPath()[0];
if (target.hasAttribute('color')) { if (target.hasAttribute('color')) {