@lazhus/kg-ui 0.10.4 → 0.10.9
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 +29 -16
- package/dist/components/kg-modal.js +3 -3
- package/dist/components/kg-select.js +16 -8
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -3857,7 +3857,7 @@
|
|
|
3857
3857
|
"kind": "field",
|
|
3858
3858
|
"name": "styles",
|
|
3859
3859
|
"static": true,
|
|
3860
|
-
"default": "css` :host { display: block; --kg-modal-z-index: 2000; } .kg-modal-dimmer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: var(--kg-modal-z-index); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: var(--kg-space-md); box-sizing: border-box; } .kg-modal-dimmer.open { opacity: 1; visibility: visible; } .kg-modal-content { background: var(--kg-bg); color: var(--kg-text); border-radius: var(--kg-radius-lg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); width: 100%; max-width: 600px;
|
|
3860
|
+
"default": "css` :host { display: block; --kg-modal-z-index: 2000; } .kg-modal-dimmer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: var(--kg-modal-z-index); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: var(--kg-space-md); box-sizing: border-box; } .kg-modal-dimmer.open { opacity: 1; visibility: visible; } .kg-modal-content { background: var(--kg-bg); color: var(--kg-text); border-radius: var(--kg-radius-lg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); width: 100%; max-width: 600px; opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; max-height: 90vh; overflow: visible; } .kg-modal-dimmer.open .kg-modal-content { opacity: 1; } /* Sizes */ .size-mini { max-width: 350px; } .size-tiny { max-width: 450px; } .size-small { max-width: 550px; } .size-large { max-width: 900px; } .size-fullscreen { max-width: 95vw; height: 95vh; } /* Basic style */ :host([basic]) .kg-modal-content { background: transparent; box-shadow: none; color: white; } .modal-header { padding: var(--kg-space-lg); font-size: 1.25rem; font-weight: 700; border-bottom: 1px solid var(--kg-border); display: flex; justify-content: space-between; align-items: center; } .modal-body { padding: var(--kg-space-lg); overflow-y: auto; flex: 1; } .modal-footer { padding: var(--kg-space-md) var(--kg-space-lg); border-top: 1px solid var(--kg-border); background: var(--kg-surface); display: flex; justify-content: flex-end; gap: 0.75rem; } .close-button { background: none; border: none; color: var(--kg-text-muted); cursor: pointer; font-size: 1.5rem; padding: 0.5rem; line-height: 1; border-radius: var(--kg-radius-sm); transition: all 0.2s; } .close-button:hover { background: var(--kg-surface); color: var(--kg-text); } `"
|
|
3861
3861
|
},
|
|
3862
3862
|
{
|
|
3863
3863
|
"kind": "field",
|
|
@@ -4720,7 +4720,7 @@
|
|
|
4720
4720
|
"kind": "field",
|
|
4721
4721
|
"name": "styles",
|
|
4722
4722
|
"static": true,
|
|
4723
|
-
"default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } .clear-button { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--kg-text-muted); opacity: 0.6; transition: all 0.2s; flex-shrink: 0; padding: 4px; border-radius: 50%; } .clear-button:hover { opacity: 1; background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); color: var(--kg-primary); } /* Dropdown */ .select-dropdown { position:
|
|
4723
|
+
"default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } .clear-button { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--kg-text-muted); opacity: 0.6; transition: all 0.2s; flex-shrink: 0; padding: 4px; border-radius: 50%; } .clear-button:hover { opacity: 1; background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); color: var(--kg-primary); } /* Dropdown */ /* * Positioned as fixed (coordinates computed in _positionDropdown) so the * dropdown escapes any ancestor with overflow auto/hidden -- e.g. a modal * body or a scroll container -- instead of being clipped by it. */ .select-dropdown { position: fixed; top: 0; left: 0; width: 100%; background: var(--kg-surface, var(--kg-bg, #fff)); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 9999; max-height: 300px; overflow-y: auto; display: none; animation: slideDown 0.2s ease-out; } .select-dropdown.visible { display: block; } @keyframes slideDown { from { transform: translateY(-6px); } to { transform: translateY(0); } } .search-container { padding: 8px; border-bottom: 1px solid var(--kg-border); position: sticky; top: 0; background: var(--kg-surface); z-index: 10; } .search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--kg-border); border-radius: 4px; outline: none; font-family: inherit; font-size: 0.9rem; } .search-input:focus { border-color: var(--kg-primary); } .option-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.15s; color: var(--kg-text); } .option-item:hover { background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); } .option-item.selected { background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08); color: var(--kg-primary); font-weight: 600; } .no-results { padding: 16px; text-align: center; color: var(--kg-text-muted); font-size: 0.9rem; } .check-icon { width: 16px; height: 16px; } .select-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
4724
4724
|
},
|
|
4725
4725
|
{
|
|
4726
4726
|
"kind": "method",
|
|
@@ -4750,7 +4750,20 @@
|
|
|
4750
4750
|
},
|
|
4751
4751
|
{
|
|
4752
4752
|
"kind": "method",
|
|
4753
|
-
"name": "_positionDropdown"
|
|
4753
|
+
"name": "_positionDropdown",
|
|
4754
|
+
"description": "The dropdown is `position: fixed`, so anchor it to the trigger's viewport\nrect. This lets it overflow any clipping ancestor (modal body, scroll\ncontainer). Flips above the trigger when there isn't enough room below."
|
|
4755
|
+
},
|
|
4756
|
+
{
|
|
4757
|
+
"kind": "method",
|
|
4758
|
+
"name": "_handleReposition"
|
|
4759
|
+
},
|
|
4760
|
+
{
|
|
4761
|
+
"kind": "method",
|
|
4762
|
+
"name": "_setupReposition"
|
|
4763
|
+
},
|
|
4764
|
+
{
|
|
4765
|
+
"kind": "method",
|
|
4766
|
+
"name": "_teardownReposition"
|
|
4754
4767
|
},
|
|
4755
4768
|
{
|
|
4756
4769
|
"kind": "method",
|
|
@@ -4790,6 +4803,19 @@
|
|
|
4790
4803
|
}
|
|
4791
4804
|
]
|
|
4792
4805
|
},
|
|
4806
|
+
{
|
|
4807
|
+
"kind": "method",
|
|
4808
|
+
"name": "updated",
|
|
4809
|
+
"parameters": [
|
|
4810
|
+
{
|
|
4811
|
+
"name": "changedProperties"
|
|
4812
|
+
}
|
|
4813
|
+
],
|
|
4814
|
+
"inheritedFrom": {
|
|
4815
|
+
"name": "FormAssociated",
|
|
4816
|
+
"module": "src/mixins/FormAssociated.js"
|
|
4817
|
+
}
|
|
4818
|
+
},
|
|
4793
4819
|
{
|
|
4794
4820
|
"kind": "method",
|
|
4795
4821
|
"name": "_removeTag",
|
|
@@ -4907,19 +4933,6 @@
|
|
|
4907
4933
|
"module": "src/mixins/FormAssociated.js"
|
|
4908
4934
|
}
|
|
4909
4935
|
},
|
|
4910
|
-
{
|
|
4911
|
-
"kind": "method",
|
|
4912
|
-
"name": "updated",
|
|
4913
|
-
"parameters": [
|
|
4914
|
-
{
|
|
4915
|
-
"name": "changedProperties"
|
|
4916
|
-
}
|
|
4917
|
-
],
|
|
4918
|
-
"inheritedFrom": {
|
|
4919
|
-
"name": "FormAssociated",
|
|
4920
|
-
"module": "src/mixins/FormAssociated.js"
|
|
4921
|
-
}
|
|
4922
|
-
},
|
|
4923
4936
|
{
|
|
4924
4937
|
"kind": "method",
|
|
4925
4938
|
"name": "formResetCallback",
|
|
@@ -52,8 +52,8 @@ var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,con
|
|
|
52
52
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
53
53
|
width: 100%;
|
|
54
54
|
max-width: 600px;
|
|
55
|
-
|
|
56
|
-
transition:
|
|
55
|
+
opacity: 0;
|
|
56
|
+
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
57
57
|
display: flex;
|
|
58
58
|
flex-direction: column;
|
|
59
59
|
max-height: 90vh;
|
|
@@ -61,7 +61,7 @@ var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,con
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.kg-modal-dimmer.open .kg-modal-content {
|
|
64
|
-
|
|
64
|
+
opacity: 1;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
/* Sizes */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as
|
|
1
|
+
var e,t=Object.defineProperty;import{LitElement as i,css as o,html as s}from"lit";import"lit/directives/class-map.js";import{F as r}from"../chunks/FormAssociated-jTk7w1I7.js";class a extends(r(i)){static get properties(){return{...super.properties,options:{type:Array},value:{type:Object},placeholder:{type:String},label:{type:String},multiple:{type:Boolean},searchable:{type:Boolean},clearable:{type:Boolean},_open:{type:Boolean,state:!0},_searchQuery:{type:String,state:!0}}}constructor(){super(),this.options=[],this.value=null,this.placeholder="Seçiniz...",this.multiple=!1,this.searchable=!1,this.clearable=!1,this._open=!1,this._searchQuery="",this._handleOutsideClick=this._handleOutsideClick.bind(this),this._handleReposition=this._handleReposition.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._teardownReposition()}_updateFormValue(){if(this.multiple&&Array.isArray(this.value)){const e=new FormData;this.value.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}else this.internals.setFormValue(this.value)}_handleOutsideClick(e){this._open&&(e.composedPath().includes(this)||this._closeDropdown())}_toggleDropdown(e){this.disabled||(this._open=!this._open,this._open?(this._searchQuery="",this.updateComplete.then(()=>this._positionDropdown()),this._setupReposition(),setTimeout(()=>{const e=this.shadowRoot.querySelector(".search-input");e&&e.focus()},100)):this._teardownReposition())}_positionDropdown(){const e=this.shadowRoot.querySelector(".select-trigger"),t=this.shadowRoot.querySelector(".select-dropdown");if(!e||!t)return;const i=e.getBoundingClientRect(),o=t.offsetHeight,s=window.innerHeight-i.bottom,r=i.top,a=s<o+4&&r>s;t.style.width=`${i.width}px`,t.style.left=`${i.left}px`,t.style.top=a?`${Math.max(4,i.top-o-4)}px`:`${i.bottom+4}px`}_handleReposition(){this._open&&this._positionDropdown()}_setupReposition(){window.addEventListener("scroll",this._handleReposition,!0),window.addEventListener("resize",this._handleReposition)}_teardownReposition(){window.removeEventListener("scroll",this._handleReposition,!0),window.removeEventListener("resize",this._handleReposition)}_closeDropdown(){this._open=!1,this._teardownReposition()}_selectOption(e,t){if(t.stopPropagation(),this.multiple){let t=Array.isArray(this.value)?[...this.value]:[];const i=t.indexOf(e.value);i>-1?t.splice(i,1):t.push(e.value),this.value=t}else this.value=e.value,this._closeDropdown();this._dispatchChange()}_dispatchChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}_clearValue(e){e.stopPropagation(),this.value=this.multiple?[]:null,this._dispatchChange(),this._open&&this._closeDropdown()}_handleSearch(e){this._searchQuery=e.target.value.toLowerCase()}updated(e){super.updated?.(e),this._open&&e.has("_searchQuery")&&this._positionDropdown()}_removeTag(e,t){t.stopPropagation();let i=[...this.value];const o=i.indexOf(e);o>-1&&(i.splice(o,1),this.value=i,this._dispatchChange())}render(){const e=e=>this.multiple&&Array.isArray(this.value)?this.value.includes(e):this.value===e,t=(()=>{if(!this.value)return null;if(this.multiple&&Array.isArray(this.value))return this.options.filter(e=>this.value.includes(e.value));const e=this.options.find(e=>e.value===this.value);return e?e.label:null})(),i=(this.options||[]).filter(e=>e.label.toLowerCase().includes(this._searchQuery||""));return s`
|
|
2
2
|
<div class="kg-select-container">
|
|
3
3
|
${this.label?s`<label class="select-label">${this.label}</label>`:""}
|
|
4
4
|
|
|
@@ -55,7 +55,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
55
55
|
</div>
|
|
56
56
|
`:""}
|
|
57
57
|
|
|
58
|
-
${
|
|
58
|
+
${i.length>0?i.map(t=>s`
|
|
59
59
|
<div
|
|
60
60
|
class="option-item ${e(t.value)?"selected":""}"
|
|
61
61
|
@click="${e=>this._selectOption(t,e)}"
|
|
@@ -73,7 +73,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
73
73
|
</div>
|
|
74
74
|
${this.errorText?s`<div class="error-text">${this.errorText}</div>`:""}
|
|
75
75
|
</div>
|
|
76
|
-
`}}((e,
|
|
76
|
+
`}}((e,i,o)=>{i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[i]=o})(a,"symbol"!=typeof(e="styles")?e+"":e,o`
|
|
77
77
|
:host {
|
|
78
78
|
display: inline-block;
|
|
79
79
|
width: 100%;
|
|
@@ -141,6 +141,9 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
141
141
|
.selected-text {
|
|
142
142
|
color: var(--kg-text);
|
|
143
143
|
flex: 1;
|
|
144
|
+
white-space: nowrap;
|
|
145
|
+
overflow: hidden;
|
|
146
|
+
text-overflow: ellipsis;
|
|
144
147
|
}
|
|
145
148
|
|
|
146
149
|
.tags-container {
|
|
@@ -200,12 +203,17 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
200
203
|
}
|
|
201
204
|
|
|
202
205
|
/* Dropdown */
|
|
206
|
+
/*
|
|
207
|
+
* Positioned as fixed (coordinates computed in _positionDropdown) so the
|
|
208
|
+
* dropdown escapes any ancestor with overflow auto/hidden -- e.g. a modal
|
|
209
|
+
* body or a scroll container -- instead of being clipped by it.
|
|
210
|
+
*/
|
|
203
211
|
.select-dropdown {
|
|
204
|
-
position:
|
|
205
|
-
top:
|
|
212
|
+
position: fixed;
|
|
213
|
+
top: 0;
|
|
206
214
|
left: 0;
|
|
207
215
|
width: 100%;
|
|
208
|
-
background: var(--kg-surface);
|
|
216
|
+
background: var(--kg-surface, var(--kg-bg, #fff));
|
|
209
217
|
border: 1px solid var(--kg-border);
|
|
210
218
|
border-radius: var(--kg-radius-md, 8px);
|
|
211
219
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
@@ -221,8 +229,8 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
221
229
|
}
|
|
222
230
|
|
|
223
231
|
@keyframes slideDown {
|
|
224
|
-
from {
|
|
225
|
-
to {
|
|
232
|
+
from { transform: translateY(-6px); }
|
|
233
|
+
to { transform: translateY(0); }
|
|
226
234
|
}
|
|
227
235
|
|
|
228
236
|
.search-container {
|