@lazhus/kg-ui 0.10.14 → 0.10.16

package/custom-elements.json

@@ -865,7 +865,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-checkbox-wrapper:focus-within .checkbox-box { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } .kg-checkbox-wrapper { position: relative; display: inline-block; } .kg-checkbox-container { display: flex; align-items: center; gap: 10px; position: relative; } .checkbox-box { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-checkbox-container:hover .checkbox-box { border-color: var(--checkbox-active-color, var(--kg-primary)); } .kg-checkbox-container.checked .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .checkmark { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .checked .checkmark { opacity: 1; transform: scale(1) rotate(0); } /* Indeterminate state */ .checkbox-box::after { content: ''; position: absolute; width: 10px; height: 2px; background: white; border-radius: 1px; opacity: 0; transform: scaleX(0.5); transition: all 0.2s; } .kg-checkbox-container.indeterminate .checkbox-box { background: var(--kg-primary); border-color: var(--kg-primary); } .indeterminate .checkbox-box::after { opacity: 1; transform: scaleX(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } .error .checkbox-box { border-color: #DB2828 !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
+              "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-checkbox-wrapper:focus-within .checkbox-box { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } .kg-checkbox-wrapper { position: relative; display: inline-block; } .kg-checkbox-container { display: flex; align-items: center; gap: 10px; position: relative; } .checkbox-box { box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-checkbox-container:hover .checkbox-box { border-color: var(--checkbox-active-color, var(--kg-primary)); } .kg-checkbox-container.checked .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .checkmark { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .checked .checkmark { opacity: 1; transform: scale(1) rotate(0); } .indeterminate .checkmark { opacity: 0 !important; transform: scale(0.5) rotate(-45deg) !important; } /* Indeterminate state */ .checkbox-box::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: white; border-radius: 1px; opacity: 0; transform: translate(-50%, -50%) scaleX(0.5); transition: all 0.2s; } .kg-checkbox-container.indeterminate .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .indeterminate .checkbox-box::after { opacity: 1; transform: translate(-50%, -50%) scaleX(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } .error .checkbox-box { border-color: #DB2828 !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
             },
             {
               "kind": "method",

package/dist/components/kg-checkbox.js

@@ -15,11 +15,9 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
             style="position: absolute; opacity: 0; width: 0; height: 0;"
           />
           <div class="checkbox-box">
-            ${this.indeterminate?"":i`
-              <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
-                  <polyline points="20 6 9 17 4 12"></polyline>
-              </svg>
-            `}
+            <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
           </div>
           ${this.label?i`<span class="label-text">${this.label}</span>`:""}
         </div>
@@ -28,6 +26,7 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
     `}}t(s,"shadowRootOptions",{...r.shadowRootOptions,delegatesFocus:!0}),t(s,"styles",o`
     :host {
       display: inline-block;
+      vertical-align: middle;
       cursor: pointer;
       user-select: none;
       font-family: inherit;
@@ -52,6 +51,7 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
     }
 
     .checkbox-box {
+      box-sizing: border-box;
       width: 20px;
       height: 20px;
       border: 2px solid var(--kg-border);
@@ -88,27 +88,34 @@ var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,con
       transform: scale(1) rotate(0);
     }
 
+    .indeterminate .checkmark {
+      opacity: 0 !important;
+      transform: scale(0.5) rotate(-45deg) !important;
+    }
+
     /* Indeterminate state */
     .checkbox-box::after {
       content: '';
       position: absolute;
+      top: 50%;
+      left: 50%;
       width: 10px;
       height: 2px;
       background: white;
       border-radius: 1px;
       opacity: 0;
-      transform: scaleX(0.5);
+      transform: translate(-50%, -50%) scaleX(0.5);
       transition: all 0.2s;
     }
 
     .kg-checkbox-container.indeterminate .checkbox-box {
-      background: var(--kg-primary);
-      border-color: var(--kg-primary);
+      background: var(--checkbox-active-color, var(--kg-primary));
+      border-color: var(--checkbox-active-color, var(--kg-primary));
     }
 
     .indeterminate .checkbox-box::after {
       opacity: 1;
-      transform: scaleX(1);
+      transform: translate(-50%, -50%) scaleX(1);
     }
 
     .label-text {

package/dist/components/kg-select.js

@@ -1,4 +1,4 @@
-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`
+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`
       <div class="kg-select-container">
         ${this.label?s`<label class="select-label">${this.label}</label>`:""}
 
@@ -55,7 +55,7 @@ var e,t=Object.defineProperty;import{LitElement as i,css as o,html as s}from"lit
               </div>
           `:""}
 
-          ${i.length>0?i.map(t=>s`
+          ${n.length>0?n.map(t=>s`
             <div 
               class="option-item ${e(t.value)?"selected":""}" 
               @click="${e=>this._selectOption(t,e)}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.10.14",
+  "version": "0.10.16",
   "type": "module",
   "files": [
     "dist",