@lazhus/kg-ui 0.9.6 → 0.9.7
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
|
@@ -4447,7 +4447,7 @@
|
|
|
4447
4447
|
"kind": "field",
|
|
4448
4448
|
"name": "styles",
|
|
4449
4449
|
"static": true,
|
|
4450
|
-
"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:
|
|
4450
|
+
"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: fixed; background: var(--kg-surface); 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 { opacity: 0; transform: translateY(-10px); } to { opacity: 1; 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); } } `"
|
|
4451
4451
|
},
|
|
4452
4452
|
{
|
|
4453
4453
|
"kind": "method",
|
|
@@ -4475,6 +4475,10 @@
|
|
|
4475
4475
|
}
|
|
4476
4476
|
]
|
|
4477
4477
|
},
|
|
4478
|
+
{
|
|
4479
|
+
"kind": "method",
|
|
4480
|
+
"name": "_positionDropdown"
|
|
4481
|
+
},
|
|
4478
4482
|
{
|
|
4479
4483
|
"kind": "method",
|
|
4480
4484
|
"name": "_closeDropdown"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit";import"lit/directives/class-map.js";import{F as
|
|
1
|
+
var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit";import"lit/directives/class-map.js";import{F as o}from"../chunks/FormAssociated-Cx5D8YQA.js";class a extends(o(r)){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)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_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._positionDropdown(),setTimeout(()=>{const e=this.shadowRoot.querySelector(".search-input");e&&e.focus()},100)))}_positionDropdown(){requestAnimationFrame(()=>{const e=this.shadowRoot.querySelector(".select-trigger"),t=this.shadowRoot.querySelector(".select-dropdown");if(!e||!t)return;const r=e.getBoundingClientRect();t.style.top=`${r.bottom+5}px`,t.style.left=`${r.left}px`,t.style.width=`${r.width}px`})}_closeDropdown(){this._open=!1}_selectOption(e,t){if(t.stopPropagation(),this.multiple){let t=Array.isArray(this.value)?[...this.value]:[];const r=t.indexOf(e.value);r>-1?t.splice(r,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()}_removeTag(e,t){t.stopPropagation();let r=[...this.value];const i=r.indexOf(e);i>-1&&(r.splice(i,1),this.value=r,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})(),r=(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
|
|
|
@@ -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,r,i)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i})(
|
|
76
|
+
`}}((e,r,i)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i})(a,"symbol"!=typeof(e="styles")?e+"":e,i`
|
|
77
77
|
:host {
|
|
78
78
|
display: inline-block;
|
|
79
79
|
width: 100%;
|
|
@@ -201,15 +201,12 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
201
201
|
|
|
202
202
|
/* Dropdown */
|
|
203
203
|
.select-dropdown {
|
|
204
|
-
position:
|
|
205
|
-
top: calc(100% + 5px);
|
|
206
|
-
left: 0;
|
|
207
|
-
width: 100%;
|
|
204
|
+
position: fixed;
|
|
208
205
|
background: var(--kg-surface);
|
|
209
206
|
border: 1px solid var(--kg-border);
|
|
210
207
|
border-radius: var(--kg-radius-md, 8px);
|
|
211
208
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
212
|
-
z-index:
|
|
209
|
+
z-index: 9999;
|
|
213
210
|
max-height: 300px;
|
|
214
211
|
overflow-y: auto;
|
|
215
212
|
display: none;
|
|
@@ -300,4 +297,4 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
300
297
|
from { opacity: 0; transform: translateY(-4px); }
|
|
301
298
|
to { opacity: 1; transform: translateY(0); }
|
|
302
299
|
}
|
|
303
|
-
`),"undefined"==typeof customElements||customElements.get("kg-select")||customElements.define("kg-select",
|
|
300
|
+
`),"undefined"==typeof customElements||customElements.get("kg-select")||customElements.define("kg-select",a);export{a as kgselect};
|