juxscript 1.0.4 → 1.0.5
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/README.md +1 -1
- package/lib/components/barchart.ts +1248 -0
- package/lib/components/checkbox.ts +8 -37
- package/lib/components/docs-data.json +242 -5
- package/lib/components/input.ts +347 -4
- package/lib/components/select.ts +73 -40
- package/lib/components/sidebar.ts +1 -1
- package/lib/jux.ts +8 -2
- package/lib/presets/notion.css +1 -1
- package/lib/themes/charts.js +126 -0
- package/package.json +1 -1
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { getOrCreateContainer } from './helpers.js';
|
|
2
2
|
import { State } from '../reactivity/state.js';
|
|
3
3
|
|
|
4
|
-
/**
|
|
5
|
-
* Checkbox component options
|
|
6
|
-
*/
|
|
7
4
|
export interface CheckboxOptions {
|
|
8
5
|
label?: string;
|
|
9
6
|
checked?: boolean;
|
|
@@ -15,9 +12,6 @@ export interface CheckboxOptions {
|
|
|
15
12
|
class?: string;
|
|
16
13
|
}
|
|
17
14
|
|
|
18
|
-
/**
|
|
19
|
-
* Checkbox component state
|
|
20
|
-
*/
|
|
21
15
|
type CheckboxState = {
|
|
22
16
|
label: string;
|
|
23
17
|
checked: boolean;
|
|
@@ -28,20 +22,6 @@ type CheckboxState = {
|
|
|
28
22
|
class: string;
|
|
29
23
|
};
|
|
30
24
|
|
|
31
|
-
/**
|
|
32
|
-
* Checkbox component - Boolean input with label
|
|
33
|
-
*
|
|
34
|
-
* Usage:
|
|
35
|
-
* jux.checkbox('agree', {
|
|
36
|
-
* label: 'I agree to the terms',
|
|
37
|
-
* checked: false,
|
|
38
|
-
* onChange: (checked) => console.log(checked)
|
|
39
|
-
* }).render('#form');
|
|
40
|
-
*
|
|
41
|
-
* // Two-way binding
|
|
42
|
-
* const agreedState = state(false);
|
|
43
|
-
* jux.checkbox('agree').label('I agree').bind(agreedState).render('#form');
|
|
44
|
-
*/
|
|
45
25
|
export class Checkbox {
|
|
46
26
|
state: CheckboxState;
|
|
47
27
|
container: HTMLElement | null = null;
|
|
@@ -66,10 +46,6 @@ export class Checkbox {
|
|
|
66
46
|
};
|
|
67
47
|
}
|
|
68
48
|
|
|
69
|
-
/* -------------------------
|
|
70
|
-
* Fluent API
|
|
71
|
-
* ------------------------- */
|
|
72
|
-
|
|
73
49
|
label(value: string): this {
|
|
74
50
|
this.state.label = value;
|
|
75
51
|
return this;
|
|
@@ -124,16 +100,18 @@ export class Checkbox {
|
|
|
124
100
|
this._updateElement();
|
|
125
101
|
});
|
|
126
102
|
|
|
127
|
-
// Update state when checkbox changes
|
|
128
|
-
|
|
103
|
+
// Update state when checkbox changes (already handled in onChange)
|
|
104
|
+
const originalOnChange = this._onChange;
|
|
105
|
+
this._onChange = (checked) => {
|
|
106
|
+
stateObj.set(checked);
|
|
107
|
+
if (originalOnChange) {
|
|
108
|
+
originalOnChange(checked);
|
|
109
|
+
}
|
|
110
|
+
};
|
|
129
111
|
|
|
130
112
|
return this;
|
|
131
113
|
}
|
|
132
114
|
|
|
133
|
-
/* -------------------------
|
|
134
|
-
* Helpers
|
|
135
|
-
* ------------------------- */
|
|
136
|
-
|
|
137
115
|
private _updateElement(): void {
|
|
138
116
|
const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
|
|
139
117
|
if (input) {
|
|
@@ -142,17 +120,10 @@ export class Checkbox {
|
|
|
142
120
|
}
|
|
143
121
|
}
|
|
144
122
|
|
|
145
|
-
/**
|
|
146
|
-
* Get current checked state
|
|
147
|
-
*/
|
|
148
123
|
isChecked(): boolean {
|
|
149
124
|
return this.state.checked;
|
|
150
125
|
}
|
|
151
126
|
|
|
152
|
-
/* -------------------------
|
|
153
|
-
* Render
|
|
154
|
-
* ------------------------- */
|
|
155
|
-
|
|
156
127
|
render(targetId?: string): this {
|
|
157
128
|
let container: HTMLElement;
|
|
158
129
|
|
|
@@ -497,6 +497,201 @@
|
|
|
497
497
|
],
|
|
498
498
|
"example": "jux.badge('status', {"
|
|
499
499
|
},
|
|
500
|
+
{
|
|
501
|
+
"name": "Barchart",
|
|
502
|
+
"category": "UI Components",
|
|
503
|
+
"description": "Bar chart data point",
|
|
504
|
+
"constructor": "jux.barchart(id: string, options: BarChartOptions = {})",
|
|
505
|
+
"fluentMethods": [
|
|
506
|
+
{
|
|
507
|
+
"name": "bindTheme",
|
|
508
|
+
"params": "(stateObj)",
|
|
509
|
+
"returns": "this",
|
|
510
|
+
"description": "Set bindTheme"
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"name": "bindStyleMode",
|
|
514
|
+
"params": "(stateObj)",
|
|
515
|
+
"returns": "this",
|
|
516
|
+
"description": "Set bindStyleMode"
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
"name": "bindBorderRadius",
|
|
520
|
+
"params": "(stateObj)",
|
|
521
|
+
"returns": "this",
|
|
522
|
+
"description": "Set bindBorderRadius"
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
"name": "data",
|
|
526
|
+
"params": "(value)",
|
|
527
|
+
"returns": "this",
|
|
528
|
+
"description": "Set data"
|
|
529
|
+
},
|
|
530
|
+
{
|
|
531
|
+
"name": "title",
|
|
532
|
+
"params": "(value)",
|
|
533
|
+
"returns": "this",
|
|
534
|
+
"description": "Set title"
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
"name": "subtitle",
|
|
538
|
+
"params": "(value)",
|
|
539
|
+
"returns": "this",
|
|
540
|
+
"description": "Set subtitle"
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"name": "xAxisLabel",
|
|
544
|
+
"params": "(value)",
|
|
545
|
+
"returns": "this",
|
|
546
|
+
"description": "Set xAxisLabel"
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
"name": "yAxisLabel",
|
|
550
|
+
"params": "(value)",
|
|
551
|
+
"returns": "this",
|
|
552
|
+
"description": "Set yAxisLabel"
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"name": "showTicksX",
|
|
556
|
+
"params": "(value)",
|
|
557
|
+
"returns": "this",
|
|
558
|
+
"description": "Set showTicksX"
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
"name": "showTicksY",
|
|
562
|
+
"params": "(value)",
|
|
563
|
+
"returns": "this",
|
|
564
|
+
"description": "Set showTicksY"
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
"name": "showScaleX",
|
|
568
|
+
"params": "(value)",
|
|
569
|
+
"returns": "this",
|
|
570
|
+
"description": "Set showScaleX"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"name": "showScaleY",
|
|
574
|
+
"params": "(value)",
|
|
575
|
+
"returns": "this",
|
|
576
|
+
"description": "Set showScaleY"
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
"name": "scaleXUnit",
|
|
580
|
+
"params": "(value)",
|
|
581
|
+
"returns": "this",
|
|
582
|
+
"description": "Set scaleXUnit"
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
"name": "scaleYUnit",
|
|
586
|
+
"params": "(value)",
|
|
587
|
+
"returns": "this",
|
|
588
|
+
"description": "Set scaleYUnit"
|
|
589
|
+
},
|
|
590
|
+
{
|
|
591
|
+
"name": "showLegend",
|
|
592
|
+
"params": "(value)",
|
|
593
|
+
"returns": "this",
|
|
594
|
+
"description": "Set showLegend"
|
|
595
|
+
},
|
|
596
|
+
{
|
|
597
|
+
"name": "legendOrientation",
|
|
598
|
+
"params": "(value)",
|
|
599
|
+
"returns": "this",
|
|
600
|
+
"description": "Set legendOrientation"
|
|
601
|
+
},
|
|
602
|
+
{
|
|
603
|
+
"name": "showDataTable",
|
|
604
|
+
"params": "(value)",
|
|
605
|
+
"returns": "this",
|
|
606
|
+
"description": "Set showDataTable"
|
|
607
|
+
},
|
|
608
|
+
{
|
|
609
|
+
"name": "showDataLabels",
|
|
610
|
+
"params": "(value)",
|
|
611
|
+
"returns": "this",
|
|
612
|
+
"description": "Set showDataLabels"
|
|
613
|
+
},
|
|
614
|
+
{
|
|
615
|
+
"name": "animate",
|
|
616
|
+
"params": "(value)",
|
|
617
|
+
"returns": "this",
|
|
618
|
+
"description": "Set animate"
|
|
619
|
+
},
|
|
620
|
+
{
|
|
621
|
+
"name": "animationDuration",
|
|
622
|
+
"params": "(value)",
|
|
623
|
+
"returns": "this",
|
|
624
|
+
"description": "Set animationDuration"
|
|
625
|
+
},
|
|
626
|
+
{
|
|
627
|
+
"name": "chartOrientation",
|
|
628
|
+
"params": "(value)",
|
|
629
|
+
"returns": "this",
|
|
630
|
+
"description": "Set chartOrientation"
|
|
631
|
+
},
|
|
632
|
+
{
|
|
633
|
+
"name": "chartDirection",
|
|
634
|
+
"params": "(value)",
|
|
635
|
+
"returns": "this",
|
|
636
|
+
"description": "Set chartDirection"
|
|
637
|
+
},
|
|
638
|
+
{
|
|
639
|
+
"name": "width",
|
|
640
|
+
"params": "(value)",
|
|
641
|
+
"returns": "this",
|
|
642
|
+
"description": "Set width"
|
|
643
|
+
},
|
|
644
|
+
{
|
|
645
|
+
"name": "height",
|
|
646
|
+
"params": "(value)",
|
|
647
|
+
"returns": "this",
|
|
648
|
+
"description": "Set height"
|
|
649
|
+
},
|
|
650
|
+
{
|
|
651
|
+
"name": "colors",
|
|
652
|
+
"params": "(value)",
|
|
653
|
+
"returns": "this",
|
|
654
|
+
"description": "Set colors"
|
|
655
|
+
},
|
|
656
|
+
{
|
|
657
|
+
"name": "class",
|
|
658
|
+
"params": "(value)",
|
|
659
|
+
"returns": "this",
|
|
660
|
+
"description": "Set class"
|
|
661
|
+
},
|
|
662
|
+
{
|
|
663
|
+
"name": "style",
|
|
664
|
+
"params": "(value)",
|
|
665
|
+
"returns": "this",
|
|
666
|
+
"description": "Set style"
|
|
667
|
+
},
|
|
668
|
+
{
|
|
669
|
+
"name": "theme",
|
|
670
|
+
"params": "(value)",
|
|
671
|
+
"returns": "this",
|
|
672
|
+
"description": "Set theme"
|
|
673
|
+
},
|
|
674
|
+
{
|
|
675
|
+
"name": "styleMode",
|
|
676
|
+
"params": "(value)",
|
|
677
|
+
"returns": "this",
|
|
678
|
+
"description": "Set styleMode"
|
|
679
|
+
},
|
|
680
|
+
{
|
|
681
|
+
"name": "borderRadius",
|
|
682
|
+
"params": "(value)",
|
|
683
|
+
"returns": "this",
|
|
684
|
+
"description": "Set borderRadius"
|
|
685
|
+
},
|
|
686
|
+
{
|
|
687
|
+
"name": "render",
|
|
688
|
+
"params": "(targetId?)",
|
|
689
|
+
"returns": "this",
|
|
690
|
+
"description": "Set render"
|
|
691
|
+
}
|
|
692
|
+
],
|
|
693
|
+
"example": "jux.barchart('sales-chart')"
|
|
694
|
+
},
|
|
500
695
|
{
|
|
501
696
|
"name": "Button",
|
|
502
697
|
"category": "UI Components",
|
|
@@ -656,7 +851,7 @@
|
|
|
656
851
|
{
|
|
657
852
|
"name": "Checkbox",
|
|
658
853
|
"category": "UI Components",
|
|
659
|
-
"description": "
|
|
854
|
+
"description": "Two-way binding to state",
|
|
660
855
|
"constructor": "jux.checkbox(id: string, options: CheckboxOptions = {})",
|
|
661
856
|
"fluentMethods": [
|
|
662
857
|
{
|
|
@@ -720,7 +915,7 @@
|
|
|
720
915
|
"description": "Set renderTo"
|
|
721
916
|
}
|
|
722
917
|
],
|
|
723
|
-
"example": "jux.checkbox('
|
|
918
|
+
"example": "jux.checkbox('id').render()"
|
|
724
919
|
},
|
|
725
920
|
{
|
|
726
921
|
"name": "Code",
|
|
@@ -1492,6 +1687,42 @@
|
|
|
1492
1687
|
"returns": "this",
|
|
1493
1688
|
"description": "Set rows"
|
|
1494
1689
|
},
|
|
1690
|
+
{
|
|
1691
|
+
"name": "min",
|
|
1692
|
+
"params": "(value)",
|
|
1693
|
+
"returns": "this",
|
|
1694
|
+
"description": "Set min"
|
|
1695
|
+
},
|
|
1696
|
+
{
|
|
1697
|
+
"name": "max",
|
|
1698
|
+
"params": "(value)",
|
|
1699
|
+
"returns": "this",
|
|
1700
|
+
"description": "Set max"
|
|
1701
|
+
},
|
|
1702
|
+
{
|
|
1703
|
+
"name": "step",
|
|
1704
|
+
"params": "(value)",
|
|
1705
|
+
"returns": "this",
|
|
1706
|
+
"description": "Set step"
|
|
1707
|
+
},
|
|
1708
|
+
{
|
|
1709
|
+
"name": "minLength",
|
|
1710
|
+
"params": "(value)",
|
|
1711
|
+
"returns": "this",
|
|
1712
|
+
"description": "Set minLength"
|
|
1713
|
+
},
|
|
1714
|
+
{
|
|
1715
|
+
"name": "maxLength",
|
|
1716
|
+
"params": "(value)",
|
|
1717
|
+
"returns": "this",
|
|
1718
|
+
"description": "Set maxLength"
|
|
1719
|
+
},
|
|
1720
|
+
{
|
|
1721
|
+
"name": "pattern",
|
|
1722
|
+
"params": "(value)",
|
|
1723
|
+
"returns": "this",
|
|
1724
|
+
"description": "Set pattern"
|
|
1725
|
+
},
|
|
1495
1726
|
{
|
|
1496
1727
|
"name": "style",
|
|
1497
1728
|
"params": "(value)",
|
|
@@ -2004,7 +2235,7 @@
|
|
|
2004
2235
|
{
|
|
2005
2236
|
"name": "Select",
|
|
2006
2237
|
"category": "UI Components",
|
|
2007
|
-
"description": "
|
|
2238
|
+
"description": "Two-way binding to state",
|
|
2008
2239
|
"constructor": "jux.select(id: string, options: SelectOptions = {})",
|
|
2009
2240
|
"fluentMethods": [
|
|
2010
2241
|
{
|
|
@@ -2031,6 +2262,12 @@
|
|
|
2031
2262
|
"returns": "this",
|
|
2032
2263
|
"description": "Set placeholder"
|
|
2033
2264
|
},
|
|
2265
|
+
{
|
|
2266
|
+
"name": "label",
|
|
2267
|
+
"params": "(value)",
|
|
2268
|
+
"returns": "this",
|
|
2269
|
+
"description": "Set label"
|
|
2270
|
+
},
|
|
2034
2271
|
{
|
|
2035
2272
|
"name": "disabled",
|
|
2036
2273
|
"params": "(value)",
|
|
@@ -2074,7 +2311,7 @@
|
|
|
2074
2311
|
"description": "Set renderTo"
|
|
2075
2312
|
}
|
|
2076
2313
|
],
|
|
2077
|
-
"example": "jux.select('
|
|
2314
|
+
"example": "jux.select('id').render()"
|
|
2078
2315
|
},
|
|
2079
2316
|
{
|
|
2080
2317
|
"name": "Sidebar",
|
|
@@ -2516,5 +2753,5 @@
|
|
|
2516
2753
|
}
|
|
2517
2754
|
],
|
|
2518
2755
|
"version": "1.0.0",
|
|
2519
|
-
"lastUpdated": "2026-01-
|
|
2756
|
+
"lastUpdated": "2026-01-20T22:56:26.548Z"
|
|
2520
2757
|
}
|