@kubex/zinc 1.0.106 → 1.0.108
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/custom-elements.json +231 -83
- package/dist/vscode.html-custom-data.json +21 -10
- package/dist/web-types.json +66 -45
- package/dist/zn.d.ts +68 -34
- package/dist/zn.min.css +1 -1
- package/dist/zn.min.js +1020 -1907
- package/docs/_includes/sidebar.njk +1 -0
- package/docs/pages/components/chart.md +134 -8
- package/docs/pages/components/simple-chart.md +20 -5
- package/docs/pages/components/stat.md +531 -401
- package/docs/pages/getting-started/shimmer-text.md +81 -0
- package/package.json +5 -6
- package/scss/shared/index.scss +1 -0
- package/scss/shared/shimmer.scss +98 -0
- package/src/components/chart/builders.test.ts +211 -0
- package/src/components/chart/builders.ts +221 -0
- package/src/components/chart/chart.component.ts +182 -173
- package/src/components/chart/chart.scss +0 -1
- package/src/components/chart/chart.test.ts +48 -4
- package/src/components/editor/modules/context-menu/context-menu.ts +2 -1
- package/src/components/markdown-editor/markdown-editor.component.ts +21 -0
- package/src/components/markdown-editor/markdown-editor.scss +24 -1
- package/src/components/rating/rating.component.ts +2 -1
- package/src/components/simple-chart/simple-chart.component.ts +72 -180
- package/src/components/tabs/tabs.component.ts +6 -2
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@kubex/zinc",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.108",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -606,19 +606,25 @@
|
|
|
606
606
|
},
|
|
607
607
|
{
|
|
608
608
|
"name": "zn-chart",
|
|
609
|
-
"description": "
|
|
609
|
+
"description": "Chart component powered by Apache ECharts.\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
610
610
|
"doc-url": "",
|
|
611
611
|
"attributes": [
|
|
612
612
|
{
|
|
613
613
|
"name": "type",
|
|
614
|
-
"value": { "type": "
|
|
614
|
+
"value": { "type": "ChartType", "default": "'bar'" }
|
|
615
|
+
},
|
|
616
|
+
{
|
|
617
|
+
"name": "data",
|
|
618
|
+
"value": { "type": "SeriesItem[]", "default": "[]" }
|
|
615
619
|
},
|
|
616
|
-
{ "name": "data", "value": { "type": "any[]", "default": "[]" } },
|
|
617
620
|
{
|
|
618
621
|
"name": "categories",
|
|
619
|
-
"value": { "type": "string
|
|
622
|
+
"value": { "type": "string[]", "default": "[]" }
|
|
623
|
+
},
|
|
624
|
+
{
|
|
625
|
+
"name": "xaxis",
|
|
626
|
+
"value": { "type": "'datetime' | 'category' | 'numeric'" }
|
|
620
627
|
},
|
|
621
|
-
{ "name": "xAxis", "value": { "type": "string" } },
|
|
622
628
|
{ "name": "d-size", "value": { "type": "number", "default": "1" } },
|
|
623
629
|
{
|
|
624
630
|
"name": "stacked",
|
|
@@ -642,38 +648,44 @@
|
|
|
642
648
|
},
|
|
643
649
|
{
|
|
644
650
|
"name": "enable-animations",
|
|
651
|
+
"value": { "type": "boolean | number", "default": "false" }
|
|
652
|
+
},
|
|
653
|
+
{ "name": "y-axis-append", "value": { "type": "string" } },
|
|
654
|
+
{ "name": "colors", "value": { "type": "string[] | undefined" } },
|
|
655
|
+
{ "name": "sync-group", "value": { "type": "string | undefined" } },
|
|
656
|
+
{
|
|
657
|
+
"name": "smooth",
|
|
645
658
|
"value": { "type": "boolean", "default": "false" }
|
|
646
659
|
},
|
|
647
|
-
{
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
{ "name": "example", "description": "An example slot." }
|
|
652
|
-
],
|
|
653
|
-
"events": [
|
|
654
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
660
|
+
{
|
|
661
|
+
"name": "scale",
|
|
662
|
+
"value": { "type": "boolean | number", "default": "false" }
|
|
663
|
+
}
|
|
655
664
|
],
|
|
665
|
+
"events": [],
|
|
656
666
|
"js": {
|
|
657
667
|
"properties": [
|
|
658
|
-
{ "name": "type", "type": "
|
|
659
|
-
{ "name": "data", "type": "
|
|
660
|
-
{ "name": "categories", "type": "string
|
|
661
|
-
{
|
|
668
|
+
{ "name": "type", "type": "ChartType" },
|
|
669
|
+
{ "name": "data", "type": "SeriesItem[]" },
|
|
670
|
+
{ "name": "categories", "type": "string[]" },
|
|
671
|
+
{
|
|
672
|
+
"name": "xAxis",
|
|
673
|
+
"type": "'datetime' | 'category' | 'numeric'"
|
|
674
|
+
},
|
|
662
675
|
{ "name": "datapointSize", "type": "number" },
|
|
663
676
|
{ "name": "stacked", "type": "boolean" },
|
|
664
677
|
{ "name": "live", "type": "boolean" },
|
|
665
678
|
{ "name": "dataUrl", "type": "string" },
|
|
666
679
|
{ "name": "liveInterval", "type": "number" },
|
|
667
680
|
{ "name": "height", "type": "number" },
|
|
668
|
-
{ "name": "enableAnimations", "type": "boolean" },
|
|
669
|
-
{ "name": "yAxisAppend", "type": "string" }
|
|
681
|
+
{ "name": "enableAnimations", "type": "boolean | number" },
|
|
682
|
+
{ "name": "yAxisAppend", "type": "string" },
|
|
683
|
+
{ "name": "colors", "type": "string[] | undefined" },
|
|
684
|
+
{ "name": "syncGroup", "type": "string | undefined" },
|
|
685
|
+
{ "name": "smooth", "type": "boolean" },
|
|
686
|
+
{ "name": "scale", "type": "boolean | number" }
|
|
670
687
|
],
|
|
671
|
-
"events": [
|
|
672
|
-
{
|
|
673
|
-
"name": "zn-event-name",
|
|
674
|
-
"description": "Emitted as an example."
|
|
675
|
-
}
|
|
676
|
-
]
|
|
688
|
+
"events": []
|
|
677
689
|
}
|
|
678
690
|
},
|
|
679
691
|
{
|
|
@@ -5163,6 +5175,10 @@
|
|
|
5163
5175
|
"name": "no-prefetch",
|
|
5164
5176
|
"value": { "type": "boolean", "default": "false" }
|
|
5165
5177
|
},
|
|
5178
|
+
{
|
|
5179
|
+
"name": "no-cache",
|
|
5180
|
+
"value": { "type": "boolean", "default": "false" }
|
|
5181
|
+
},
|
|
5166
5182
|
{ "name": "local-storage", "value": { "type": "boolean" } },
|
|
5167
5183
|
{ "name": "store-key", "value": { "type": "string" } },
|
|
5168
5184
|
{
|
|
@@ -5209,6 +5225,7 @@
|
|
|
5209
5225
|
{ "name": "primaryCaption", "type": "string" },
|
|
5210
5226
|
{ "name": "secondaryCaption", "type": "string" },
|
|
5211
5227
|
{ "name": "noPrefetch", "type": "boolean" },
|
|
5228
|
+
{ "name": "noCache", "type": "boolean" },
|
|
5212
5229
|
{ "name": "localStorage", "type": "boolean" },
|
|
5213
5230
|
{ "name": "storeKey", "type": "string" },
|
|
5214
5231
|
{ "name": "storeTtl", "type": "number" },
|
|
@@ -6897,31 +6914,30 @@
|
|
|
6897
6914
|
},
|
|
6898
6915
|
{
|
|
6899
6916
|
"name": "zn-simple-chart",
|
|
6900
|
-
"description": "
|
|
6917
|
+
"description": "A simple, pre-styled bar chart.\n---\n",
|
|
6901
6918
|
"doc-url": "",
|
|
6902
6919
|
"attributes": [
|
|
6903
|
-
{
|
|
6904
|
-
|
|
6905
|
-
|
|
6906
|
-
|
|
6907
|
-
{ "name": "", "
|
|
6908
|
-
{
|
|
6909
|
-
|
|
6910
|
-
|
|
6911
|
-
|
|
6920
|
+
{
|
|
6921
|
+
"name": "datasets",
|
|
6922
|
+
"value": { "type": "{ data: number[] }[] | undefined" }
|
|
6923
|
+
},
|
|
6924
|
+
{ "name": "labels", "value": { "type": "string[] | undefined" } },
|
|
6925
|
+
{
|
|
6926
|
+
"name": "enable-animations",
|
|
6927
|
+
"value": { "type": "boolean | number", "default": "false" }
|
|
6928
|
+
}
|
|
6912
6929
|
],
|
|
6930
|
+
"events": [],
|
|
6913
6931
|
"js": {
|
|
6914
6932
|
"properties": [
|
|
6915
|
-
{ "name": "datasets", "type": "any[]" },
|
|
6916
|
-
{ "name": "labels", "type": "any[]" },
|
|
6917
|
-
{ "name": "myChart", "type": "Chart" }
|
|
6918
|
-
],
|
|
6919
|
-
"events": [
|
|
6920
6933
|
{
|
|
6921
|
-
"name": "
|
|
6922
|
-
"
|
|
6923
|
-
}
|
|
6924
|
-
|
|
6934
|
+
"name": "datasets",
|
|
6935
|
+
"type": "{ data: number[] }[] | undefined"
|
|
6936
|
+
},
|
|
6937
|
+
{ "name": "labels", "type": "string[] | undefined" },
|
|
6938
|
+
{ "name": "enableAnimations", "type": "boolean | number" }
|
|
6939
|
+
],
|
|
6940
|
+
"events": []
|
|
6925
6941
|
}
|
|
6926
6942
|
},
|
|
6927
6943
|
{
|
|
@@ -7642,6 +7658,10 @@
|
|
|
7642
7658
|
"name": "no-prefetch",
|
|
7643
7659
|
"value": { "type": "boolean", "default": "false" }
|
|
7644
7660
|
},
|
|
7661
|
+
{
|
|
7662
|
+
"name": "no-cache",
|
|
7663
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7664
|
+
},
|
|
7645
7665
|
{ "name": "local-storage", "value": { "type": "boolean" } },
|
|
7646
7666
|
{ "name": "store-key", "value": { "type": "string" } },
|
|
7647
7667
|
{
|
|
@@ -7686,6 +7706,7 @@
|
|
|
7686
7706
|
{ "name": "primaryCaption", "type": "string" },
|
|
7687
7707
|
{ "name": "secondaryCaption", "type": "string" },
|
|
7688
7708
|
{ "name": "noPrefetch", "type": "boolean" },
|
|
7709
|
+
{ "name": "noCache", "type": "boolean" },
|
|
7689
7710
|
{ "name": "localStorage", "type": "boolean" },
|
|
7690
7711
|
{ "name": "storeKey", "type": "string" },
|
|
7691
7712
|
{ "name": "storeTtl", "type": "number" },
|
package/dist/zn.d.ts
CHANGED
|
@@ -3400,43 +3400,83 @@ declare module "components/tile-property/index" {
|
|
|
3400
3400
|
}
|
|
3401
3401
|
}
|
|
3402
3402
|
}
|
|
3403
|
+
declare module "components/chart/builders" {
|
|
3404
|
+
import type { EChartsOption } from 'echarts';
|
|
3405
|
+
export type ChartType = 'area' | 'bar' | 'line' | 'sankey';
|
|
3406
|
+
export interface SeriesItem {
|
|
3407
|
+
name: string;
|
|
3408
|
+
data: any[];
|
|
3409
|
+
color?: string;
|
|
3410
|
+
}
|
|
3411
|
+
export interface SankeyEdge {
|
|
3412
|
+
source: string;
|
|
3413
|
+
target: string;
|
|
3414
|
+
value: number;
|
|
3415
|
+
}
|
|
3416
|
+
export interface BuilderProps {
|
|
3417
|
+
type: ChartType;
|
|
3418
|
+
data: SeriesItem[];
|
|
3419
|
+
categories: string[];
|
|
3420
|
+
xAxisType?: 'datetime' | 'category' | 'numeric';
|
|
3421
|
+
yAxisAppend?: string;
|
|
3422
|
+
stacked: boolean;
|
|
3423
|
+
enableAnimations: boolean | number;
|
|
3424
|
+
datapointSize: number;
|
|
3425
|
+
colors?: string[];
|
|
3426
|
+
theme: 'light' | 'dark';
|
|
3427
|
+
smooth?: boolean;
|
|
3428
|
+
scale?: boolean | number;
|
|
3429
|
+
textColor?: string;
|
|
3430
|
+
borderColor?: string;
|
|
3431
|
+
}
|
|
3432
|
+
export function buildBarOption(props: BuilderProps): EChartsOption;
|
|
3433
|
+
export function buildLineOption(props: BuilderProps): EChartsOption;
|
|
3434
|
+
export function buildAreaOption(props: BuilderProps): EChartsOption;
|
|
3435
|
+
export function buildSankeyOption(props: BuilderProps): EChartsOption;
|
|
3436
|
+
}
|
|
3403
3437
|
declare module "components/chart/chart.component" {
|
|
3438
|
+
import { type ChartType, type SeriesItem } from "components/chart/builders";
|
|
3404
3439
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
3405
3440
|
import ZincElement from "internal/zinc-element";
|
|
3406
3441
|
/**
|
|
3407
|
-
* @summary
|
|
3442
|
+
* @summary Chart component powered by Apache ECharts.
|
|
3408
3443
|
* @documentation https://zinc.style/components/data-chart
|
|
3409
3444
|
* @status experimental
|
|
3410
3445
|
* @since 1.0
|
|
3411
3446
|
*
|
|
3412
|
-
* @dependency zn-example
|
|
3413
|
-
*
|
|
3414
|
-
* @event zn-event-name - Emitted as an example.
|
|
3415
|
-
*
|
|
3416
|
-
* @slot - The default slot.
|
|
3417
|
-
* @slot example - An example slot.
|
|
3418
|
-
*
|
|
3419
3447
|
* @csspart base - The component's base wrapper.
|
|
3420
|
-
*
|
|
3421
|
-
* @cssproperty --example - An example CSS custom property.
|
|
3422
3448
|
*/
|
|
3423
3449
|
export default class ZnChart extends ZincElement {
|
|
3424
3450
|
static styles: CSSResultGroup;
|
|
3425
|
-
type:
|
|
3426
|
-
data:
|
|
3427
|
-
categories: string
|
|
3428
|
-
xAxis:
|
|
3451
|
+
type: ChartType;
|
|
3452
|
+
data: SeriesItem[];
|
|
3453
|
+
categories: string[];
|
|
3454
|
+
xAxis: 'datetime' | 'category' | 'numeric';
|
|
3429
3455
|
datapointSize: number;
|
|
3430
3456
|
stacked: boolean;
|
|
3431
3457
|
live: boolean;
|
|
3432
3458
|
dataUrl: string;
|
|
3433
3459
|
liveInterval: number;
|
|
3434
3460
|
height: number;
|
|
3435
|
-
enableAnimations: boolean;
|
|
3461
|
+
enableAnimations: boolean | number;
|
|
3436
3462
|
yAxisAppend: string;
|
|
3437
|
-
|
|
3463
|
+
colors?: string[];
|
|
3464
|
+
syncGroup?: string;
|
|
3465
|
+
smooth: boolean;
|
|
3466
|
+
scale: boolean | number;
|
|
3467
|
+
private chart?;
|
|
3468
|
+
private resizeObserver?;
|
|
3469
|
+
private liveTimer?;
|
|
3438
3470
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
3471
|
+
private getTheme;
|
|
3472
|
+
private getTextColor;
|
|
3473
|
+
private getBorderColor;
|
|
3474
|
+
private buildOption;
|
|
3475
|
+
private initChart;
|
|
3476
|
+
private startLive;
|
|
3477
|
+
private reinit;
|
|
3439
3478
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
3479
|
+
disconnectedCallback(): void;
|
|
3440
3480
|
protected render(): unknown;
|
|
3441
3481
|
}
|
|
3442
3482
|
}
|
|
@@ -3452,32 +3492,24 @@ declare module "components/chart/index" {
|
|
|
3452
3492
|
}
|
|
3453
3493
|
declare module "components/simple-chart/simple-chart.component" {
|
|
3454
3494
|
import { type CSSResultGroup } from 'lit';
|
|
3455
|
-
import { Chart } from "chart.js";
|
|
3456
3495
|
import ZincElement from "internal/zinc-element";
|
|
3457
3496
|
/**
|
|
3458
|
-
* @summary
|
|
3497
|
+
* @summary A simple, pre-styled bar chart.
|
|
3459
3498
|
* @documentation https://zinc.style/components/simple-chart
|
|
3460
3499
|
* @status experimental
|
|
3461
3500
|
* @since 1.0
|
|
3462
|
-
*
|
|
3463
|
-
* @dependency zn-example
|
|
3464
|
-
*
|
|
3465
|
-
* @event zn-event-name - Emitted as an example.
|
|
3466
|
-
*
|
|
3467
|
-
* @slot - The default slot.
|
|
3468
|
-
* @slot example - An example slot.
|
|
3469
|
-
*
|
|
3470
|
-
* @csspart base - The component's base wrapper.
|
|
3471
|
-
*
|
|
3472
|
-
* @cssproperty --example - An example CSS custom property.
|
|
3473
3501
|
*/
|
|
3474
3502
|
export default class ZnSimpleChart extends ZincElement {
|
|
3475
3503
|
static styles: CSSResultGroup;
|
|
3476
|
-
datasets
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3504
|
+
datasets?: {
|
|
3505
|
+
data: number[];
|
|
3506
|
+
}[];
|
|
3507
|
+
labels?: string[];
|
|
3508
|
+
enableAnimations: boolean | number;
|
|
3509
|
+
private chart?;
|
|
3510
|
+
private resizeObserver?;
|
|
3480
3511
|
firstUpdated(): void;
|
|
3512
|
+
disconnectedCallback(): void;
|
|
3481
3513
|
render(): import("lit").TemplateResult<1>;
|
|
3482
3514
|
}
|
|
3483
3515
|
}
|
|
@@ -3992,6 +4024,7 @@ declare module "components/tabs/tabs.component" {
|
|
|
3992
4024
|
primaryCaption: string;
|
|
3993
4025
|
secondaryCaption: string;
|
|
3994
4026
|
noPrefetch: boolean;
|
|
4027
|
+
noCache: boolean;
|
|
3995
4028
|
localStorage: boolean;
|
|
3996
4029
|
storeKey: string;
|
|
3997
4030
|
storeTtl: number;
|
|
@@ -6008,8 +6041,8 @@ declare module "components/radio/index" {
|
|
|
6008
6041
|
}
|
|
6009
6042
|
declare module "components/rating/rating.component" {
|
|
6010
6043
|
import { type CSSResultGroup } from 'lit';
|
|
6011
|
-
import type { ZincFormControl } from "internal/zinc-element";
|
|
6012
6044
|
import ZincElement from "internal/zinc-element";
|
|
6045
|
+
import type { ZincFormControl } from "internal/zinc-element";
|
|
6013
6046
|
/**
|
|
6014
6047
|
* @summary Short summary of the component's intended use.
|
|
6015
6048
|
* @documentation https://zinc.style/components/rating
|
|
@@ -7783,6 +7816,7 @@ declare module "components/markdown-editor/markdown-editor.component" {
|
|
|
7783
7816
|
handleValueChange(): Promise<void>;
|
|
7784
7817
|
handleMarkedReady(): void;
|
|
7785
7818
|
render(): import("lit").TemplateResult<1>;
|
|
7819
|
+
markdownHelperBtn(): import("lit").TemplateResult<1>;
|
|
7786
7820
|
private renderViewButton;
|
|
7787
7821
|
}
|
|
7788
7822
|
}
|