@spectric/ui 0.0.17 → 0.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ThemeProvider.d.ts +1 -0
- package/dist/components/pagination/pagination.d.ts +1 -1
- package/dist/components/table/virtualBody.d.ts +2 -1
- package/dist/custom-elements.json +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +719 -675
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +70 -67
- package/dist/index.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/Button.ts +1 -1
- package/src/components/ThemeProvider.ts +34 -1
- package/src/components/button.css.ts +2 -2
- package/src/components/color_picker/ColorPicker.css +36 -0
- package/src/components/color_picker/ColorPicker.ts +31 -7
- package/src/components/input.css +4 -33
- package/src/components/input.ts +4 -2
- package/src/components/pagination/pagination.ts +2 -2
- package/src/components/table/__tests__/table.spec.ts +1 -1
- package/src/components/table/header.ts +0 -3
- package/src/components/table/table.ts +1 -1
- package/src/components/table/virtualBody.ts +16 -5
- package/src/components/tooltip/popover.ts +7 -7
- package/src/components/tooltip/tooltip.css +1 -1
- package/src/components/tooltip/tooltip.ts +1 -0
- package/src/stories/fixtures/ExampleContent.ts +1 -0
- package/src/stories/table.stories.ts +1 -2
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input
|
|
1
|
+
spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input #helper-text.hidden{display:none}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-input spectric-colorpicker{display:block}spectric-input[variant=color] .fieldwrapper{display:inline-block}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden;line-height:1}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table spectric-table-virtual-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table tr{height:var(--rowHeight)}spectric-table td{height:var(--rowHeight);padding:1px;border:1px solid transparent}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px;z-index:1}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}spectric-table .cell-contents{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lineClamp,1);-webkit-box-pack:center;overflow:hidden;text-overflow:ellipsis;font-size:var(--fontSize);height:calc(var(--lineClamp) * var(--fontSize))}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle;position:relative}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:2px;top:calc(50% - 8px)}spectric-table-header .header-contents.sortable{cursor:pointer;padding-right:15px}spectric-table-header .header-contents.resizing{-webkit-user-select:none;user-select:none}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table-header td .header-resize-handle{width:2px;position:absolute;right:-1px;top:1px;visibility:hidden;background-color:var(--spectric-primary, #1ea7fd);height:100%;cursor:ew-resize;z-index:1}spectric-table-header td:hover .header-resize-handle{visibility:visible}spectric-table-header td:hover:has(*.header-resize-handle){border-bottom:1px solid var(--spectric-primary, #1ea7fd)}spectric-table-body{display:table-row-group}spectric-table-virtual-body{display:contents}spectric-table-virtual-body .virtual-scroll-spacer td{padding:0;border:0px}.spectric-popover-portal{position:fixed;z-index:9999;--spectric-tooltip-background-color: var(--spectric-tooltip-background, var(--spectric-background,#000000));--spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, white));--spectric-tooltip-accent-color: var(--spectric-tooltip-accent, var(--spectric-primary, #1ea7fd))}.spectric-popover-portal.spectric-tooltip-portal{pointer-events:none}.spectric-popover-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-popover-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-popover-portal.bottom .tooltip-container{flex-direction:column}.spectric-popover-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-popover-portal .tooltip-content{background:var(--spectric-tooltip-background-color);border-radius:var(--spectric-border-radius,.4em);border:1px solid color-mix(in srgb,var(--spectric-tooltip-background-color) 90%,var(--spectric-tooltip-accent-color) 90%);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-tooltip-accent-color) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-tooltip-text-color)}.spectric-popover-portal .tooltip-caret{background:color-mix(in srgb,var(--spectric-tooltip-background-color) 90%,var(--spectric-tooltip-accent-color) 90%)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-popover-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-popover-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-popover-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-popover-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}spectric-input.hue-gradient input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}spectric-input.alpha-gradient input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#fff0,#fff),repeating-conic-gradient(#fff,#fff 25%,#000 25%,#000 50%,#fff 50%,#fff 75%,#000 75%,#000) 50% / 10px 10px}spectric-input.alpha-gradient input[type=range],spectric-input.hue-gradient input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker-footer{display:flex;justify-content:space-evenly}.color-picker-saturation-lightness-grid{cursor:crosshair}.color-picker-eyedropper{--button-border-radius:50% }
|
package/package.json
CHANGED
package/src/components/Button.ts
CHANGED
|
@@ -93,7 +93,7 @@ export class SpectricButton extends DisposableElement implements ButtonProps {
|
|
|
93
93
|
protected render(): unknown {
|
|
94
94
|
const mode = MODES[this.variant] || 'spectric-button--primary';
|
|
95
95
|
return html`
|
|
96
|
-
${this.tooltip ? html`<spectric-tooltip .text=${this.tooltip} .position=${this.tooltipPosition || "right"} .triggerTarget=${this}></spectric-tooltip>` : null}
|
|
96
|
+
${this.tooltip && this.tooltip !== "" ? html`<spectric-tooltip .text=${this.tooltip} .position=${this.tooltipPosition || "right"} .triggerTarget=${this}></spectric-tooltip>` : null}
|
|
97
97
|
<button
|
|
98
98
|
type="button"
|
|
99
99
|
?disabled=${this.disabled}
|
|
@@ -65,7 +65,40 @@ type ThemeProps = {
|
|
|
65
65
|
theme?: KnownThemes
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
export const SPECTRIC_CSS_VARIABLES = ["--spectric-background",
|
|
69
|
+
"--spectric-background-hover",
|
|
70
|
+
"--spectric-background-inverse",
|
|
71
|
+
"--spectric-background-inverse-hover",
|
|
72
|
+
"--spectric-border-radius",
|
|
73
|
+
"--spectric-primary",
|
|
74
|
+
"--spectric-secondary",
|
|
75
|
+
"--spectric-tertiary",
|
|
76
|
+
"--spectric-disabled",
|
|
77
|
+
"--panel-color",
|
|
78
|
+
"--panel-color-inverse",
|
|
79
|
+
"--spectric-border-disabled",
|
|
80
|
+
"--spectric-input-color",
|
|
81
|
+
"--spectric-input-bottom",
|
|
82
|
+
"--spectric-text-on-color",
|
|
83
|
+
"--spectric-text-on-color-disabled",
|
|
84
|
+
"--spectric-text-placeholder",
|
|
85
|
+
"--spectric-text-primary",
|
|
86
|
+
"--spectric-text-secondary",
|
|
87
|
+
"--spectric-button-separator",
|
|
88
|
+
"--spectric-button-primary",
|
|
89
|
+
"--spectric-button-secondary",
|
|
90
|
+
"--spectric-button-tertiary",
|
|
91
|
+
"--spectric-button-danger-primary",
|
|
92
|
+
"--spectric-button-danger-secondary",
|
|
93
|
+
"--spectric-button-danger-active",
|
|
94
|
+
"--spectric-button-primary-active",
|
|
95
|
+
"--spectric-button-secondary-active",
|
|
96
|
+
"--spectric-button-tertiary-active",
|
|
97
|
+
"--spectric-button-danger-hover",
|
|
98
|
+
"--spectric-button-primary-hover",
|
|
99
|
+
"--spectric-button-secondary-hover",
|
|
100
|
+
"--spectric-button-tertiary-hover",
|
|
101
|
+
"--spectric-text-on-color-disabled"]
|
|
69
102
|
const theme = `
|
|
70
103
|
--spectric-background: var(--background,#ffffff);
|
|
71
104
|
--spectric-background-hover:var(--background-hover,rgba(141, 141, 141, 0.12));
|
|
@@ -1,4 +1,40 @@
|
|
|
1
|
+
spectric-input.hue-gradient input[type="range"]::-webkit-slider-runnable-track {
|
|
2
|
+
background: linear-gradient(
|
|
3
|
+
to right,
|
|
4
|
+
hsl(0, 100%, 50%), /* Red */
|
|
5
|
+
hsl(60, 100%, 50%), /* Yellow */
|
|
6
|
+
hsl(120, 100%, 50%), /* Green */
|
|
7
|
+
hsl(180, 100%, 50%), /* Cyan */
|
|
8
|
+
hsl(240, 100%, 50%), /* Blue */
|
|
9
|
+
hsl(300, 100%, 50%), /* Magenta */
|
|
10
|
+
hsl(360, 100%, 50%) /* Red (completes the circle) */
|
|
11
|
+
)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
spectric-input.alpha-gradient input[type="range"]::-webkit-slider-runnable-track {
|
|
15
|
+
background:
|
|
16
|
+
/* Alpha gradient from transparent to opaque */
|
|
17
|
+
linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%),
|
|
18
|
+
/* Checkerboard */
|
|
19
|
+
repeating-conic-gradient(
|
|
20
|
+
#fff 0% 25%, /* White for the first quarter */
|
|
21
|
+
#000 25% 50%, /* Black for the second quarter */
|
|
22
|
+
#fff 50% 75%, /* White for the third quarter */
|
|
23
|
+
#000 75% 100% /* Black for the fourth quarter */
|
|
24
|
+
) 50% / 10px 10px;
|
|
25
|
+
|
|
26
|
+
}
|
|
27
|
+
spectric-input.alpha-gradient input[type="range"],spectric-input.hue-gradient input[type="range"]{ -webkit-appearance: none; /* For WebKit browsers (Chrome, Safari) */
|
|
28
|
+
-moz-appearance: none; /* For Mozilla Firefox */
|
|
29
|
+
appearance: none; /* Standard property */}
|
|
30
|
+
|
|
1
31
|
.color-picker-footer{
|
|
2
32
|
display: flex;
|
|
3
33
|
justify-content: space-evenly;
|
|
34
|
+
}
|
|
35
|
+
.color-picker-saturation-lightness-grid{
|
|
36
|
+
cursor: crosshair;
|
|
37
|
+
}
|
|
38
|
+
.color-picker-eyedropper{
|
|
39
|
+
--button-border-radius:50%
|
|
4
40
|
}
|
|
@@ -12,6 +12,23 @@ export interface ColorPickerProps {
|
|
|
12
12
|
showAlpha?: boolean
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
+
//Not all browsers support eyedropper
|
|
16
|
+
interface EyeDropper {
|
|
17
|
+
new(): EyeDropper;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Opens the eyedropper mode, allowing the user to select a color from the screen.
|
|
21
|
+
* Returns a Promise that resolves with an object containing the selected color in sRGB hexadecimal format.
|
|
22
|
+
* The Promise rejects if the user cancels the eyedropper mode (e.g., by pressing Escape).
|
|
23
|
+
*/
|
|
24
|
+
open(): Promise<{ sRGBHex: string }>;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
declare var EyeDropper: EyeDropper;
|
|
28
|
+
let eyedropper: EyeDropper | undefined
|
|
29
|
+
// if (window.hasOwnProperty("EyeDropper")) {
|
|
30
|
+
// eyedropper = new EyeDropper()
|
|
31
|
+
// }
|
|
15
32
|
@customElement('spectric-colorpicker')
|
|
16
33
|
export class SpectricColorPicker extends LitElement implements ColorPickerProps {
|
|
17
34
|
@property({ type: String, reflect: true })
|
|
@@ -47,7 +64,6 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
|
|
|
47
64
|
super.update(changedProperties)
|
|
48
65
|
}
|
|
49
66
|
private renderHueSaturationGrid() {
|
|
50
|
-
console.log("canvas render")
|
|
51
67
|
if (!this.canvas.value) {
|
|
52
68
|
return
|
|
53
69
|
}
|
|
@@ -89,13 +105,10 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
|
|
|
89
105
|
}
|
|
90
106
|
_handleAlphaChange = (e: DomEvent<SpectricInput>) => {
|
|
91
107
|
this.alpha = parseInt(String(e.target.value)) / 100
|
|
92
|
-
console.log(this.alpha, e)
|
|
93
108
|
this.updateValue()
|
|
94
109
|
}
|
|
95
110
|
_handleApply = () => {
|
|
96
|
-
console.log(this.hue, this.saturation, this.lightness, this.alpha)
|
|
97
111
|
this.updateValue()
|
|
98
|
-
console.log(this.value)
|
|
99
112
|
this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
|
|
100
113
|
}
|
|
101
114
|
_cancel = () => {
|
|
@@ -115,13 +128,24 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
|
|
|
115
128
|
protected getPopover(): TemplateResult {
|
|
116
129
|
return html`
|
|
117
130
|
<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>
|
|
118
|
-
<canvas ${ref(this.canvas)} width=200 height=100 class="saturation-lightness-grid" @click=${this._handleSaturationLightnessClick}
|
|
131
|
+
<canvas ${ref(this.canvas)} width=200 height=100 class="color-picker-saturation-lightness-grid" @click=${this._handleSaturationLightnessClick}
|
|
119
132
|
@mousedown=${() => { this.sldown = true }}
|
|
120
133
|
@mouseup=${() => this.sldown = false}
|
|
121
134
|
@mousemove=${(e: PointerEvent) => { if (this.sldown) { this._handleSaturationLightnessClick(e) } }}
|
|
122
135
|
></canvas>
|
|
123
136
|
<spectric-input class="alpha-gradient" ?hidden=${!this.showAlpha} label="Opacity" variant="range" .value=${(this.alpha || 1) * 100} @change=${this._handleAlphaChange}></spectric-input>
|
|
124
137
|
<div class="color-picker-footer">
|
|
138
|
+
<spectric-button ?hidden=${eyedropper === undefined} icon class="color-picker-eyedropper" @click=${async () => {
|
|
139
|
+
if (eyedropper) {
|
|
140
|
+
let result = await eyedropper?.open()
|
|
141
|
+
let { h, s, l, a } = hexToHsl(result.sRGBHex);
|
|
142
|
+
this.hue = h
|
|
143
|
+
this.saturation = s
|
|
144
|
+
this.lightness = l
|
|
145
|
+
this.alpha = a
|
|
146
|
+
this.updateValue()
|
|
147
|
+
}
|
|
148
|
+
}}>${eyedropper_icon}</spectric-button>
|
|
125
149
|
<spectric-button @click=${this._handleApply}>Apply</spectric-button>
|
|
126
150
|
<spectric-button variant="secondary" @click=${this._cancel}>Cancel</spectric-button>
|
|
127
151
|
</div>
|
|
@@ -130,14 +154,14 @@ export class SpectricColorPicker extends LitElement implements ColorPickerProps
|
|
|
130
154
|
|
|
131
155
|
protected render(): unknown {
|
|
132
156
|
return html`
|
|
133
|
-
<spectric-button variant="text" @click=${this._openPopover}>
|
|
157
|
+
<spectric-button variant="text" @click=${this._openPopover} icon>
|
|
134
158
|
<spectric-popover .text=${this.getPopover()} icon variant="text"></spectric-popover>
|
|
135
159
|
<div style="width:15px;height:15px;background-color:${this.value}"></div>
|
|
136
160
|
</spectric-button>
|
|
137
161
|
`;
|
|
138
162
|
}
|
|
139
163
|
}
|
|
140
|
-
|
|
164
|
+
const eyedropper_icon = html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" height="15" width="15" fill="currentColor"><path d="M222,67.34a33.81,33.81,0,0,0-10.64-24.25C198.12,30.56,176.68,31,163.54,44.18L142.82,65l-.63-.63a22,22,0,0,0-31.11,0l-9,9a14,14,0,0,0,0,19.81l3.47,3.47L53.14,149.1a37.79,37.79,0,0,0-9.84,36.73l-8.31,19a11.68,11.68,0,0,0,2.46,13A13.91,13.91,0,0,0,47.32,222,14.15,14.15,0,0,0,53,220.82L71,212.92a37.92,37.92,0,0,0,35.84-10.07l52.44-52.46,3.47,3.48a14,14,0,0,0,19.8,0l9-9a22,22,0,0,0,0-31.12l-.66-.66L212,91.85A33.76,33.76,0,0,0,222,67.34Zm-123.61,127a26,26,0,0,1-26,6.47,6,6,0,0,0-4.16.24l-20,8.75a2,2,0,0,1-2.09-.31l9.12-20.9a5.94,5.94,0,0,0,.19-4.31,25.88,25.88,0,0,1,6.26-26.72l52.44-52.45,36.76,36.78Zm105.16-111L178.17,108.9a6,6,0,0,0,0,8.47l4.88,4.89a10,10,0,0,1,0,14.15l-9,9a2,2,0,0,1-2.82,0l-60.69-60.7a2,2,0,0,1,0-2.83l9-9a10,10,0,0,1,14.14,0l4.89,4.89a6,6,0,0,0,4.24,1.75h0a6,6,0,0,0,4.25-1.77L172,52.66c8.58-8.58,22.52-9,31.08-.85a22,22,0,0,1,.44,31.57Z"/></svg>`
|
|
141
165
|
function* hslGen(hue: number) {
|
|
142
166
|
for (let l = 100; l >= 0; l--) {
|
|
143
167
|
for (let s = 0; s <= 100; s++) {
|
package/src/components/input.css
CHANGED
|
@@ -14,39 +14,6 @@ spectric-input {
|
|
|
14
14
|
spectric-input .inputWrapper {
|
|
15
15
|
color: var(--text-secondary)
|
|
16
16
|
}
|
|
17
|
-
spectric-input.hue-gradient input[type="range"]::-webkit-slider-runnable-track {
|
|
18
|
-
background: linear-gradient(
|
|
19
|
-
to right,
|
|
20
|
-
hsl(0, 100%, 50%), /* Red */
|
|
21
|
-
hsl(60, 100%, 50%), /* Yellow */
|
|
22
|
-
hsl(120, 100%, 50%), /* Green */
|
|
23
|
-
hsl(180, 100%, 50%), /* Cyan */
|
|
24
|
-
hsl(240, 100%, 50%), /* Blue */
|
|
25
|
-
hsl(300, 100%, 50%), /* Magenta */
|
|
26
|
-
hsl(360, 100%, 50%) /* Red (completes the circle) */
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.saturation-lightness-grid {
|
|
31
|
-
/* Assuming a fixed hue, e.g., 240 (blue) */
|
|
32
|
-
background: linear-gradient(to right,
|
|
33
|
-
hsl(var(--accent-color), 0%, 50%), /* From desaturated */
|
|
34
|
-
hsl(var(--accent-color), 100%, 50%) /* To fully saturated */
|
|
35
|
-
),
|
|
36
|
-
linear-gradient(to top,
|
|
37
|
-
hsl(var(--accent-color), 100%, 0%), /* From dark */
|
|
38
|
-
hsl(var(--accent-color), 100%, 50%), /* To mid-lightness */
|
|
39
|
-
hsl(var(--accent-color), 100%, 100%) /* To bright */
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
spectric-input.alpha-gradient input[type="range"]::-webkit-slider-runnable-track {
|
|
43
|
-
background-image:
|
|
44
|
-
/* Alpha gradient from transparent to opaque */
|
|
45
|
-
linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
|
46
|
-
}
|
|
47
|
-
spectric-input.alpha-gradient input[type="range"],spectric-input.hue-gradient input[type="range"]{ -webkit-appearance: none; /* For WebKit browsers (Chrome, Safari) */
|
|
48
|
-
-moz-appearance: none; /* For Mozilla Firefox */
|
|
49
|
-
appearance: none; /* Standard property */}
|
|
50
17
|
spectric-input .inputWrapper input {
|
|
51
18
|
box-sizing: border-box;
|
|
52
19
|
margin: 0px;
|
|
@@ -114,4 +81,8 @@ spectric-input .checkbox{
|
|
|
114
81
|
}
|
|
115
82
|
spectric-input spectric-colorpicker{
|
|
116
83
|
display: block;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
spectric-input[variant="color"] .fieldwrapper{
|
|
87
|
+
display: inline-block;
|
|
117
88
|
}
|
package/src/components/input.ts
CHANGED
|
@@ -332,11 +332,13 @@ export class SpectricInput extends LitElement implements InputProps {
|
|
|
332
332
|
|
|
333
333
|
return html`
|
|
334
334
|
<div class="checkbox">
|
|
335
|
-
<spectric-button
|
|
335
|
+
<spectric-button
|
|
336
|
+
.tooltip=${this.helperText}
|
|
337
|
+
@click=${() => {
|
|
336
338
|
this.checked = !this.checked;
|
|
337
339
|
this.value = Boolean(this.checked);
|
|
338
340
|
}} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"}>${this.checked ? '✓' : "\u00A0"}</spectric-button>
|
|
339
|
-
|
|
341
|
+
|
|
340
342
|
${this.label}
|
|
341
343
|
</div>
|
|
342
344
|
</label>
|
|
@@ -18,7 +18,6 @@ interface PaginationProps extends PaginationChangeProps {
|
|
|
18
18
|
pageSizeOptions?: number[]
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
console.log("Pagination")
|
|
22
21
|
|
|
23
22
|
/**
|
|
24
23
|
* Pagination Element
|
|
@@ -47,7 +46,7 @@ export class PaginationElement extends LitElement implements PaginationProps {
|
|
|
47
46
|
protected createRenderRoot(): HTMLElement | DocumentFragment {
|
|
48
47
|
return this
|
|
49
48
|
}
|
|
50
|
-
protected
|
|
49
|
+
protected update(_changedProperties: PropertyValues): void {
|
|
51
50
|
if (_changedProperties.has("pageSize") && !this.pageSizeOptions.includes(this.pageSize)) {
|
|
52
51
|
this.pageSizeOptions = [...this.pageSizeOptions, this.pageSize].sort((a, b) => a - b)
|
|
53
52
|
/**
|
|
@@ -60,6 +59,7 @@ export class PaginationElement extends LitElement implements PaginationProps {
|
|
|
60
59
|
}
|
|
61
60
|
})
|
|
62
61
|
}
|
|
62
|
+
super.update(_changedProperties)
|
|
63
63
|
}
|
|
64
64
|
private _handlePageUp = () => {
|
|
65
65
|
this.page += 1
|
|
@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/test';
|
|
|
2
2
|
import type { SpectricTableElement, TableEvents } from '../index';
|
|
3
3
|
import type SpectricModule from "../../../index.ts"
|
|
4
4
|
test.beforeEach(async ({ page }) => {
|
|
5
|
+
page.on('console', msg => { console.log(`Page[${msg.type()}]:` + msg.text()) });
|
|
5
6
|
await page.addInitScript(() => {
|
|
6
7
|
//@ts-ignore
|
|
7
8
|
window.awaitEvent = function awaitEvent(target, event, trigger) {
|
|
@@ -26,7 +27,6 @@ test.describe("Spectric Table Tests", () => {
|
|
|
26
27
|
tableLocator.waitFor()
|
|
27
28
|
var selected = await tableLocator.evaluate<number, SpectricTableElement>(
|
|
28
29
|
async (table) => {
|
|
29
|
-
console.log("here")
|
|
30
30
|
let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-header spectric-input[variant='checkbox'] spectric-button")[0]
|
|
31
31
|
let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
|
|
32
32
|
return event.detail.length
|
|
@@ -71,8 +71,6 @@ export class TableHeaderElement<T>
|
|
|
71
71
|
return;
|
|
72
72
|
}
|
|
73
73
|
let delta = e.pageX - this._resizeStart?.event.pageX;
|
|
74
|
-
let before = this._resizeStart.column.width;
|
|
75
|
-
console.log(delta);
|
|
76
74
|
if (this._resizeStart.column.width) {
|
|
77
75
|
this._resizeStart.column.width = this._resizeStart.column.width + delta;
|
|
78
76
|
} else {
|
|
@@ -82,7 +80,6 @@ export class TableHeaderElement<T>
|
|
|
82
80
|
this._resizeStart.column.width =
|
|
83
81
|
cell.getBoundingClientRect().width + delta;
|
|
84
82
|
}
|
|
85
|
-
console.log(before, this._resizeStart.column.width);
|
|
86
83
|
this.dispatchEvent(
|
|
87
84
|
new CustomEvent("columnResize", { detail: this._resizeStart.column })
|
|
88
85
|
);
|
|
@@ -231,7 +231,7 @@ export class SpectricTableElement<T = any> extends LitElement implements TablePr
|
|
|
231
231
|
render: (row) => {
|
|
232
232
|
let container = document.createElement("div")
|
|
233
233
|
let checked = this.selected.includes(row)
|
|
234
|
-
let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" ${spreadProps({ checked })} @change=${(e: DomEvent<HTMLInputElement>) => {
|
|
234
|
+
let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" .helperText=${""} ${spreadProps({ checked })} @change=${(e: DomEvent<HTMLInputElement>) => {
|
|
235
235
|
e.stopPropagation()
|
|
236
236
|
let index = this.selected.findIndex(value => value === row)
|
|
237
237
|
if (e.target.checked && index !== -1) {
|
|
@@ -30,6 +30,7 @@ export class TableVirtualBodyElement<T> extends DisposableElement implements Bod
|
|
|
30
30
|
startIndex: number = 0
|
|
31
31
|
|
|
32
32
|
table!: SpectricTableElement<T>
|
|
33
|
+
columnsMeasured: boolean = false;
|
|
33
34
|
constructor() {
|
|
34
35
|
super()
|
|
35
36
|
this.addDisposableListener(() => this.table.querySelector(".table-wrapper")!, "scroll", () => {
|
|
@@ -39,12 +40,22 @@ export class TableVirtualBodyElement<T> extends DisposableElement implements Bod
|
|
|
39
40
|
})
|
|
40
41
|
})
|
|
41
42
|
}
|
|
42
|
-
protected
|
|
43
|
-
this.
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
protected updated(): void {
|
|
44
|
+
if (this.columnsMeasured === false) {
|
|
45
|
+
let tr = this.querySelector("tr");
|
|
46
|
+
let cells = tr?.querySelectorAll("spectric-table-cell td")
|
|
47
|
+
if (tr && cells && cells.length) {
|
|
48
|
+
this.columns.forEach((col, index) => {
|
|
49
|
+
if (!col.width || col.width === 0) {
|
|
50
|
+
let rect = cells[index].getBoundingClientRect()
|
|
51
|
+
if (rect.width > 0) {
|
|
52
|
+
this.columnsMeasured = true
|
|
53
|
+
col.width = rect.width
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
})
|
|
46
57
|
}
|
|
47
|
-
}
|
|
58
|
+
}
|
|
48
59
|
}
|
|
49
60
|
protected createRenderRoot(): HTMLElement | DocumentFragment {
|
|
50
61
|
return this
|
|
@@ -5,6 +5,7 @@ export const PopoverElementTag = "spectric-popover"
|
|
|
5
5
|
import { css, CSSResultGroup, html, render } from "lit-element";
|
|
6
6
|
import { DomRenderable } from "../table";
|
|
7
7
|
import { DisposableElement } from '../../classes/DisposibleElement';
|
|
8
|
+
import { SPECTRIC_CSS_VARIABLES } from '../ThemeProvider';
|
|
8
9
|
export type { TooltipProps, TooltipEvents }
|
|
9
10
|
export enum TooltipPostions {
|
|
10
11
|
top = "top",
|
|
@@ -94,7 +95,6 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
|
|
|
94
95
|
super.connectedCallback()
|
|
95
96
|
this.portalElement = document.createElement("div")
|
|
96
97
|
this.portalElement.className = "spectric-tooltip-portal"
|
|
97
|
-
console.log("connected")
|
|
98
98
|
}
|
|
99
99
|
disconnectedCallback(): void {
|
|
100
100
|
super.disconnectedCallback();
|
|
@@ -158,13 +158,13 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
|
|
|
158
158
|
}
|
|
159
159
|
//Since we are attaching to a body we need to send the correct styles from the target portion of the dom to the portal element
|
|
160
160
|
let computedStyle = getComputedStyle(this)
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
"--spectric-background-hover": computedStyle.getPropertyValue("--spectric-background-hover"),
|
|
165
|
-
"--spectric-text-on-color": computedStyle.getPropertyValue("--spectric-text-on-color"),
|
|
166
|
-
"--spectric-border-radius": computedStyle.getPropertyValue("--spectric-border-radius"),
|
|
161
|
+
|
|
162
|
+
let styles: Record<string, string> = {
|
|
163
|
+
|
|
167
164
|
}
|
|
165
|
+
SPECTRIC_CSS_VARIABLES.forEach(v => {
|
|
166
|
+
styles[v] = computedStyle.getPropertyValue(v)
|
|
167
|
+
})
|
|
168
168
|
const bounds = this.target.getBoundingClientRect()
|
|
169
169
|
const portalBounds = this.portalElement.getBoundingClientRect()
|
|
170
170
|
if (this.target !== document.body) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.spectric-popover-portal{
|
|
2
2
|
position: fixed;
|
|
3
3
|
z-index: 9999;
|
|
4
|
-
--spectric-tooltip-background-color: var(--spectric-tooltip-background,
|
|
4
|
+
--spectric-tooltip-background-color: var(--spectric-tooltip-background, var(--spectric-background,#000000));
|
|
5
5
|
--spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, white));
|
|
6
6
|
--spectric-tooltip-accent-color: var(--spectric-tooltip-accent, var(--spectric-primary, #1ea7fd));
|
|
7
7
|
}
|
|
@@ -81,6 +81,7 @@ export class TooltipElement extends PopoverElement implements TooltipProps {
|
|
|
81
81
|
triggerTarget!: HTMLElement;
|
|
82
82
|
constructor() {
|
|
83
83
|
super()
|
|
84
|
+
this.showToolTip = this.showToolTip.bind(this)
|
|
84
85
|
this.addDisposableListener(() => this.target, "mouseover", this.showToolTip)
|
|
85
86
|
this.addDisposableListener(() => this.target, "mouseleave", this.hidePopover)
|
|
86
87
|
}
|
|
@@ -131,6 +131,7 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
|
|
|
131
131
|
</spectric-panel>
|
|
132
132
|
<div style="display:flex">
|
|
133
133
|
<span style="flex-grow:1"></span>
|
|
134
|
+
<spectric-input variant="color" .value=${"#00FF00"}></spectric-input>
|
|
134
135
|
<spectric-button size="small" danger @click=${() => {
|
|
135
136
|
this.dialogOpen = true
|
|
136
137
|
this.requestUpdate()
|
|
@@ -27,12 +27,11 @@ const meta = {
|
|
|
27
27
|
select=${ifDefined(args.select)}
|
|
28
28
|
sort=${ifDefined(args.sort)}
|
|
29
29
|
rowHeight=${ifDefined(args.rowHeight)}
|
|
30
|
-
@selected=${(e) =>
|
|
30
|
+
@selected=${(e) => { }}
|
|
31
31
|
@filter=${(e: CustomEvent<FilterEvent<any>>) => {
|
|
32
32
|
alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
|
|
33
33
|
}}
|
|
34
34
|
@change=${(e: CustomEvent<TableDataOptions<typeof tabledata[0]>>) => {
|
|
35
|
-
console.log(e)
|
|
36
35
|
updateArgs({ ...e.detail });
|
|
37
36
|
if (e.target && e.target instanceof SpectricTableElement) {
|
|
38
37
|
e.target.data = getData({ ...args, ...e.detail })
|