@lazhus/kg-ui 0.9.3 → 0.9.5

package/custom-elements.json

@@ -2454,16 +2454,12 @@
             },
             {
               "kind": "method",
-              "name": "updated",
+              "name": "willUpdate",
               "parameters": [
                 {
                   "name": "changedProperties"
                 }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociated",
-                "module": "src/mixins/FormAssociated.js"
-              }
+              ]
             },
             {
               "kind": "method",
@@ -2598,6 +2594,19 @@
                 "module": "src/mixins/FormAssociated.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changedProperties"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/mixins/FormAssociated.js"
+              }
+            },
             {
               "kind": "method",
               "name": "formResetCallback",
@@ -5690,13 +5699,13 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ activeTab: { type: String, reflect: true }, vertical: { type: Boolean, reflect: true } }"
+              "default": "{ activeTab: { type: String, reflect: true }, vertical: { type: Boolean, reflect: true }, fullWidth: { type: Boolean, reflect: true, attribute: 'full-width' } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: flex; flex-direction: column; width: 100%; font-family: inherit; } :host([vertical]) { flex-direction: row; } .tabs-header { display: flex; border-bottom: 2px solid var(--kg-border); gap: 0.5rem; padding: 0 0.5rem; overflow-x: auto; scrollbar-width: none; } :host([vertical]) .tabs-header { flex-direction: column; border-bottom: none; border-right: 2px solid var(--kg-border); padding: 0.5rem 0 0.5rem 0.5rem; gap: 0.25rem; min-width: 180px; } .tab-trigger { padding: 0.75rem 1.25rem; font-size: 0.9rem; font-weight: 600; color: var(--kg-text-muted); cursor: pointer; position: relative; white-space: nowrap; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; border: none; outline: none; border-radius: 8px 8px 0 0; margin-bottom: -2px; } :host([vertical]) .tab-trigger { padding: 0.75rem 1rem; text-align: left; border-radius: 8px 0 0 8px; margin-bottom: 0; margin-right: -2px; } .tab-trigger:hover { color: var(--kg-primary); background: rgba(65, 171, 52, 0.05); } .tab-trigger.active { color: var(--kg-primary); background: rgba(65, 171, 52, 0.08); } /* Standard Underline */ .tab-trigger::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--kg-primary); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px 2px 0 0; } :host([vertical]) .tab-trigger::after { bottom: 0; left: auto; right: -2px; width: 2px; height: 100%; transform: scaleY(0); border-radius: 2px 0 0 2px; } .tab-trigger.active::after { transform: scaleX(1); } :host([vertical]) .tab-trigger.active::after { transform: scaleY(1); } .tabs-content { padding: 1.5rem 0; flex: 1; } :host([vertical]) .tabs-content { padding: 0 1.5rem; } `"
+              "default": "css` :host { display: flex; flex-direction: column; width: 100%; font-family: inherit; } :host([vertical]) { flex-direction: row; } .tabs-header { display: flex; border-bottom: 2px solid var(--kg-border); gap: 0.5rem; padding: 0 0.5rem; position: relative; z-index: 1; } :host([vertical]) .tabs-header { flex-direction: column; border-bottom: none; border-right: 2px solid var(--kg-border); padding: 0.5rem 0 0.5rem 0.5rem; gap: 0.25rem; min-width: 180px; } .tab-trigger { padding: 0.75rem 1.25rem; font-size: 0.9rem; font-weight: 600; color: var(--kg-text-muted); cursor: pointer; position: relative; white-space: nowrap; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; border: none; outline: none; border-radius: 8px 8px 0 0; } :host([full-width]) .tab-trigger { flex: 1; min-width: 0; text-align: center; } :host([vertical]) .tab-trigger { padding: 0.75rem 1rem; text-align: left; border-radius: 8px 0 0 8px; margin-bottom: 0; margin-right: 0px; } .tab-trigger:hover { color: var(--kg-primary); background: rgba(65, 171, 52, 0.05); } .tab-trigger.active { color: var(--kg-primary); background: rgba(65, 171, 52, 0.08); z-index: 2; } /* Standard Underline */ .tab-trigger::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--kg-primary); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px 2px 0 0; } :host([vertical]) .tab-trigger::after { bottom: 0; left: auto; right: -2px; width: 2px; height: 100%; transform: scaleY(0); border-radius: 2px 0 0 2px; } .tab-trigger.active::after { transform: scaleX(1); } :host([vertical]) .tab-trigger.active::after { transform: scaleY(1); } .tabs-content { padding: 1.5rem 0; flex: 1; } :host([vertical]) .tabs-content { padding: 0 1.5rem; } `"
             },
             {
               "kind": "method",
@@ -5743,6 +5752,14 @@
                 "text": "boolean"
               },
               "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [

package/dist/components/kg-file-upload.js

@@ -1,4 +1,4 @@
-var e,i=Object.defineProperty;import{LitElement as r,css as t,html as s}from"lit";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class l extends(a(r)){static get properties(){return{...super.properties,label:{type:String},placeholder:{type:String},accept:{type:String},multiple:{type:Boolean},hideChips:{type:Boolean,attribute:"hide-chips"},files:{type:Array,state:!0},_previews:{state:!0}}}constructor(){super(),this.placeholder="Dosya seçin...",this.accept="*",this.multiple=!1,this.hideChips=!1,this.files=[],this._previews=/* @__PURE__ */new Map}disconnectedCallback(){super.disconnectedCallback(),this._revokePreviews()}_updateFormValue(){if(this.files.length>0){const e=new FormData;this.files.forEach(i=>e.append(this.name,i)),this.internals.setFormValue(e)}else this.internals.setFormValue(null)}updated(e){e.has("files")&&(this._updatePreviews(),this._updateFormValue()),super.updated(e)}_revokePreviews(){this._previews.forEach(e=>URL.revokeObjectURL(e)),this._previews.clear()}_updatePreviews(){this._revokePreviews();const e=/* @__PURE__ */new Map;this.files.forEach(i=>{i.type.startsWith("image/")&&e.set(i,URL.createObjectURL(i))}),this._previews=e,this.requestUpdate()}_handleFileChange(e){const i=Array.from(e.target.files);this._addFiles(i),e.target.value=""}_addFiles(e){this.disabled||0===e.length||(this.files=this.multiple?e:[e[0]],this._emitChange())}_removeFile(e){this.files=this.files.filter((i,r)=>r!==e),this._emitChange()}_emitChange(){this.dispatchEvent(new CustomEvent("change",{detail:{files:this.files},bubbles:!0,composed:!0}))}_triggerUpload(){this.disabled||this.shadowRoot.querySelector("input").click()}_onDragOver(e){e.preventDefault(),this.disabled||this.shadowRoot.querySelector(".upload-wrapper").classList.add("active")}_onDragLeave(){this.shadowRoot.querySelector(".upload-wrapper").classList.remove("active")}_onDrop(e){if(e.preventDefault(),this._onDragLeave(),this.disabled)return;const i=Array.from(e.dataTransfer.files);this._addFiles(i)}render(){const e=this.files.length>0,i=e?this.multiple?`${this.files.length} Dosya Seçildi`:this.files[0].name:this.placeholder;return s`
+var e,i=Object.defineProperty;import{LitElement as r,css as t,html as s}from"lit";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class l extends(a(r)){static get properties(){return{...super.properties,label:{type:String},placeholder:{type:String},accept:{type:String},multiple:{type:Boolean},hideChips:{type:Boolean,attribute:"hide-chips"},files:{type:Array,state:!0},_previews:{state:!0}}}constructor(){super(),this.placeholder="Dosya seçin...",this.accept="*",this.multiple=!1,this.hideChips=!1,this.files=[],this._previews=/* @__PURE__ */new Map}disconnectedCallback(){super.disconnectedCallback(),this._revokePreviews()}_updateFormValue(){if(this.files.length>0){const e=new FormData;this.files.forEach(i=>e.append(this.name,i)),this.internals.setFormValue(e)}else this.internals.setFormValue(null)}willUpdate(e){e.has("files")&&(this._updatePreviews(),this._updateFormValue())}_revokePreviews(){this._previews.forEach(e=>URL.revokeObjectURL(e)),this._previews.clear()}_updatePreviews(){this._revokePreviews();const e=/* @__PURE__ */new Map;this.files.forEach(i=>{i&&i.type&&i.type.startsWith("image/")&&e.set(i,URL.createObjectURL(i))}),this._previews=e}_handleFileChange(e){const i=Array.from(e.target.files);this._addFiles(i),e.target.value=""}_addFiles(e){this.disabled||0===e.length||(this.files=this.multiple?e:[e[0]],this._emitChange())}_removeFile(e){this.files=this.files.filter((i,r)=>r!==e),this._emitChange()}_emitChange(){this.dispatchEvent(new CustomEvent("change",{detail:{files:this.files},bubbles:!0,composed:!0}))}_triggerUpload(){this.disabled||this.shadowRoot.querySelector("input").click()}_onDragOver(e){e.preventDefault(),this.disabled||this.shadowRoot.querySelector(".upload-wrapper").classList.add("active")}_onDragLeave(){this.shadowRoot.querySelector(".upload-wrapper").classList.remove("active")}_onDrop(e){if(e.preventDefault(),this._onDragLeave(),this.disabled)return;const i=Array.from(e.dataTransfer.files);this._addFiles(i)}render(){const e=this.files.length>0,i=e?this.multiple?`${this.files.length} Dosya Seçildi`:this.files[0].name:this.placeholder;return s`
       <div class="container">
         ${this.label?s`<label class="label">${this.label}</label>`:""}
         

package/dist/components/kg-tabs.js

@@ -1,4 +1,4 @@
-var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a)(e,"symbol"!=typeof r?r+"":r,a);import{LitElement as r,css as a,html as i}from"lit";class o extends r{constructor(){super(),this.activeTab="",this.vertical=!1}firstUpdated(){if(this._updatePanels(),!this.activeTab){const t=this.querySelector("kg-tab-panel");t&&(this.activeTab=t.value)}}updated(t){t.has("activeTab")&&this._updatePanels()}_handleTabClick(t){this.activeTab=t,this.dispatchEvent(new CustomEvent("kg-tab-change",{detail:{value:t},bubbles:!0,composed:!0}))}_updatePanels(){Array.from(this.querySelectorAll("kg-tab-panel")).forEach(t=>{t.active=t.value===this.activeTab}),this.requestUpdate()}render(){const t=Array.from(this.querySelectorAll("kg-tab-panel"));return i`
+var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a)(e,"symbol"!=typeof r?r+"":r,a);import{LitElement as r,css as a,html as i}from"lit";class o extends r{constructor(){super(),this.activeTab="",this.vertical=!1,this.fullWidth=!1}firstUpdated(){if(this._updatePanels(),!this.activeTab){const t=this.querySelector("kg-tab-panel");t&&(this.activeTab=t.value)}}updated(t){t.has("activeTab")&&this._updatePanels()}_handleTabClick(t){this.activeTab=t,this.dispatchEvent(new CustomEvent("kg-tab-change",{detail:{value:t},bubbles:!0,composed:!0}))}_updatePanels(){Array.from(this.querySelectorAll("kg-tab-panel")).forEach(t=>{t.active=t.value===this.activeTab}),this.requestUpdate()}render(){const t=Array.from(this.querySelectorAll("kg-tab-panel"));return i`
       <div class="tabs-header">
         ${t.map(t=>i`
           <button 
@@ -12,7 +12,7 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
       <div class="tabs-content">
         <slot @slotchange="${this._updatePanels}"></slot>
       </div>
-    `}}e(o,"properties",{activeTab:{type:String,reflect:!0},vertical:{type:Boolean,reflect:!0}}),e(o,"styles",a`
+    `}}e(o,"properties",{activeTab:{type:String,reflect:!0},vertical:{type:Boolean,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"}}),e(o,"styles",a`
     :host {
       display: flex;
       flex-direction: column;
@@ -29,8 +29,8 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
       border-bottom: 2px solid var(--kg-border);
       gap: 0.5rem;
       padding: 0 0.5rem;
-      overflow-x: auto;
-      scrollbar-width: none;
+      position: relative;
+      z-index: 1;
     }
 
     :host([vertical]) .tabs-header {
@@ -55,7 +55,12 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
       border: none;
       outline: none;
       border-radius: 8px 8px 0 0;
-      margin-bottom: -2px;
+    }
+
+    :host([full-width]) .tab-trigger {
+      flex: 1;
+      min-width: 0;
+      text-align: center;
     }
 
     :host([vertical]) .tab-trigger {
@@ -63,7 +68,7 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
       text-align: left;
       border-radius: 8px 0 0 8px;
       margin-bottom: 0;
-      margin-right: -2px;
+      margin-right: 0px;
     }
 
     .tab-trigger:hover {
@@ -74,6 +79,7 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
     .tab-trigger.active {
       color: var(--kg-primary);
       background: rgba(65, 171, 52, 0.08);
+      z-index: 2;
     }
 
     /* Standard Underline */

package/package.json

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

package/types/components/kg-tabs.d.ts

@@ -6,6 +6,8 @@ export class kgtabs extends LitElement {
   activeTab: string;
   /**  */
   vertical: boolean;
+  /**  */
+  fullWidth: boolean;
 }
 
 declare global {
@@ -18,6 +20,7 @@ declare global {
       'kg-tabs': {
       activeTab?: string;
       vertical?: boolean;
+      fullWidth?: boolean;
       onKgTabChange?: (e: any) => void;
         [key: string]: any;
       };

package/types/index.d.ts

@@ -446,6 +446,7 @@ declare global {
     'kg-tabs': {
       activeTab?: string;
       vertical?: boolean;
+      fullWidth?: boolean;
       onKgTabChange?: (e: any) => void;
       [key: string]: any;
     };