@lazhus/kg-ui 0.3.2 → 0.4.0
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 +30 -24
- package/custom-elements.json +691 -53
- package/dist/components/kg-avatar.js +137 -0
- package/dist/components/kg-breadcrumbs.js +130 -0
- package/dist/components/kg-list.js +90 -0
- package/dist/components/kg-tag.js +121 -0
- package/dist/components/kg-tooltip.js +131 -0
- package/dist/components/kg-tree.js +121 -0
- package/dist/index.js +26 -11
- package/dist/kg-ui.css +1 -1
- package/package.json +1 -1
- package/types/components/kg-avatar.d.ts +28 -0
- package/types/components/kg-breadcrumbs.d.ts +25 -0
- package/types/components/kg-list.d.ts +20 -0
- package/types/components/kg-tag.d.ts +25 -0
- package/types/components/kg-tooltip.d.ts +28 -0
- package/types/components/kg-tree.d.ts +28 -0
- package/types/index.d.ts +62 -0
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { LitElement as s, css as r, html as e } from "lit";
|
|
2
|
+
class i extends s {
|
|
3
|
+
static styles = r`
|
|
4
|
+
:host {
|
|
5
|
+
display: block;
|
|
6
|
+
width: 100%;
|
|
7
|
+
user-select: none;
|
|
8
|
+
}
|
|
9
|
+
.tree-container {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
14
|
+
render() {
|
|
15
|
+
return e`
|
|
16
|
+
<div class="tree-container">
|
|
17
|
+
<slot></slot>
|
|
18
|
+
</div>
|
|
19
|
+
`;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
class o extends s {
|
|
23
|
+
static properties = {
|
|
24
|
+
label: { type: String },
|
|
25
|
+
expanded: { type: Boolean, reflect: !0 },
|
|
26
|
+
selected: { type: Boolean, reflect: !0 },
|
|
27
|
+
level: { type: Number },
|
|
28
|
+
page: { type: String }
|
|
29
|
+
// For doc navigation
|
|
30
|
+
};
|
|
31
|
+
static styles = r`
|
|
32
|
+
:host {
|
|
33
|
+
display: block;
|
|
34
|
+
}
|
|
35
|
+
.item-row {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
padding: 0.4rem 0.5rem;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
border-radius: var(--kg-radius-sm, 4px);
|
|
41
|
+
transition: all 0.2s;
|
|
42
|
+
gap: 0.4rem;
|
|
43
|
+
font-size: 0.9rem;
|
|
44
|
+
color: var(--kg-text-muted);
|
|
45
|
+
}
|
|
46
|
+
.item-row:hover {
|
|
47
|
+
background: var(--kg-bg-secondary, rgba(0,0,0,0.03));
|
|
48
|
+
color: var(--kg-text);
|
|
49
|
+
}
|
|
50
|
+
:host([selected]) > .item-row {
|
|
51
|
+
background: var(--kg-bg-secondary, rgba(0,0,0,0.05));
|
|
52
|
+
color: var(--kg-primary);
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.arrow {
|
|
57
|
+
width: 16px;
|
|
58
|
+
height: 16px;
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
transition: transform 0.2s;
|
|
63
|
+
opacity: 0.5;
|
|
64
|
+
}
|
|
65
|
+
:host([expanded]) > .item-row .arrow {
|
|
66
|
+
transform: rotate(90deg);
|
|
67
|
+
}
|
|
68
|
+
.arrow-placeholder {
|
|
69
|
+
width: 16px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.children {
|
|
73
|
+
display: none;
|
|
74
|
+
padding-left: 1.2rem;
|
|
75
|
+
}
|
|
76
|
+
:host([expanded]) > .children {
|
|
77
|
+
display: block;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Icon slot styling */
|
|
81
|
+
::slotted([slot="icon"]) {
|
|
82
|
+
width: 16px;
|
|
83
|
+
height: 16px;
|
|
84
|
+
opacity: 0.7;
|
|
85
|
+
}
|
|
86
|
+
`;
|
|
87
|
+
constructor() {
|
|
88
|
+
super(), this.expanded = !1, this.selected = !1, this.level = 0;
|
|
89
|
+
}
|
|
90
|
+
_toggle(t) {
|
|
91
|
+
t.stopPropagation(), this.querySelectorAll("kg-tree-item").length > 0 && (this.expanded = !this.expanded), this.dispatchEvent(new CustomEvent("kg-select", {
|
|
92
|
+
detail: {
|
|
93
|
+
page: this.page,
|
|
94
|
+
label: this.label
|
|
95
|
+
},
|
|
96
|
+
bubbles: !0,
|
|
97
|
+
composed: !0
|
|
98
|
+
}));
|
|
99
|
+
}
|
|
100
|
+
render() {
|
|
101
|
+
const t = this.querySelectorAll("kg-tree-item").length > 0;
|
|
102
|
+
return e`
|
|
103
|
+
<div class="item-row" @click="${this._toggle}">
|
|
104
|
+
${t ? e`<span class="arrow">
|
|
105
|
+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 18l6-6-6-6"/></svg>
|
|
106
|
+
</span>` : e`<span class="arrow-placeholder"></span>`}
|
|
107
|
+
<slot name="icon"></slot>
|
|
108
|
+
<span class="label">${this.label}</span>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="children">
|
|
111
|
+
<slot></slot>
|
|
112
|
+
</div>
|
|
113
|
+
`;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
customElements.define("kg-tree", i);
|
|
117
|
+
customElements.define("kg-tree-item", o);
|
|
118
|
+
export {
|
|
119
|
+
i as kgtree,
|
|
120
|
+
o as kgtreeitem
|
|
121
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { kgaccordionitem as e } from "./components/kg-accordion-item.js";
|
|
2
2
|
import { kgaccordion as p } from "./components/kg-accordion.js";
|
|
3
|
-
import { kgbutton as
|
|
3
|
+
import { kgbutton as m } from "./components/kg-button.js";
|
|
4
4
|
import { kgcard as x } from "./components/kg-card.js";
|
|
5
5
|
import { kgcheckbox as a } from "./components/kg-checkbox.js";
|
|
6
|
-
import { kgcolorpicker as
|
|
6
|
+
import { kgcolorpicker as d } from "./components/kg-colorpicker.js";
|
|
7
7
|
import { kgcolumn as l } from "./components/kg-column.js";
|
|
8
8
|
import { kgdatepicker as n } from "./components/kg-datepicker.js";
|
|
9
|
-
import { kgdivider as
|
|
9
|
+
import { kgdivider as u } from "./components/kg-divider.js";
|
|
10
10
|
import { kgdrawer as h } from "./components/kg-drawer.js";
|
|
11
11
|
import { kgfileupload as j } from "./components/kg-file-upload.js";
|
|
12
12
|
import { kggrid as y } from "./components/kg-grid.js";
|
|
@@ -27,28 +27,39 @@ import { kgtext as _ } from "./components/kg-text.js";
|
|
|
27
27
|
import { kgtextarea as rr } from "./components/kg-textarea.js";
|
|
28
28
|
import { kgtoast as er, toast as tr } from "./components/kg-toast.js";
|
|
29
29
|
import { kgimage as gr } from "./components/kg-image.js";
|
|
30
|
-
import { kgprogress as
|
|
30
|
+
import { kgprogress as kr } from "./components/kg-progress.js";
|
|
31
31
|
import { kgspinner as fr } from "./components/kg-spinner.js";
|
|
32
|
-
import { kgloader as
|
|
32
|
+
import { kgloader as ir, loader as dr } from "./components/kg-loader.js";
|
|
33
|
+
import { kgavatar as lr } from "./components/kg-avatar.js";
|
|
34
|
+
import { kgtag as nr } from "./components/kg-tag.js";
|
|
35
|
+
import { kgbreadcrumbitem as ur, kgbreadcrumbs as wr } from "./components/kg-breadcrumbs.js";
|
|
36
|
+
import { kgtooltip as vr } from "./components/kg-tooltip.js";
|
|
37
|
+
import { kgtree as qr, kgtreeitem as yr } from "./components/kg-tree.js";
|
|
38
|
+
import { kglist as Ar, kglistitem as Br } from "./components/kg-list.js";
|
|
33
39
|
export {
|
|
34
40
|
p as kgaccordion,
|
|
35
41
|
e as kgaccordionitem,
|
|
36
|
-
|
|
42
|
+
lr as kgavatar,
|
|
43
|
+
ur as kgbreadcrumbitem,
|
|
44
|
+
wr as kgbreadcrumbs,
|
|
45
|
+
m as kgbutton,
|
|
37
46
|
x as kgcard,
|
|
38
47
|
a as kgcheckbox,
|
|
39
|
-
|
|
48
|
+
d as kgcolorpicker,
|
|
40
49
|
l as kgcolumn,
|
|
41
50
|
A as kgdatagrid,
|
|
42
51
|
n as kgdatepicker,
|
|
43
|
-
|
|
52
|
+
u as kgdivider,
|
|
44
53
|
h as kgdrawer,
|
|
45
54
|
j as kgfileupload,
|
|
46
55
|
y as kggrid,
|
|
47
56
|
gr as kgimage,
|
|
48
57
|
C as kginput,
|
|
49
|
-
|
|
58
|
+
Ar as kglist,
|
|
59
|
+
Br as kglistitem,
|
|
60
|
+
ir as kgloader,
|
|
50
61
|
E as kgmodal,
|
|
51
|
-
|
|
62
|
+
kr as kgprogress,
|
|
52
63
|
I as kgradio,
|
|
53
64
|
G as kgradiogroup,
|
|
54
65
|
K as kgrow,
|
|
@@ -60,9 +71,13 @@ export {
|
|
|
60
71
|
U as kgswitch,
|
|
61
72
|
W as kgtabpanel,
|
|
62
73
|
Y as kgtabs,
|
|
74
|
+
nr as kgtag,
|
|
63
75
|
_ as kgtext,
|
|
64
76
|
rr as kgtextarea,
|
|
65
77
|
er as kgtoast,
|
|
66
|
-
|
|
78
|
+
vr as kgtooltip,
|
|
79
|
+
qr as kgtree,
|
|
80
|
+
yr as kgtreeitem,
|
|
81
|
+
dr as loader,
|
|
67
82
|
tr as toast
|
|
68
83
|
};
|
package/dist/kg-ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.cdnfonts.com/css/century-gothic";:root{--kg-primary: #41ab34;--kg-primary-hover: #368e2b;--kg-primary-active: #2b7122;--kg-secondary: #6c757d;--kg-secondary-hover: #5a6268;--kg-secondary-active: #545b62;--kg-tertiary: #fbb140;--kg-tertiary-hover: #e59e36;--kg-tertiary-active: #cf8c2d;--kg-space-xs: .25rem;--kg-space-sm: .5rem;--kg-space-md: 1rem;--kg-space-lg: 1.5rem;--kg-space-xl: 2rem;--kg-radius-sm: 4px;--kg-radius-md: 8px;--kg-radius-lg: 12px;--kg-bg: #ffffff;--kg-text: #1a1a1b;--kg-text-muted: #64748b;--kg-surface: #f8fafc;--kg-border: #e2e8f0;--kg-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);--kg-header-gradient: linear-gradient(to right, #1a1a1b, #64748b);--kg-form-height: 38px;--datagrid-hover-bg: rgba(0, 0, 0, .04)}[data-theme=dark]{--kg-bg: #0a0a0c;--kg-text: #f8fafc;--kg-text-muted: #94a3b8;--kg-surface: #16161a;--kg-border: #2d2d34;--kg-shadow: 0 10px 15px -3px rgb(0 0 0 / .3);--kg-header-gradient: linear-gradient(to right, #fff, #94a3b8);--datagrid-hover-bg: rgba(255, 255, 255, .12)}*{box-sizing:border-box;transition:background-color .3s ease,color .3s ease,border-color .3s ease}body,h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}body{font-family:Century Gothic,Apple Gothic,CenturyGothic,sans-serif;background-color:var(--kg-bg);color:var(--kg-text);line-height:1.5;-webkit-font-smoothing:antialiased;padding:1rem;height:100vh;overflow:hidden}#app{max-width:1400px;margin:0 auto;height:100%;display:flex;flex-direction:column}.doc-layout{display:grid;grid-template-columns:260px 1fr;gap:3rem;flex:1;min-height:0;overflow:hidden}@media(max-width:1024px){.doc-layout{grid-template-columns:1fr;height:auto;overflow:visible;gap:1rem}.sidebar{display:none!important}#mobile-menu-btn{display:flex!important}body{height:auto;overflow:auto}#app{height:auto}.header-container{padding:1rem 0}}.sidebar{height:100%;padding:1.5rem 0;display:flex;flex-direction:column;min-height:0}.sidebar-nav{display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;
|
|
1
|
+
@import"https://fonts.cdnfonts.com/css/century-gothic";:root{--kg-primary: #41ab34;--kg-primary-hover: #368e2b;--kg-primary-active: #2b7122;--kg-secondary: #6c757d;--kg-secondary-hover: #5a6268;--kg-secondary-active: #545b62;--kg-tertiary: #fbb140;--kg-tertiary-hover: #e59e36;--kg-tertiary-active: #cf8c2d;--kg-space-xs: .25rem;--kg-space-sm: .5rem;--kg-space-md: 1rem;--kg-space-lg: 1.5rem;--kg-space-xl: 2rem;--kg-radius-sm: 4px;--kg-radius-md: 8px;--kg-radius-lg: 12px;--kg-bg: #ffffff;--kg-text: #1a1a1b;--kg-text-muted: #64748b;--kg-surface: #f8fafc;--kg-border: #e2e8f0;--kg-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);--kg-header-gradient: linear-gradient(to right, #1a1a1b, #64748b);--kg-form-height: 38px;--datagrid-hover-bg: rgba(0, 0, 0, .04)}[data-theme=dark]{--kg-bg: #0a0a0c;--kg-text: #f8fafc;--kg-text-muted: #94a3b8;--kg-surface: #16161a;--kg-border: #2d2d34;--kg-shadow: 0 10px 15px -3px rgb(0 0 0 / .3);--kg-header-gradient: linear-gradient(to right, #fff, #94a3b8);--datagrid-hover-bg: rgba(255, 255, 255, .12)}*{box-sizing:border-box;transition:background-color .3s ease,color .3s ease,border-color .3s ease}body,h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}body{font-family:Century Gothic,Apple Gothic,CenturyGothic,sans-serif;background-color:var(--kg-bg);color:var(--kg-text);line-height:1.5;-webkit-font-smoothing:antialiased;padding:1rem;height:100vh;overflow:hidden}#app{max-width:1400px;margin:0 auto;height:100%;display:flex;flex-direction:column}.doc-layout{display:grid;grid-template-columns:260px 1fr;gap:3rem;flex:1;min-height:0;overflow:hidden}@media(max-width:1024px){.doc-layout{grid-template-columns:1fr;height:auto;overflow:visible;gap:1rem}.sidebar{display:none!important}#mobile-menu-btn{display:flex!important}body{height:auto;overflow:auto}#app{height:auto}.header-container{padding:1rem 0}}.sidebar{height:100%;padding:1.5rem 0;display:flex;flex-direction:column;min-height:0}.sidebar-nav{display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;flex:1}.main-content{overflow-y:auto;height:100%;padding:1rem 0 4rem}.doc-section{margin-bottom:4rem}.code-block{background:#1e1e1e;color:#d4d4d4;padding:1.5rem;border-radius:var(--kg-radius-md);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.85rem;line-height:1.6;white-space:pre;overflow-x:auto;margin:0;border:1px solid var(--kg-border)}.code-block code{font-family:inherit;color:inherit}.example-preview{padding:2rem;border:1px solid var(--kg-border);border-bottom:none;border-radius:var(--kg-radius-md) var(--kg-radius-md) 0 0;background:var(--kg-bg);display:flex!important;flex-direction:row!important;gap:1rem!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important}.example-code{margin:0;border-radius:0 0 var(--kg-radius-md) var(--kg-radius-md)}.header-container{display:flex;justify-content:space-between;align-items:center;padding-bottom:2rem;border-bottom:1px solid var(--kg-border)}h2{font-size:1.75rem;margin-bottom:1.5rem;color:var(--kg-text)}h3{font-size:1.25rem;margin-bottom:1rem;color:var(--kg-text-muted);text-transform:uppercase;letter-spacing:.05em}
|
package/package.json
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/** @customElement kg-avatar */
|
|
4
|
+
export class kgavatar extends LitElement {
|
|
5
|
+
/** */
|
|
6
|
+
size: string;
|
|
7
|
+
/** */
|
|
8
|
+
shape: string;
|
|
9
|
+
/** */
|
|
10
|
+
alt: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
declare global {
|
|
14
|
+
interface HTMLElementTagNameMap {
|
|
15
|
+
'kg-avatar': kgavatar;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
namespace JSX {
|
|
19
|
+
interface IntrinsicElements {
|
|
20
|
+
'kg-avatar': {
|
|
21
|
+
size?: string;
|
|
22
|
+
shape?: string;
|
|
23
|
+
alt?: string;
|
|
24
|
+
[key: string]: any;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/** @customElement kg-breadcrumb-item */
|
|
4
|
+
export class kgbreadcrumbitem extends LitElement {
|
|
5
|
+
/** */
|
|
6
|
+
active: boolean;
|
|
7
|
+
/** */
|
|
8
|
+
separator: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
declare global {
|
|
12
|
+
interface HTMLElementTagNameMap {
|
|
13
|
+
'kg-breadcrumb-item': kgbreadcrumbitem;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
namespace JSX {
|
|
17
|
+
interface IntrinsicElements {
|
|
18
|
+
'kg-breadcrumb-item': {
|
|
19
|
+
active?: boolean;
|
|
20
|
+
separator?: string;
|
|
21
|
+
[key: string]: any;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/** @customElement kg-list-item */
|
|
4
|
+
export class kglistitem extends LitElement {
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'kg-list-item': kglistitem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
namespace JSX {
|
|
13
|
+
interface IntrinsicElements {
|
|
14
|
+
'kg-list-item': {
|
|
15
|
+
|
|
16
|
+
[key: string]: any;
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/** @customElement kg-tag */
|
|
4
|
+
export class kgtag extends LitElement {
|
|
5
|
+
/** */
|
|
6
|
+
size: string;
|
|
7
|
+
/** */
|
|
8
|
+
color: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
declare global {
|
|
12
|
+
interface HTMLElementTagNameMap {
|
|
13
|
+
'kg-tag': kgtag;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
namespace JSX {
|
|
17
|
+
interface IntrinsicElements {
|
|
18
|
+
'kg-tag': {
|
|
19
|
+
size?: string;
|
|
20
|
+
color?: string;
|
|
21
|
+
[key: string]: any;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/** @customElement kg-tooltip */
|
|
4
|
+
export class kgtooltip extends LitElement {
|
|
5
|
+
/** */
|
|
6
|
+
position: string;
|
|
7
|
+
/** */
|
|
8
|
+
trigger: string;
|
|
9
|
+
/** */
|
|
10
|
+
visible: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
declare global {
|
|
14
|
+
interface HTMLElementTagNameMap {
|
|
15
|
+
'kg-tooltip': kgtooltip;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
namespace JSX {
|
|
19
|
+
interface IntrinsicElements {
|
|
20
|
+
'kg-tooltip': {
|
|
21
|
+
position?: string;
|
|
22
|
+
trigger?: string;
|
|
23
|
+
visible?: boolean;
|
|
24
|
+
[key: string]: any;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/** @customElement kg-tree-item */
|
|
4
|
+
export class kgtreeitem extends LitElement {
|
|
5
|
+
/** */
|
|
6
|
+
expanded: boolean;
|
|
7
|
+
/** */
|
|
8
|
+
selected: boolean;
|
|
9
|
+
/** */
|
|
10
|
+
level: number;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
declare global {
|
|
14
|
+
interface HTMLElementTagNameMap {
|
|
15
|
+
'kg-tree-item': kgtreeitem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
namespace JSX {
|
|
19
|
+
interface IntrinsicElements {
|
|
20
|
+
'kg-tree-item': {
|
|
21
|
+
expanded?: boolean;
|
|
22
|
+
selected?: boolean;
|
|
23
|
+
level?: number;
|
|
24
|
+
[key: string]: any;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
package/types/index.d.ts
CHANGED
|
@@ -2,6 +2,9 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
export { kgaccordionitem } from './components/kg-accordion-item';
|
|
4
4
|
export { kgaccordion } from './components/kg-accordion';
|
|
5
|
+
export { kgavatar } from './components/kg-avatar';
|
|
6
|
+
export { kgbreadcrumbs } from './components/kg-breadcrumbs';
|
|
7
|
+
export { kgbreadcrumbitem } from './components/kg-breadcrumbs';
|
|
5
8
|
export { kgbutton } from './components/kg-button';
|
|
6
9
|
export { kgcard } from './components/kg-card';
|
|
7
10
|
export { kgcheckbox } from './components/kg-checkbox';
|
|
@@ -15,6 +18,8 @@ export { kgfileupload } from './components/kg-file-upload';
|
|
|
15
18
|
export { kggrid } from './components/kg-grid';
|
|
16
19
|
export { kgimage } from './components/kg-image';
|
|
17
20
|
export { kginput } from './components/kg-input';
|
|
21
|
+
export { kglist } from './components/kg-list';
|
|
22
|
+
export { kglistitem } from './components/kg-list';
|
|
18
23
|
export { kgloader } from './components/kg-loader';
|
|
19
24
|
export { kgmodal } from './components/kg-modal';
|
|
20
25
|
export { kgprogress } from './components/kg-progress';
|
|
@@ -29,14 +34,21 @@ export { kgstepper } from './components/kg-stepper';
|
|
|
29
34
|
export { kgswitch } from './components/kg-switch';
|
|
30
35
|
export { kgtabpanel } from './components/kg-tab-panel';
|
|
31
36
|
export { kgtabs } from './components/kg-tabs';
|
|
37
|
+
export { kgtag } from './components/kg-tag';
|
|
32
38
|
export { kgtext } from './components/kg-text';
|
|
33
39
|
export { kgtextarea } from './components/kg-textarea';
|
|
34
40
|
export { kgtoast } from './components/kg-toast';
|
|
41
|
+
export { kgtooltip } from './components/kg-tooltip';
|
|
42
|
+
export { kgtree } from './components/kg-tree';
|
|
43
|
+
export { kgtreeitem } from './components/kg-tree';
|
|
35
44
|
|
|
36
45
|
declare global {
|
|
37
46
|
interface HTMLElementTagNameMap {
|
|
38
47
|
'kg-accordion-item': kgaccordionitem;
|
|
39
48
|
'kg-accordion': kgaccordion;
|
|
49
|
+
'kg-avatar': kgavatar;
|
|
50
|
+
'kg-breadcrumbs': kgbreadcrumbs;
|
|
51
|
+
'kg-breadcrumb-item': kgbreadcrumbitem;
|
|
40
52
|
'kg-button': kgbutton;
|
|
41
53
|
'kg-card': kgcard;
|
|
42
54
|
'kg-checkbox': kgcheckbox;
|
|
@@ -50,6 +62,8 @@ declare global {
|
|
|
50
62
|
'kg-grid': kggrid;
|
|
51
63
|
'kg-image': kgimage;
|
|
52
64
|
'kg-input': kginput;
|
|
65
|
+
'kg-list': kglist;
|
|
66
|
+
'kg-list-item': kglistitem;
|
|
53
67
|
'kg-loader': kgloader;
|
|
54
68
|
'kg-modal': kgmodal;
|
|
55
69
|
'kg-progress': kgprogress;
|
|
@@ -64,9 +78,13 @@ declare global {
|
|
|
64
78
|
'kg-switch': kgswitch;
|
|
65
79
|
'kg-tab-panel': kgtabpanel;
|
|
66
80
|
'kg-tabs': kgtabs;
|
|
81
|
+
'kg-tag': kgtag;
|
|
67
82
|
'kg-text': kgtext;
|
|
68
83
|
'kg-textarea': kgtextarea;
|
|
69
84
|
'kg-toast': kgtoast;
|
|
85
|
+
'kg-tooltip': kgtooltip;
|
|
86
|
+
'kg-tree': kgtree;
|
|
87
|
+
'kg-tree-item': kgtreeitem;
|
|
70
88
|
}
|
|
71
89
|
|
|
72
90
|
namespace JSX {
|
|
@@ -80,6 +98,21 @@ declare global {
|
|
|
80
98
|
exclusive?: boolean;
|
|
81
99
|
[key: string]: any;
|
|
82
100
|
};
|
|
101
|
+
'kg-avatar': {
|
|
102
|
+
size?: string;
|
|
103
|
+
shape?: string;
|
|
104
|
+
alt?: string;
|
|
105
|
+
[key: string]: any;
|
|
106
|
+
};
|
|
107
|
+
'kg-breadcrumbs': {
|
|
108
|
+
separator?: string;
|
|
109
|
+
[key: string]: any;
|
|
110
|
+
};
|
|
111
|
+
'kg-breadcrumb-item': {
|
|
112
|
+
active?: boolean;
|
|
113
|
+
separator?: string;
|
|
114
|
+
[key: string]: any;
|
|
115
|
+
};
|
|
83
116
|
'kg-button': {
|
|
84
117
|
color?: string;
|
|
85
118
|
size?: string;
|
|
@@ -184,6 +217,14 @@ declare global {
|
|
|
184
217
|
hasRight?: boolean;
|
|
185
218
|
[key: string]: any;
|
|
186
219
|
};
|
|
220
|
+
'kg-list': {
|
|
221
|
+
|
|
222
|
+
[key: string]: any;
|
|
223
|
+
};
|
|
224
|
+
'kg-list-item': {
|
|
225
|
+
|
|
226
|
+
[key: string]: any;
|
|
227
|
+
};
|
|
187
228
|
'kg-loader': {
|
|
188
229
|
src?: string;
|
|
189
230
|
text?: string;
|
|
@@ -278,6 +319,11 @@ declare global {
|
|
|
278
319
|
vertical?: boolean;
|
|
279
320
|
[key: string]: any;
|
|
280
321
|
};
|
|
322
|
+
'kg-tag': {
|
|
323
|
+
size?: string;
|
|
324
|
+
color?: string;
|
|
325
|
+
[key: string]: any;
|
|
326
|
+
};
|
|
281
327
|
'kg-text': {
|
|
282
328
|
variant?: string;
|
|
283
329
|
weight?: string;
|
|
@@ -302,6 +348,22 @@ declare global {
|
|
|
302
348
|
color?: string;
|
|
303
349
|
[key: string]: any;
|
|
304
350
|
};
|
|
351
|
+
'kg-tooltip': {
|
|
352
|
+
position?: string;
|
|
353
|
+
trigger?: string;
|
|
354
|
+
visible?: boolean;
|
|
355
|
+
[key: string]: any;
|
|
356
|
+
};
|
|
357
|
+
'kg-tree': {
|
|
358
|
+
|
|
359
|
+
[key: string]: any;
|
|
360
|
+
};
|
|
361
|
+
'kg-tree-item': {
|
|
362
|
+
expanded?: boolean;
|
|
363
|
+
selected?: boolean;
|
|
364
|
+
level?: number;
|
|
365
|
+
[key: string]: any;
|
|
366
|
+
};
|
|
305
367
|
}
|
|
306
368
|
}
|
|
307
369
|
}
|