@lazhus/kg-ui 0.10.14 → 0.10.15
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.
|
@@ -1,4 +1,4 @@
|
|
|
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
|
|
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}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||[],o=this._searchQuery||"",r=o.toLocaleLowerCase("tr-TR"),a=o.toLowerCase(),n=i.filter(e=>{const t=String(e.label??""),i=t.toLocaleLowerCase("tr-TR"),o=t.toLowerCase();return i.includes(r)||o.includes(a)||i.includes(a)||o.includes(r)});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 i,css as o,html as s}from"lit
|
|
|
55
55
|
</div>
|
|
56
56
|
`:""}
|
|
57
57
|
|
|
58
|
-
${
|
|
58
|
+
${n.length>0?n.map(t=>s`
|
|
59
59
|
<div
|
|
60
60
|
class="option-item ${e(t.value)?"selected":""}"
|
|
61
61
|
@click="${e=>this._selectOption(t,e)}"
|