@lazhus/kg-ui 0.10.3 → 0.10.4
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 +1 -10
- package/dist/components/kg-select.js +17 -14
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -4720,16 +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:
|
|
4724
|
-
},
|
|
4725
|
-
{
|
|
4726
|
-
"kind": "method",
|
|
4727
|
-
"name": "_handleScroll",
|
|
4728
|
-
"parameters": [
|
|
4729
|
-
{
|
|
4730
|
-
"name": "e"
|
|
4731
|
-
}
|
|
4732
|
-
]
|
|
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: absolute; top: calc(100% + 4px); left: 0; width: 100%; 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); } } `"
|
|
4733
4724
|
},
|
|
4734
4725
|
{
|
|
4735
4726
|
"kind": "method",
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as r,css as i,html 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-jTk7w1I7.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(){}_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
|
-
${this.label?
|
|
3
|
+
${this.label?s`<label class="select-label">${this.label}</label>`:""}
|
|
4
4
|
|
|
5
5
|
<div
|
|
6
6
|
class="select-trigger ${this._open?"open":""} ${this.disabled?"disabled":""} ${this.errorText?"error":""}"
|
|
7
7
|
@click="${this._toggleDropdown}"
|
|
8
8
|
>
|
|
9
|
-
${!this.value||this.multiple&&0===this.value.length?
|
|
9
|
+
${!this.value||this.multiple&&0===this.value.length?s`
|
|
10
10
|
<span class="placeholder">${this.placeholder}</span>
|
|
11
|
-
`:this.multiple?
|
|
11
|
+
`:this.multiple?s`
|
|
12
12
|
<div class="tags-container">
|
|
13
|
-
${t.slice(0,2).map(e=>
|
|
13
|
+
${t.slice(0,2).map(e=>s`
|
|
14
14
|
<div class="tag">
|
|
15
15
|
${e.label}
|
|
16
16
|
<span class="tag-remove" @click="${t=>this._removeTag(e.value,t)}">×</span>
|
|
17
17
|
</div>
|
|
18
18
|
`)}
|
|
19
|
-
${t.length>2?
|
|
19
|
+
${t.length>2?s`
|
|
20
20
|
<div class="tag" style="background: var(--kg-secondary); cursor: default;">
|
|
21
21
|
+${t.length-2}
|
|
22
22
|
</div>
|
|
23
23
|
`:""}
|
|
24
24
|
</div>
|
|
25
|
-
`:
|
|
25
|
+
`:s`
|
|
26
26
|
<span class="selected-text">${t}</span>
|
|
27
27
|
`}
|
|
28
28
|
|
|
29
29
|
<span style="display: flex; align-items: center; gap: 8px;">
|
|
30
|
-
${this.clearable&&!this.disabled&&(Array.isArray(this.value)?this.value.length>0:null!==this.value)?
|
|
30
|
+
${this.clearable&&!this.disabled&&(Array.isArray(this.value)?this.value.length>0:null!==this.value)?s`
|
|
31
31
|
<div class="clear-button" @click="${this._clearValue}" title="Temizle">
|
|
32
32
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
33
33
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
@@ -42,7 +42,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as o}from"lit
|
|
|
42
42
|
</div>
|
|
43
43
|
|
|
44
44
|
<div class="select-dropdown ${this._open?"visible":""}">
|
|
45
|
-
${this.searchable?
|
|
45
|
+
${this.searchable?s`
|
|
46
46
|
<div class="search-container">
|
|
47
47
|
<input
|
|
48
48
|
type="text"
|
|
@@ -55,23 +55,23 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as o}from"lit
|
|
|
55
55
|
</div>
|
|
56
56
|
`:""}
|
|
57
57
|
|
|
58
|
-
${r.length>0?r.map(t=>
|
|
58
|
+
${r.length>0?r.map(t=>s`
|
|
59
59
|
<div
|
|
60
60
|
class="option-item ${e(t.value)?"selected":""}"
|
|
61
61
|
@click="${e=>this._selectOption(t,e)}"
|
|
62
62
|
>
|
|
63
63
|
<span>${t.label}</span>
|
|
64
|
-
${e(t.value)?
|
|
64
|
+
${e(t.value)?s`
|
|
65
65
|
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
|
66
66
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
67
67
|
</svg>
|
|
68
68
|
`:""}
|
|
69
69
|
</div>
|
|
70
|
-
`):
|
|
70
|
+
`):s`
|
|
71
71
|
<div class="no-results">Sonuç bulunamadı</div>
|
|
72
72
|
`}
|
|
73
73
|
</div>
|
|
74
|
-
${this.errorText?
|
|
74
|
+
${this.errorText?s`<div class="error-text">${this.errorText}</div>`:""}
|
|
75
75
|
</div>
|
|
76
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 {
|
|
@@ -201,7 +201,10 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as o}from"lit
|
|
|
201
201
|
|
|
202
202
|
/* Dropdown */
|
|
203
203
|
.select-dropdown {
|
|
204
|
-
position:
|
|
204
|
+
position: absolute;
|
|
205
|
+
top: calc(100% + 4px);
|
|
206
|
+
left: 0;
|
|
207
|
+
width: 100%;
|
|
205
208
|
background: var(--kg-surface);
|
|
206
209
|
border: 1px solid var(--kg-border);
|
|
207
210
|
border-radius: var(--kg-radius-md, 8px);
|