@lazhus/kg-ui 0.10.5 → 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 +13 -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; 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 */ .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%;
|
|
@@ -203,12 +203,17 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
203
203
|
}
|
|
204
204
|
|
|
205
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
|
+
*/
|
|
206
211
|
.select-dropdown {
|
|
207
|
-
position:
|
|
208
|
-
top:
|
|
212
|
+
position: fixed;
|
|
213
|
+
top: 0;
|
|
209
214
|
left: 0;
|
|
210
215
|
width: 100%;
|
|
211
|
-
background: var(--kg-surface);
|
|
216
|
+
background: var(--kg-surface, var(--kg-bg, #fff));
|
|
212
217
|
border: 1px solid var(--kg-border);
|
|
213
218
|
border-radius: var(--kg-radius-md, 8px);
|
|
214
219
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
@@ -224,8 +229,8 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
224
229
|
}
|
|
225
230
|
|
|
226
231
|
@keyframes slideDown {
|
|
227
|
-
from {
|
|
228
|
-
to {
|
|
232
|
+
from { transform: translateY(-6px); }
|
|
233
|
+
to { transform: translateY(0); }
|
|
229
234
|
}
|
|
230
235
|
|
|
231
236
|
.search-container {
|