@lazhus/kg-ui 0.10.13 → 0.10.14
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/custom-elements.json
CHANGED
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
"kind": "field",
|
|
203
203
|
"name": "styles",
|
|
204
204
|
"static": true,
|
|
205
|
-
"default": "css` :host { display: inline-block; vertical-align: middle; position: relative; line-height: 0; } .avatar-wrapper { display: flex; align-items: center; justify-content: center; background: var(--kg-bg-secondary, #eee); color: var(--kg-text-muted, #666); font-weight: 700; overflow: hidden; user-select: none; transition: all 0.2s ease; position: relative; } .avatar-img { width: 100%; height: 100%; object-fit: cover; } .initials { text-transform: uppercase; } /* Shapes */ .circle { border-radius: 50%; } .square { border-radius: 0; } .rounded { border-radius: var(--kg-radius-md, 8px); } /* Sizes */ .tiny { width: 24px; height: 24px; font-size: 0.7rem; } .small { width: 32px; height: 32px; font-size: 0.85rem; } .medium { width: 48px; height: 48px; font-size: 1.1rem; } .large { width: 64px; height: 64px; font-size: 1.5rem; } .huge { width: 96px; height: 96px; font-size: 2.2rem; } .massive { width: 128px; height: 128px; font-size: 3rem; } /* Status Badge */ .status-badge { position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; border-radius: 50%; border: 2px solid var(--kg-bg, white); z-index: 1; } .online { background-color: #
|
|
205
|
+
"default": "css` :host { display: inline-block; vertical-align: middle; position: relative; line-height: 0; } .avatar-wrapper { display: flex; align-items: center; justify-content: center; background: var(--kg-bg-secondary, #eee); color: var(--kg-text-muted, #666); font-weight: 700; overflow: hidden; user-select: none; transition: all 0.2s ease; position: relative; } .avatar-img { width: 100%; height: 100%; object-fit: cover; } .initials { text-transform: uppercase; } /* Shapes */ .circle { border-radius: 50%; } .square { border-radius: 0; } .rounded { border-radius: var(--kg-radius-md, 8px); } /* Sizes */ .tiny { width: 24px; height: 24px; font-size: 0.7rem; } .small { width: 32px; height: 32px; font-size: 0.85rem; } .medium { width: 48px; height: 48px; font-size: 1.1rem; } .large { width: 64px; height: 64px; font-size: 1.5rem; } .huge { width: 96px; height: 96px; font-size: 2.2rem; } .massive { width: 128px; height: 128px; font-size: 3rem; } /* Status Badge */ .status-badge { position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; border-radius: 50%; border: 2px solid var(--kg-bg, white); z-index: 1; } .online { background-color: var(--kg-primary, #3fae26); } .offline { background-color: #9e9e9e; } .away { background-color: #fbb140; } .busy { background-color: #db2828; } .numeric-badge { position: absolute; top: -4px; right: -4px; background: #db2828; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; border: 2px solid var(--kg-bg, white); font-weight: bold; line-height: 1; z-index: 2; } /* Semantic Colors for Avatar Background */ .primary { background-color: var(--kg-primary); color: white; } .secondary { background-color: var(--kg-secondary); color: white; } .tertiary { background-color: var(--kg-tertiary); color: white; } .error { background-color: #db2828; color: white; } .success { background-color: var(--kg-primary, #3fae26); color: white; } .warning { background-color: #fbb140; color: white; } .info { background-color: #1367FF; color: white; } /* Custom Color Helper */ .custom-color { background-color: var(--avatar-bg); color: white; } `"
|
|
206
206
|
},
|
|
207
207
|
{
|
|
208
208
|
"kind": "method",
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
"kind": "field",
|
|
287
287
|
"name": "styles",
|
|
288
288
|
"static": true,
|
|
289
|
-
"default": "css` :host { display: block; } nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0; margin: 0; list-style: none; font-size: 0.9rem; color: var(--kg-text-muted, #666); } ::slotted(a), ::slotted(span) { display: flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; transition: color 0.2s; } ::slotted(a:hover) { color: var(--kg-primary, #
|
|
289
|
+
"default": "css` :host { display: block; } nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0; margin: 0; list-style: none; font-size: 0.9rem; color: var(--kg-text-muted, #666); } ::slotted(a), ::slotted(span) { display: flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; transition: color 0.2s; } ::slotted(a:hover) { color: var(--kg-primary, #3fae26); } ::slotted(.active) { color: var(--kg-text, #1a1a1a); font-weight: 600; pointer-events: none; } .separator { display: flex; align-items: center; user-select: none; font-size: 0.8em; opacity: 0.5; } `"
|
|
290
290
|
},
|
|
291
291
|
{
|
|
292
292
|
"kind": "method",
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
"kind": "field",
|
|
336
336
|
"name": "styles",
|
|
337
337
|
"static": true,
|
|
338
|
-
"default": "css` :host { display: inline-flex; align-items: center; gap: 0.5rem; } .item { color: var(--kg-text-muted, #666); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .item:hover { color: var(--kg-primary, #
|
|
338
|
+
"default": "css` :host { display: inline-flex; align-items: center; gap: 0.5rem; } .item { color: var(--kg-text-muted, #666); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .item:hover { color: var(--kg-primary, #3fae26); } .item.active { color: var(--kg-text, #1a1a1a); font-weight: 600; pointer-events: none; } .separator { color: var(--kg-text-muted, #999); opacity: 0.6; font-size: 0.85em; user-select: none; margin: 0 2px; } :host(:last-child) .separator { display: none; } `"
|
|
339
339
|
},
|
|
340
340
|
{
|
|
341
341
|
"kind": "method",
|
|
@@ -6278,7 +6278,7 @@
|
|
|
6278
6278
|
"kind": "field",
|
|
6279
6279
|
"name": "styles",
|
|
6280
6280
|
"static": true,
|
|
6281
|
-
"default": "css` :host { display: inline-flex; } .tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.25em 0.8em; border-radius: var(--kg-radius-sm, 4px); font-size: 0.85rem; font-weight: 600; line-height: 1; gap: 0.4em; background: var(--kg-bg-secondary, #eee); color: var(--kg-text, #333); border: 1px solid transparent; user-select: none; transition: all 0.2s ease; white-space: nowrap; } .pill { border-radius: 100px; } /* Sizes */ .mini { font-size: 0.65rem; padding: 0.2em 0.5em; } .tiny { font-size: 0.75rem; padding: 0.22em 0.6em; } .small { font-size: 0.8rem; padding: 0.25em 0.7em; } .medium { font-size: 0.9rem; padding: 0.3em 0.85em; } .large { font-size: 1rem; padding: 0.35em 1em; } /* Colors */ .primary { background: var(--kg-primary); color: white; } .secondary { background: var(--kg-secondary); color: white; } .tertiary { background: var(--kg-tertiary); color: white; } .error { background: #DB2828; color: white; } .success { background: #
|
|
6281
|
+
"default": "css` :host { display: inline-flex; } .tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.25em 0.8em; border-radius: var(--kg-radius-sm, 4px); font-size: 0.85rem; font-weight: 600; line-height: 1; gap: 0.4em; background: var(--kg-bg-secondary, #eee); color: var(--kg-text, #333); border: 1px solid transparent; user-select: none; transition: all 0.2s ease; white-space: nowrap; } .pill { border-radius: 100px; } /* Sizes */ .mini { font-size: 0.65rem; padding: 0.2em 0.5em; } .tiny { font-size: 0.75rem; padding: 0.22em 0.6em; } .small { font-size: 0.8rem; padding: 0.25em 0.7em; } .medium { font-size: 0.9rem; padding: 0.3em 0.85em; } .large { font-size: 1rem; padding: 0.35em 1em; } /* Colors */ .primary { background: var(--kg-primary); color: white; } .secondary { background: var(--kg-secondary); color: white; } .tertiary { background: var(--kg-tertiary); color: white; } .error { background: #DB2828; color: white; } .success { background: var(--kg-primary, #3fae26); color: white; } .warning { background: #FBB140; color: white; } /* Basic (Outlined) */ .basic { background: transparent; border-color: currentColor; color: var(--kg-text-muted); } .basic.primary { color: var(--kg-primary); } .basic.secondary { color: var(--kg-secondary); } .basic.tertiary { color: var(--kg-tertiary); } .basic.error { color: #DB2828; } .basic.success { color: var(--kg-primary, #3fae26); } .close-icon { cursor: pointer; opacity: 0.7; display: flex; align-items: center; margin-right: -0.3em; font-size: 1.1em; } .close-icon:hover { opacity: 1; } /* Custom Colors */ .custom-color { background: var(--kg-tag-color); color: white; } .basic.custom-color { background: transparent; border-color: var(--kg-tag-color); color: var(--kg-tag-color); } `"
|
|
6282
6282
|
},
|
|
6283
6283
|
{
|
|
6284
6284
|
"kind": "method",
|
|
@@ -6761,7 +6761,7 @@
|
|
|
6761
6761
|
"kind": "field",
|
|
6762
6762
|
"name": "styles",
|
|
6763
6763
|
"static": true,
|
|
6764
|
-
"default": "css` :host { --toast-accent: var(--kg-secondary); display: block; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; transform: translateY(-20px) scale(0.95); } :host([visible]) { opacity: 1; transform: translateY(0) scale(1); } .toast-container { pointer-events: auto; min-width: 260px; max-width: 320px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; position: relative; border-left: 5px solid var(--toast-accent); transition: all 0.3s ease; } .toast-header { font-weight: 700; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; padding-right: 1.5rem; color: var(--toast-text-color, var(--kg-text)); } .toast-message { font-size: 0.85rem; line-height: 1.4; color: var(--toast-text-color, var(--kg-text)); opacity: 0.85; } .close-btn { position: absolute; top: 0.4rem; right: 0.4rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; font-size: 0.8rem; transition: all 0.2s; border-radius: 50%; color: var(--toast-text-color, var(--kg-text)); } .close-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); } /* Glassmorphic Vibrant Colors */ :host([color=\"primary\"]) { --toast-accent: var(--kg-primary); --toast-bg: rgba(65, 171, 52, 0.15); --toast-text-color: #
|
|
6764
|
+
"default": "css` :host { --toast-accent: var(--kg-secondary); display: block; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; transform: translateY(-20px) scale(0.95); } :host([visible]) { opacity: 1; transform: translateY(0) scale(1); } .toast-container { pointer-events: auto; min-width: 260px; max-width: 320px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; position: relative; border-left: 5px solid var(--toast-accent); transition: all 0.3s ease; } .toast-header { font-weight: 700; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; padding-right: 1.5rem; color: var(--toast-text-color, var(--kg-text)); } .toast-message { font-size: 0.85rem; line-height: 1.4; color: var(--toast-text-color, var(--kg-text)); opacity: 0.85; } .close-btn { position: absolute; top: 0.4rem; right: 0.4rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; font-size: 0.8rem; transition: all 0.2s; border-radius: 50%; color: var(--toast-text-color, var(--kg-text)); } .close-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); } /* Glassmorphic Vibrant Colors */ :host([color=\"primary\"]) { --toast-accent: var(--kg-primary); --toast-bg: rgba(65, 171, 52, 0.15); --toast-text-color: var(--kg-primary-active, #2a7319); } :host([color=\"secondary\"]) { --toast-accent: var(--kg-secondary); --toast-bg: rgba(19, 103, 255, 0.12); --toast-text-color: #0d46ad; } :host([color=\"tertiary\"]) { --toast-accent: var(--kg-tertiary); --toast-bg: rgba(251, 177, 64, 0.18); --toast-text-color: #8c5a00; } :host([color=\"error\"]) { --toast-accent: #DB2828; --toast-bg: rgba(219, 40, 40, 0.12); --toast-text-color: #b21e1e; } .toast-container { background-color: var(--toast-bg); } /* Dark Mode Text Adjustments */ :host-context([data-theme='dark']) { --toast-text-color: white; } :host-context([data-theme='dark']) :host([color=\"primary\"]) { --toast-bg: rgba(65, 171, 52, 0.25); } :host-context([data-theme='dark']) :host([color=\"secondary\"]) { --toast-bg: rgba(19, 103, 255, 0.2); } :host-context([data-theme='dark']) :host([color=\"tertiary\"]) { --toast-bg: rgba(251, 177, 64, 0.3); } :host-context([data-theme='dark']) :host([color=\"error\"]) { --toast-bg: rgba(219, 40, 40, 0.25); } /* Dark Mode Adjustment */ :host-context([data-theme='dark']) .toast-container { box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset; } `"
|
|
6765
6765
|
},
|
|
6766
6766
|
{
|
|
6767
6767
|
"kind": "method",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var e=Object.defineProperty,
|
|
2
|
-
<div class="${
|
|
1
|
+
var e=Object.defineProperty,r=(r,t,i)=>((r,t,i)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i)(r,"symbol"!=typeof t?t+"":t,i);import{LitElement as t,css as i,html as o}from"lit";class a extends t{constructor(){super(),this.size="medium",this.shape="circle",this.alt="Avatar"}getInitials(){if(!this.name)return"";const e=this.name.split(" ");return e.length>1?(e[0][0]+e[e.length-1][0]).toUpperCase():e[0][0].toUpperCase()}render(){const e=["primary","secondary","tertiary","error","success","warning","info"].includes(this.color),r=this.color&&!e,t=["avatar-wrapper",this.size,this.shape,this.color&&e?this.color:"",r?"custom-color":""].join(" "),i=r?`--avatar-bg: ${this.color};`:"";return o`
|
|
2
|
+
<div class="${t}" style="${i}" title="${this.name||this.alt}">
|
|
3
3
|
${this.src?o`<img class="avatar-img" src="${this.src}" alt="${this.alt}" @error=${()=>this.src=""} />`:o`<span class="initials">${this.getInitials()}</span>`}
|
|
4
4
|
</div>
|
|
5
5
|
${this.status?o`<div class="status-badge ${this.status} ${this.shape}"></div>`:""}
|
|
6
6
|
${this.badge?o`<div class="numeric-badge">${this.badge}</div>`:""}
|
|
7
|
-
`}}
|
|
7
|
+
`}}r(a,"properties",{src:{type:String},alt:{type:String},name:{type:String},size:{type:String},shape:{type:String},status:{type:String},badge:{type:String},color:{type:String}}),r(a,"styles",i`
|
|
8
8
|
:host {
|
|
9
9
|
display: inline-block;
|
|
10
10
|
vertical-align: middle;
|
|
@@ -60,7 +60,7 @@ var e=Object.defineProperty,t=(t,r,i)=>((t,r,i)=>r in t?e(t,r,{enumerable:!0,con
|
|
|
60
60
|
z-index: 1;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.online { background-color: #
|
|
63
|
+
.online { background-color: var(--kg-primary, #3fae26); }
|
|
64
64
|
.offline { background-color: #9e9e9e; }
|
|
65
65
|
.away { background-color: #fbb140; }
|
|
66
66
|
.busy { background-color: #db2828; }
|
|
@@ -85,7 +85,7 @@ var e=Object.defineProperty,t=(t,r,i)=>((t,r,i)=>r in t?e(t,r,{enumerable:!0,con
|
|
|
85
85
|
.secondary { background-color: var(--kg-secondary); color: white; }
|
|
86
86
|
.tertiary { background-color: var(--kg-tertiary); color: white; }
|
|
87
87
|
.error { background-color: #db2828; color: white; }
|
|
88
|
-
.success { background-color: #
|
|
88
|
+
.success { background-color: var(--kg-primary, #3fae26); color: white; }
|
|
89
89
|
.warning { background-color: #fbb140; color: white; }
|
|
90
90
|
.info { background-color: #1367FF; color: white; }
|
|
91
91
|
|
|
@@ -29,7 +29,7 @@ var e=Object.defineProperty,t=(t,r,a)=>((t,r,a)=>r in t?e(t,r,{enumerable:!0,con
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
::slotted(a:hover) {
|
|
32
|
-
color: var(--kg-primary, #
|
|
32
|
+
color: var(--kg-primary, #3fae26);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
::slotted(.active) {
|
|
@@ -71,7 +71,7 @@ var e=Object.defineProperty,t=(t,r,a)=>((t,r,a)=>r in t?e(t,r,{enumerable:!0,con
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.item:hover {
|
|
74
|
-
color: var(--kg-primary, #
|
|
74
|
+
color: var(--kg-primary, #3fae26);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.item.active {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var e=Object.defineProperty,
|
|
2
|
-
<div class="${
|
|
1
|
+
var e=Object.defineProperty,r=(r,o,t)=>((r,o,t)=>o in r?e(r,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[o]=t)(r,"symbol"!=typeof o?o+"":o,t);import{LitElement as o,css as t,html as s}from"lit";class i extends o{constructor(){super(),this.size="medium",this.color=""}_handleClose(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("kg-close",{bubbles:!0,composed:!0}))}render(){const e=["primary","secondary","tertiary","error","success","warning"].includes(this.color),r=this.color&&!e,o=["tag",this.size,this.color&&e?this.color:"",r?"custom-color":"",this.pill?"pill":"",this.basic?"basic":""].join(" "),t=r?`--kg-tag-color: ${this.color};`:"";return s`
|
|
2
|
+
<div class="${o}" style="${t}">
|
|
3
3
|
<slot name="left"></slot>
|
|
4
4
|
<slot></slot>
|
|
5
5
|
<slot name="right"></slot>
|
|
@@ -7,7 +7,7 @@ var e=Object.defineProperty,o=(o,r,t)=>((o,r,t)=>r in o?e(o,r,{enumerable:!0,con
|
|
|
7
7
|
<span class="close-icon" @click="${this._handleClose}">✕</span>
|
|
8
8
|
`:""}
|
|
9
9
|
</div>
|
|
10
|
-
`}}
|
|
10
|
+
`}}r(i,"properties",{color:{type:String},size:{type:String},pill:{type:Boolean},basic:{type:Boolean},closable:{type:Boolean}}),r(i,"styles",t`
|
|
11
11
|
:host {
|
|
12
12
|
display: inline-flex;
|
|
13
13
|
}
|
|
@@ -44,7 +44,7 @@ var e=Object.defineProperty,o=(o,r,t)=>((o,r,t)=>r in o?e(o,r,{enumerable:!0,con
|
|
|
44
44
|
.secondary { background: var(--kg-secondary); color: white; }
|
|
45
45
|
.tertiary { background: var(--kg-tertiary); color: white; }
|
|
46
46
|
.error { background: #DB2828; color: white; }
|
|
47
|
-
.success { background: #
|
|
47
|
+
.success { background: var(--kg-primary, #3fae26); color: white; }
|
|
48
48
|
.warning { background: #FBB140; color: white; }
|
|
49
49
|
|
|
50
50
|
/* Basic (Outlined) */
|
|
@@ -57,7 +57,7 @@ var e=Object.defineProperty,o=(o,r,t)=>((o,r,t)=>r in o?e(o,r,{enumerable:!0,con
|
|
|
57
57
|
.basic.secondary { color: var(--kg-secondary); }
|
|
58
58
|
.basic.tertiary { color: var(--kg-tertiary); }
|
|
59
59
|
.basic.error { color: #DB2828; }
|
|
60
|
-
.basic.success { color: #
|
|
60
|
+
.basic.success { color: var(--kg-primary, #3fae26); }
|
|
61
61
|
|
|
62
62
|
.close-icon {
|
|
63
63
|
cursor: pointer;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
var t=Object.defineProperty,e=(e,o,
|
|
1
|
+
var t=Object.defineProperty,e=(e,o,r)=>((e,o,r)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r)(e,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as s}from"lit";import"lit/directives/class-map.js";class a extends o{constructor(){super(),this.duration=3e3,this.visible=!1,this.color="secondary",this._timerId=null}connectedCallback(){super.connectedCallback(),this.duration>0&&(this._timerId=setTimeout(()=>this.close(),this.duration))}disconnectedCallback(){super.disconnectedCallback(),this._timerId&&clearTimeout(this._timerId)}close(){this._timerId&&(clearTimeout(this._timerId),this._timerId=null),this.visible=!1,this.dispatchEvent(new CustomEvent("kg-close",{bubbles:!0,composed:!0}))}render(){return s`
|
|
2
2
|
<div class="toast-container">
|
|
3
3
|
<div class="close-btn" @click=${t=>{t.stopPropagation(),this.close()}} title="Close">✕</div>
|
|
4
4
|
<div class="toast-header">
|
|
5
5
|
<span>${this.title}</span>
|
|
6
6
|
</div>
|
|
7
|
-
${this.message?
|
|
7
|
+
${this.message?s`<div class="toast-message">${this.message}</div>`:""}
|
|
8
8
|
</div>
|
|
9
|
-
`}}e(a,"properties",{color:{type:String,reflect:!0},title:{type:String},message:{type:String},duration:{type:Number},visible:{type:Boolean,reflect:!0}}),e(a,"styles",
|
|
9
|
+
`}}e(a,"properties",{color:{type:String,reflect:!0},title:{type:String},message:{type:String},duration:{type:Number},visible:{type:Boolean,reflect:!0}}),e(a,"styles",r`
|
|
10
10
|
:host {
|
|
11
11
|
--toast-accent: var(--kg-secondary);
|
|
12
12
|
display: block;
|
|
@@ -81,7 +81,7 @@ var t=Object.defineProperty,e=(e,o,s)=>((e,o,s)=>o in e?t(e,o,{enumerable:!0,con
|
|
|
81
81
|
:host([color="primary"]) {
|
|
82
82
|
--toast-accent: var(--kg-primary);
|
|
83
83
|
--toast-bg: rgba(65, 171, 52, 0.15);
|
|
84
|
-
--toast-text-color: #
|
|
84
|
+
--toast-text-color: var(--kg-primary-active, #2a7319);
|
|
85
85
|
}
|
|
86
86
|
:host([color="secondary"]) {
|
|
87
87
|
--toast-accent: var(--kg-secondary);
|
|
@@ -116,4 +116,4 @@ var t=Object.defineProperty,e=(e,o,s)=>((e,o,s)=>o in e?t(e,o,{enumerable:!0,con
|
|
|
116
116
|
:host-context([data-theme='dark']) .toast-container {
|
|
117
117
|
box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
|
|
118
118
|
}
|
|
119
|
-
`),"undefined"==typeof customElements||customElements.get("kg-toast")||customElements.define("kg-toast",a);const i={show(t){const e=t.position||"top-right";let o=document.querySelector(`.kg-toast-container.${e}`);if(!o){o=document.createElement("div"),o.className=`kg-toast-container ${e}`;const t=e.includes("top"),
|
|
119
|
+
`),"undefined"==typeof customElements||customElements.get("kg-toast")||customElements.define("kg-toast",a);const i={show(t){const e=t.position||"top-right";let o=document.querySelector(`.kg-toast-container.${e}`);if(!o){o=document.createElement("div"),o.className=`kg-toast-container ${e}`;const t=e.includes("top"),r=e.includes("bottom"),s=e.includes("left");let a=`\n position: fixed;\n z-index: 99999;\n display: flex;\n flex-direction: column;\n pointer-events: none;\n width: 340px;\n gap: 12px;\n padding: 1rem;\n ${t?"top: 0.5rem;":"bottom: 0.5rem;"}\n ${r?"flex-direction: column-reverse;":""}\n `;a+=e.includes("middle")||e.includes("center")?"\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n ":s?"left: 1.5rem;":"right: 1.5rem;",o.setAttribute("style",a),document.body.appendChild(o)}const r=document.createElement("kg-toast");r.title=t.title||"Notification",r.message=t.message||"",r.color=t.color||"secondary",r.duration=void 0!==t.duration?t.duration:4e3,o.appendChild(r),requestAnimationFrame(()=>{requestAnimationFrame(()=>{r.visible=!0})}),r.addEventListener("kg-close",()=>{setTimeout(()=>{r.parentNode===o&&r.remove(),0===o.children.length&&o.remove()},400)})},success(t,e){this.show({title:t,message:e,color:"primary"})},error(t,e){this.show({title:t,message:e,color:"error"})},info(t,e){this.show({title:t,message:e,color:"secondary"})},warning(t,e){this.show({title:t,message:e,color:"tertiary"})}};export{a as kgtoast,i as toast};
|
package/dist/kg-ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.cdnfonts.com/css/century-gothic";:root{--kg-primary: #
|
|
1
|
+
@import"https://fonts.cdnfonts.com/css/century-gothic";:root{--kg-primary: #3fae26;--kg-primary-hover: #349020;--kg-primary-active: #2a7319;--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}
|