@spectric/ui 0.0.18 → 0.0.20

package/src/components/color_picker/ColorPicker.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, eventOptions, property, state } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { PopoverElement } from '../tooltip/popover';
 import { createRef, ref } from 'lit/directives/ref.js';
@@ -26,9 +26,9 @@ interface EyeDropper {
 
 declare var EyeDropper: EyeDropper;
 let eyedropper: EyeDropper | undefined
-// if (window.hasOwnProperty("EyeDropper")) {
-//     eyedropper = new EyeDropper()
-// }
+if (window.hasOwnProperty("EyeDropper")) {
+    eyedropper = new EyeDropper()
+}
 @customElement('spectric-colorpicker')
 export class SpectricColorPicker extends LitElement implements ColorPickerProps {
     @property({ type: String, reflect: true })
@@ -51,7 +51,15 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    constructor() {
+        super()
+        this._handleAlphaChange = this._handleAlphaChange.bind(this)
+        this._handleHueChange = this._handleHueChange.bind(this)
+        this._handleApply = this._handleApply.bind(this)
+        this._cancel = this._cancel.bind(this)
+        this._handleSaturationLightnessClick = this._handleSaturationLightnessClick.bind(this)
 
+    }
     protected update(changedProperties: PropertyValues): void {
         if (changedProperties.has("value")) {
             let { h, s, l, a } = hexToHsl(this.value)
@@ -85,7 +93,8 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
                 y += ypix;
         }
     }
-    _handleSaturationLightnessClick = (e: PointerEvent) => {
+    @eventOptions({ capture: true })
+    _handleSaturationLightnessClick(e: PointerEvent) {
         if (!this.canvas.value) {
             return
         }
@@ -94,30 +103,44 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
         this.lightness = (this.canvas.value.height - offsetY) / this.canvas.value.height
         this.updateValue()
     }
-    _handleHueChange = (e: DomEvent<SpectricInput>) => {
+    @eventOptions({ capture: true })
+    _handleHueChange(e: DomEvent<SpectricInput>) {
+        e.stopPropagation()
         this.hue = (parseInt(String(e.target.value)) / 100) * 360
         e.target.style.setProperty("accent-color", `hsl(${this.hue}deg 100% 50%)`)
         this.renderHueSaturationGrid()
         this.updateValue()
     }
     private updateValue() {
-        this.value = hslToHex(this.hue, this.saturation * 100, this.lightness * 100) + (Math.round(this.alpha * 255).toString(16).padStart(2, "0"))
+        let hex = hslToHex(this.hue, this.saturation * 100, this.lightness * 100) + (Math.round(this.alpha * 255).toString(16).padStart(2, "0"))
+        this.value = hex
     }
-    _handleAlphaChange = (e: DomEvent<SpectricInput>) => {
+    @eventOptions({ capture: true })
+    _handleAlphaChange(e: DomEvent<SpectricInput>) {
+        e.stopPropagation()
         this.alpha = parseInt(String(e.target.value)) / 100
         this.updateValue()
     }
-    _handleApply = () => {
+    @eventOptions({ capture: true })
+    _handleApply() {
         this.updateValue()
         this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
+        this.dispatchEvent(new Event("change", { bubbles: true }))
     }
-    _cancel = () => {
+    @eventOptions({ capture: true })
+    _cancel() {
         if (this.original) {
             this.value = this.original
         }
         this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
+        this.dispatchEvent(new Event("cancel"))
     }
-    _openPopover = async () => {
+    @eventOptions({ capture: true })
+    async _openPopover() {
+        let popover = this.querySelector<PopoverElement>("spectric-popover")
+        if (!popover || popover.isOpen()) {
+            return
+        }
         this.original = this.value
         this.querySelector<PopoverElement>("spectric-popover")?.showPopover()
         while (!this.canvas.value) {
@@ -129,13 +152,21 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
         return html`
                 <spectric-input label="Hue" class="hue-gradient" variant="range" .value=${this.hue || 0} style="accent-color:hsl(${this.hue}deg 100% 50%)" @change=${this._handleHueChange}></spectric-input>
                 <canvas ${ref(this.canvas)} width=200 height=100 class="color-picker-saturation-lightness-grid" @click=${this._handleSaturationLightnessClick}
-                 @mousedown=${() => { this.sldown = true }} 
-                 @mouseup=${() => this.sldown = false}
+                 @mousedown=${(e: MouseEvent) => {
+                this.sldown = true
+                e.preventDefault()
+                e.stopPropagation()
+            }} 
+                 @mouseup=${(e: MouseEvent) => {
+                this.sldown = false
+                e.preventDefault()
+                e.stopPropagation()
+            }}
                  @mousemove=${(e: PointerEvent) => { if (this.sldown) { this._handleSaturationLightnessClick(e) } }}
                  ></canvas>
                 <spectric-input class="alpha-gradient" ?hidden=${!this.showAlpha} label="Opacity" variant="range" .value=${(this.alpha || 1) * 100} @change=${this._handleAlphaChange}></spectric-input>
                 <div class="color-picker-footer">
-                    <spectric-button ?hidden=${eyedropper === undefined} icon class="color-picker-eyedropper" @click=${async () => {
+                    <spectric-button icon class="color-picker-eyedropper ${eyedropper === undefined ? "hidden" : ""}" @click=${async () => {
                 if (eyedropper) {
                     let result = await eyedropper?.open()
                     let { h, s, l, a } = hexToHsl(result.sRGBHex);
@@ -154,7 +185,7 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
 
     protected render(): unknown {
         return html`
-        <spectric-button variant="text" @click=${this._openPopover} icon>
+        <spectric-button variant="secondary" @click=${this._openPopover} icon>
             <spectric-popover .text=${this.getPopover()} icon variant="text"></spectric-popover>
             <div style="width:15px;height:15px;background-color:${this.value}"></div>
         </spectric-button>

package/src/components/index.ts

@@ -12,4 +12,5 @@ export * from "./pagination"
 export * from "./table"
 export * from "./tooltip"
 export * from "./types"
-export * from "./color_picker"
+export * from "./color_picker"
+export * from "./calendar"

package/src/components/input.css

@@ -69,7 +69,7 @@ spectric-input #helper-text {
 spectric-input #helper-text.hidden {
     display: none;
 }
-spectric-input[variant="password"] spectric-button {
+spectric-input .input-button-right {
     position: absolute;
     right: 4px;
     bottom: 3px;